Значение содержимого документа HTML

Выбор правильного элемента для разметки контента, есть главная задача при написании документа HTML. Каждый элемет HTML несет определенную описательную информацию, наделяя таким образом контент смыслом. Такая разметка называется семантической разметкой.

HTML код

HTML код
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Элементы HTML</title> </head> <body> <h1>h1 - заголовок</h1> <p>Используется для обозначения заголовка первого уровня. Всего в HTML есть 6 уровней заголовков: h1-h6 . Поисковые системы определяют уровень заголовка, поэтому обозначение заголовков рекомендуется начинать с первого уровня, создавая таким образом структуру документа.</p> <h1>p - абзац</h1> <p>Используется для обозначения одного или несколько однородных предложений. Помимо текста может содержать изображения и строчные элементы.</p> </body> </html>
Результат
Элементы HTML h1 - заголовок Используется для обозначения заголовка первого уровня. Всего в HTML есть 6 уровней заголовков: h1-h6 . Поисковые системы определяют уровень заголовка, поэтому обозначение заголовков рекомендуется начинать с первого уровня, создавая таким образом структуру документа. Структуру документа используют программы экранного доступа, помогающие пользователям быстро просматривать страницу и перемещаться по ней. p - абзац Используется для обозначения одного или несколько однородных предложений. Помимо текста может содержать изображения и строчные элементы. hr - тематический разрыв Используется для указания, что тема или мысль завершена и начинается другая. hgroup - группировка заголовков Если заголовок сопровождается подзаголовком или ключевыми фразами, то для сохранения структуры, их можно сгруппировать. Например: `<hgroup> <h1>Элементы HTML </h1> <h2> определения </h2> </hgroup>` Тогда элемент заголовка h2 не будет считаться новым заголовком, а браузер примет для оформления структуры документа, только элемент заголовка h1 .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элементы HTML</title>
	</head>
	<body>
		<h1>h1 - заголовок</h1>
		<p>Используется для обозначения заголовка первого уровня. Всего в HTML есть 6 уровней заголовков: h1-h6 . Поисковые системы определяют уровень заголовка, поэтому обозначение заголовков рекомендуется начинать с первого уровня, создавая таким образом структуру документа.</p>
		<h1>p - абзац</h1>
		<p>Используется для обозначения одного или несколько однородных предложений. Помимо текста может содержать изображения и строчные элементы.</p>
	</body>
</html>

Результат

Элементы HTML

h1 - заголовок

Используется для обозначения заголовка первого уровня. Всего в HTML есть 6 уровней заголовков: h1-h6 . Поисковые системы определяют уровень заголовка, поэтому обозначение заголовков рекомендуется начинать с первого уровня, создавая таким образом структуру документа. Структуру документа используют программы экранного доступа, помогающие пользователям быстро просматривать страницу и перемещаться по ней.

p - абзац

Используется для обозначения одного или несколько однородных предложений. Помимо текста может содержать изображения и строчные элементы.

hr - тематический разрыв

Используется для указания, что тема или мысль завершена и начинается другая.

hgroup - группировка заголовков

Если заголовок сопровождается подзаголовком или ключевыми фразами, то для сохранения структуры, их можно сгруппировать.

Например:

<hgroup> <h1>Элементы HTML </h1> <h2> определения </h2> </hgroup> Тогда элемент заголовка h2 не будет считаться новым заголовком, а браузер примет для оформления структуры документа, только элемент заголовка h1 .

Теперь браузер знает следующее:

Документ html называется "Элементы HTML".
В документе присутствуют заголовки первого и второго уровня. Содержимое элемента заголовка первого уровня "Элементы HTML" является основным заголовком. Содержимое двух других элементов заголовка второго уровня, будет считаться подзаголовками. Содержимое элементов заголовка будет увеличено и станет жирным, будет добавлены горизонтальные отступы в начале и конце заголовков.
Содержимое элемента p является абзацем. Текст обозначенный тегами абзаца не изменится, но будут добавлены горизонтальные отступы в начале и в конце абзаца.

В каждом браузере есть своя таблица стилей, поэтому даже если не использовать CSS, браузер придаст тексту вид в соответствии со своей таблицей стилей. Следует всегда выбирать элемент для более точного описания содержимого. Даже если это визуально не соответствует вашему желанию, в дальнейшем вы сможете изменить внешний вид содержимого при помощи CSS.

Комментарии HTML

Комментарии html предназначены как правило для разработчика страницы или группы разработчиков. Они позволяют оставлять пояснения к блокам кода и не будут отображаться на странице открытой в браузере. Так же комментарии можно использовать для скрытия блоков кода, например когда требуется временно убрать их для того чтобы увидеть работоспособность страницы без закомментированного кода.

Пояснительные комментарии задаются следующим образом:
 <p> текст параграфа </p>

Комментарии для блока кода задаются в самом коде:

При этом будут закомментирован не только сам элемент, но и его содержимое.

Все что будет закомментировано, не будет отображаться на страница, но может быть прочитано, через меню браузера - просмотр исходного кода. Поэтому если вы не хотите, чтобы ваши комментарии могли прочесть посторонние люди, удалите их перед тем, как выкладывать ваши страницы html в сеть. К тому же удаление комментариев незначительно уменьшит вес страниц.