1 Topic by PunBB

Topic: Разметка, структура и теги в HTML5

Любой код разметки начинается с доктайпа, этот элемент говорит браузеру, на каком языке разметки и его версии написан документ. Также доктайп переводит браузер в один из возможных режимов: стандартный, почти стандартный и режим совместимости. В HTML5 нет подобных делений, доктайп один единственный и при его наличии браузер работает в стандартном режиме.

<!DOCTYPE html>

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

Изменения претерпели и другие теги, так, у тега <html> нет атрибута xmlns, а кодировка документа сократилась до такой записи.

<meta charset="utf-8">

Впрочем, старый способ указать кодировку также остался.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Атрибут type у тега <script> и <style> можно опустить, браузер автоматически понимает содержимое этих тегов и ему уже не требуется явно об этом напоминать. Простейший код приведён в примере 6.1.

Пример 6.1. Код на HTML5

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример страницы</title>
  <style>
  p { color:  navy; }
  </style>
 </head>
 <body>
  <p>Страница на HTML5</p>
 </body>
</html>

2 Reply by PunBB

Re: Разметка, структура и теги в HTML5

В HTML5 для структуры кода введено несколько новых тегов: <article>, <aside>, <footer>, <header>, <nav>, которые заменяют в некоторых случаях привычный <div>. Хотя кажется, что особой разницы между тегами <div class="header"> и <header> нет, между ними лежит огромная пропасть. Теги ориентированы не на людей, которым нет смысла заглядывать в исходный код страницы, а на машины, интерпретирующих код. Машины или роботы не понимают <div class="header">, для них это типовой тег разметки — замени его на <div class="abrakadabra"> и смысл не поменяется. Другое дело <header>, робот, обнаружив этот тег, воспринимает его именно как шапку сайта или раздела.

Что это даёт в итоге? Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов. Речевые браузеры, предназначенные для слепых людей, пропускают заголовок и переходят непосредственно к содержимому. Сайты могут автоматически обмениваться контентом и другой информацией между собой. Все эти возможности называются семантикой и позволяют представить данные в удобном для роботов виде.

Подробнее...

3 Reply by PunBB

Re: Разметка, структура и теги в HTML5

В любом документе каждый абзац текста в обязательном порядке должен быть представлен специальным структурным элементом <p>…</p>.

Для описания отдельных абзацев текста должен использоваться именно элемент <p>…</p>. Помимо собственно соответствия семантическим требованиям Спецификации, такой подход к разметке текста сам по себе весьма удобен: с помощью каскадных таблиц стилей можно легко менять абзацные интервалы, задавать отступы для первых строк, назначать горизонтальное выравнивание для текста – все то, что мы обычно делаем, когда форматируем обычные документы в Microsoft Word™.

Структурный элемент <p>…</p> является блочным элементом и имеет модель содержимого (%inline;)*. Он не может содержать в себе другие блочные элементы, в том числе и другие элементы <p>…</p>.

Правильное использование:

<div>
  <p>Первый абзац</p>
  <p>Второй абзац</p>
  <ul>
    <li>Пункт списка</li>
    <li>Пункт списка</li>
  </ul>
  <p>Третий абзац</p>
</div>

Что касается пустых элементов <p></p>, их использование хотя и допускается (не является синтаксической ошибкой), но настоятельно не рекомендуется, так как браузерам предписано игнорировать такие конструкции.