HTML 5. Семантические элементы.

До появления стандарта HTML5 вся разметка страниц осуществлялась в основном за счет элементов <div>, которым присваивали классы class или идентификаторы id для структурирования и наглядности разметки. С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое. Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому.

Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. HTML5-элементы не всегда понятны современным браузерам, и по умолчанию браузер считает их строчными элементами — {display: inline;}. Если просто задать ширину и высоту для таких элементов, то в браузере они будут отображаться неправильно. Чтобы решить эту проблему, нужно указать для всех используемых HTML5-элементов {display: block;}.

Для всех элементов доступны ‎глобальные атрибуты.

Структурные элементы HTML5

Секционные элементы

Элемент <header>

Образует содержимое верхней (шапки) части страницы или ее секции. Объединяет вводную информацию и навигационные элементы, может располагаться в любой части страницы. В HTML-документе может содержаться одновременно несколько элементов <header>. Не является обязательным.

Элемент может содержать основной заголовок, или группу заголовков, которые в свою очередь можно поместить в элемент <hgroup>.

Парный тег <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>:

<header>
  <hgroup>
    <h1>...</h1>
    <h2>...</h2>
  </hgroup>
</header>
<header>
  <hgroup>
    <h1>...</h1>
    <h2>...</h2>
  </hgroup>
</header>

Читать далее

		Это интересно 0	Как всё будет выглядеть в блоге: HTML 5. Семантические элементы. До появления стандарта HTML5 вся разметка страниц осуществлялась в основном за счет элементов <div>, которым присваивали классы class или идентификаторы id для структурирования и наглядности разметки Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/luchshie-kompyuternyie-programmyi/12807412/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> HTML 5. Семантические элементы. </a> <div class="insert-intro" style="font-family:trebuchet MS;">До появления стандарта HTML5 вся разметка страниц осуществлялась в основном за счет элементов <div>, которым присваивали классы class или идентификаторы id для структурирования и наглядности разметки </div> </div> HTML 5. Семантические элементы. <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/luchshie-kompyuternyie-programmyi/12807412/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">HTML 5. Семантические элементы.</a> <div style="font-family:trebuchet MS;">До появления стандарта HTML5 вся разметка страниц осуществлялась в основном за счет элементов <div>, которым присваивали классы class или идентификаторы id для структурирования и наглядности разметки </div> </div>

webguru

03.11.2016

В избранное Пожаловаться Просмотров: 228

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

Лучшие компьютерные программы 6768

Активные участники:

Последние откомментированные темы: