Вторник, 21 Октября 2014 07:02

HTML5 тег header

Written by 
Оцени эту запись
(1 Голос)

В продолжение темы семантических тегов HTML5 хочу остановиться на теге <header>.

 

Тег <header> задает "шапку" сайта или страницы. Чаще всего тег <header> содержит заголовок страницы или сайта, но может также содержать и логотип, главное меню (навигацию по сайту), поле поиска, пользовательское меню ("Вход", "Регистрация"). Основное значение тега в том, что он содержит основную информацию, которая чаще всего является общей для всего сайта.

 

 

Пример:

 

 

 

<!DOCTYPE html>

<html>

<head>

<title>Tag article</title>

</head>

<body>

<header>

<div class=logo>

<a href="/"><img src="/images/logo.png"></a>

</div>

<nav>

<a href="/">Home</a> | <a href="/contacts">Contacts</a>

</nav>

</header>

<section>

<h1>Article title</h1>

<article>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</article>

</section>

<footer>@copyright</footer>

</body>

</html>

 

 

Тег <header>  - это блочный тег без каких-либо специфических стилей. Для старых браузеров тегу можно добавить display: block. 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов