Разделение Web-страницы на фрагменты

По | 22.06.2020
Разделение Web-страницы на фрагменты

Элементы Web-страницы бывают блочными и строчными. Блочный элемент занимает всю ширину родительского элемента. Строчный элемент может быть расположен только внутри блочного элемента. С помощью блочных элементов мы можем разделить Web-страницу на логические фрагменты — например, выполнить форматирование текста с помощью заголовков и абзацев.

Заголовки

Заголовки могут иметь шесть различных размеров:
<hx>Заголовок</hx>
где х — число от 1 до 6.
Заголовок с номером 1 является самым крупным:
<h1>Самый крупный заголовок</h1>

Заголовок с номером 6 является самым мелким:

<h6>Самый мелкий заголовок</h6>

В HTML 4.01 в формате Transitional теги имеют параметр align, с помощью которого можно управлять горизонтальным выравниванием текста внутри заголовка. В HTML 5 этого параметра нет, вместо него нужно использовать атрибут стиля text-align:

<h1 style="text-alight: center">Текст по центру<h1> 

В этом примере мы воспользовались параметром style, который имеют почти все теги.

Разделение на абзацы

Тег <р> позволяет разделить текст на отдельные абзацы. При этом перед абзацем и после него добавляется пустое пространство:

<h1>Заголовок</h1>
<р>Абзац с выравниванием по левому краю</p>
<р style="text-align: center">Абзац с выравниванием по центру</p>
<р style="text-align: justify">Абзац с выравниванием по ширине</p>
Закрывающий тег не обязателен, поэтому и такой код является валидным:
<h1>Заголовок</h1>
<р>Абзац 1
<р>Абзац 2
<р>Абзац 3
В этом случае концом абзаца считается следующий открывающий тег <р> или любой другой блочный элемент.

Парный тег <blockquote> создает абзац с длинной цитатой. Его блок будет иметь меньшую ширину, чем обычный абзац, и выравнивание по центру.

<blockquote>Длинная цитата</blockquote>

Тег <blockquote> может содержать параметр cite, задающий ссылку на страницу с оригинальным текстом.

Тег <div>

Тег <div> является универсальным блочным элементом. С его помощью можно сгруппировать несколько элементов страницы в один и применить к группе различные стили. Кроме того, тег используется для блочной верстки Web-страницы.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Элемент DIV</title>
</head>
<body>
<div id="header">
<hl>&quot;Шапка&quot; страницы</h1>
</div>
<div id ="nav">
<p><a href="page2.html">Страница 2</a></p>
<p><a href="page3.html">Страница 3</a></p>
</div>
<div id="main">
<р>Основное содержимое страницы</p>
</div>
<div id="footer">
<p>&quot;Подвал&quot; страницы</p>
</div>
</body>
</html>

Семантическая разметка в HTML 5

Итак, на примере выше мы создали блочную верстку с помощью тегов . Каждый тег содержит параметр id, задающий уникальный идентификатор элемента. Этот параметр имеют практически все теги. Благодаря этому параметру мы можем обратиться к элементу из программы на JavaScript или применить к элементу стили.

Давайте посмотрим на первый элемент:

<div id="header">
 <h1>&quot;Шапка&quot; страницы<h1>
</div>

По значению параметра id человек догадается о предназначении элемента, а вот поисковый робот видит только безликий элемент div и не догадывается о его предназначении. Чтобы это исправить, в HTML 5 были добавлены средства семантической разметки страниц. Под семантической разметкой подразумевается разделение содержимого страницы на части, каждая из которых имеет особое значение: заголовок страницы, панель навигации, основное содержимое, часть основного содержимого, «подвал» и др.

Перепишем предыдущий пример:

<header>
 <h1>&quot;Шапка&quot; страницы<h1>
</header>

Мы заменили безликий элемент div блочным элементом header, имеющим определенный смысл. Теперь поисковый робот знает, с чем имеет дело, и сможет правильно обработать содержимое элемента.
Для семантической разметки в HTML 5 предусмотрены следующие блочные теги:
□ <header>— «шапка» статьи или самой страницы;
□ <nav> — набор гиперссылок для навигации по содержимому статьи или самому сайту (панель навигации);
□ <main> — блок основного содержимого страницы;
□ <footer> — «подвал» статьи или самой страницы;
□ <section> — значимая часть материала (например, раздел документа). Раздел должен содержать заголовок;
□ <article> — независимый и самодостаточный фрагмент основного содержимого
страницы: отдельная статья, запись форума, блога или комментарий;
□ <aside> — примечание к статье, обычно располагающееся сбоку от основного
текста;
□ <figure> — иллюстрация к статье: обычное графическое изображение, аудио-,
видеоролик или даже фрагмент текста;
□ <figcaption— подпись к иллюстрации. Может присутствовать только в теге <figure>.
С помощью строчного тега <mark> можно пометить важный фрагмент текста. Web-браузер Firefox устанавливает для такого фрагмента желтый цвет фона (как бы выделяет фрагмент текста маркеров).

Тег <details>

Тег <details>

в HTML 5 позволяет скрыть или отобразить какой-либо фрагмент страницы. По умолчанию содержимое элемента скрыто. Чтобы отобразить содержимое, нужно щелкнуть левой кнопкой мыши на заголовке, реализуемом с помощью тега <summary>, или добавить параметр open. Чтобы опять скрыть содержимое, нужно повторно щелкнуть мышью на заголовке:

<details open>
 <summary>Развернуть или свернуть </summary>
 <p>Скрытый текст</p>
</details>

Оба этих тега поддерживаются браузерами Chrome версии 12+, Opera версии 15+, Safari версии 6+ и Firefox версии 49+. Браузеры Internet Explorer и Microsoft Edge тег <details> не поддерживают.

Наш канал в телеграм: @ide_ya

Одна мысль на “Разделение Web-страницы на фрагменты

  1. Pingback: Зарплата внештатного веб-разработчика: сколько вы можете заработать? - IDЕЯ | Обучаем Программированию

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *