***** 1 - Блог Стефанова М.А.

реклама
Sectioning tags
<body>
 Содержит контент страницы
 В документе может быть только 1 такой тэг
Document sections









<article>
<section>
<nav>
<aside>
<h1>,<h2>,…<h6>
<header>
<footer>
<address>
<hgroup>
<article>
 Представляет законченную (самостоятельную)
структуру в документе, страничке, приложении
 Может храниться на сервере отдельно
 Может быть использована повторно
 Содержит тэги sectioning и flow content-а (почти
все тэги, которые могут содержаться в <body>)
 Вложенный тэг <article> должен быть
релевантным по отношению к внешнему тэгу
 Не может содержать тэг <main>
<section>
 Представляет обобщенную (generic) часть
документа или приложения.
 Используется для группировки элементов
определенной тематики (для семантического
разделения документа на тематические секции)
 Содержит тэги flow content-а
 Тема идентифицируется заголовками (вложенные
тэги <h1>…<h6>)
 Часто несколько тэгов <section> «объединяются»
тэгом <article>
 Если нужно управлять отображением части
документа – используйте <div> а не <section>
<nav>
 Представляет часть страницы (документа),
содержащую ссылки на другие страницы
(документы) или на другие части внутри
страницы (документа)
 Содержит тэги flow content-а (но не <main>)
 Не все ссылки описываются этим элементом.
Как правило только основные блоки навигации
(меню)
<aside>
 Представляет часть страницы, содержащей
контент, косвенно связанный с внешним
контентом, но обрабатываемый отдельно от
него.
 Содержит тэги flow content-а (но не <main>)
 Применение – врезки, сноски, пояснения.
 Не путать с текстом в скобках (он является
частью main flow content-а)
<aside>
<article>
<p>
The Disney movie <em>The Little Mermaid</em> was
first released to theatres in 1989.
</p>
<aside>
The movie earned $87 million during its initial release.
</aside>
<p>
More info about the movie...
</p>
</article>
<aside>
<article>
<h1>News from Switzerland</h1>
<aside>
<h1>Switzerland</h1>
<p>Switzerland, a land-locked country in the middle of
geographic Europe, has not joined the geopolitical
European Union, though it is a signatory to a number
of European treaties.</p>
</aside>
</article>
<h1>…<h6>
 Определяют заголовки частей документа
 Уровни заголовков ранжируются от 1 до 6.
 <h1> - наивысший ранг
 <h6> - низший ранг
 В одной секции может быть несколько
заголовков одного уровня
 Заголовок такого-же или более высокого ранга
начинает новую секцию. Заголовок меньшего
ранга стартует новую подсекцию
 Могут содержать элементы, относящиеся к
phrasing content-у
 Уровень заголовка подбирайте исходя из
семантики разметки
Не лучший пример разметки HTML5
<h1>Блог Стефанова М.А.</h1>
<h2>Пересдачи</h2>
<p>Информация о пересдачах...</p>
<h2>Добавлены ЛР по некоторым предметам</h2>
<h3>Предмет 1</h3>
<p>Информация о добавленных лабах...</p>
<h3>Предмет 2</h3>
<p>Информация о добавленных лабах...</p>
<h2>Проверьте гугл док с успеваимостью</h2>
<p>Информация о том, почему его нужно проверить...</p>
Как правильно
<main>
<h1>Блог Стефанова М.А.</h1>
<nav>
<section>
<h2>Пересдачи</h2>
<p>Информация о пересдачах...</p>
<a href=“...”>Ссылка на полный текст</a>
</section>
<section>
<h2>Добавлены ЛР по некоторым предметам</h2>
<nav>
<section>
<h3>Предмет 1</h3>
<p>Информация о добавленных лабах...</p>
<a href=“...”>Ссылка на страницу предмета</a>
</section>
<section>
<h3>Предмет 2</h3>
<p>Информация о добавленных лабах...</p>
<a href=“...”>Ссылка на страницу предмета</a>
</section>
</nav>
</section>
</nav>
</main>
В свою очередь, запись о пересдачах:
<article>
<h1>Информация о пересдачах</h1>
<section>
<h2>ПО-21</h2>
<p>Сдавать лабы за прошлый семестр можно во время пары</p>
<aside>
<p>Поскольку лабы за этот семестр вы все равно не сдаете, то
я хотя бы не просто так на паре сидеть буду</p>
</aside>
</section>
<section>
<h2>ТП-21</h2>
<p>Сдавать лабы за прошлый семестр можно во время пары ПО-22</p>
<aside>
<p>ПО-22 все равно на парах не появляются, так что все ок</p>
</aside>
</section>
</article>
<header>
 Представляет краткое описание (intro) части
(секции) документа.
 Этот тэг НЕ определяет часть документа,
задается внутри sectioning тэгов и может
содержать тэги flow content-а (но не <main>,
<header> и <footer>)
 Как правило содержит заголовки (h1…h6)
внешней секции и такие элементы как логотип,
форма поиска и т.д.
<header>
<h1>Мольберт Краскин</h1>
<p>Дизайнер «от бога»</p>
<img href=“logo.png”/>
</header>
<header>
<body>
<header>
<h1>Little Green Guys With Guns</h1>
<nav>
<ul>
<li><a href="/games">Games</a>
<li><a href="/forum">Forum</a>
<li><a href="/download">Download</a>
</ul>
</nav>
<h2>Important News</h2>
<p>To play today's games you will need to update your client.</p>
<h2>Games</h2>
</header>
<p>You have three active games:</p>
...
<footer>
 Представляет дополнительную информацию по
части (секции) документа.
 Этот тэг НЕ определяет часть документа,
задается внутри sectioning тэгов и может
содержать тэги flow content-а (но не <main>,
<header> и <footer>)
<footer>
 Как правило содержит информацию о секции:
 Автор
 Ссылки на похожие / связанные документы
 Copyright
 …
 Если элемент содержит другие секции, то они
представляют:
 Приложение
 Библиографию
 Указатели (индексы на след или
предыдущую страницу)
 Выходные данные
 Подробные лицензионные соглашения
 …
<header>
...
<footer>
<nav>
<section>
<h1>Статьи</h1>
<p><img src="images/responsiveDesign.jpeg" alt="”>.Узнайте как
создать адаптивный дизайн сайта. Первая часть статьи
посвящена резиновой верстке, вторая – медиа запросам.
<a href="articles/responsiveDesign/1">Part1</a>·
<a href="articles/responsiveDesign/2">Part 2</a></p>
</section>
<ul>
<li> <a href="/about”>Обо мне...</a>
<li> <a href="/feedback">Обратная связь</a>
<li> <a href="/sitemap”>Карта сайта</a>
</ul>
</nav>
<p><small>Copyright © 2015 Мольберт Краскин</small></p>
</footer>
</body>
<address>
 Представляет только контактные данные для
ближайшего корневого тега <body> или <article>
 Если ближайший корневой тэг - <body>,
контактная информация относится ко всему
документу
 Обычно записывается внутри тега <footer> вместе
с другой инфой
<footer>
<address>
Если Вам интересно сотрудничество, пишите
<a href=mailto:godsPower@supadesign.com>Мольберт Краскин</a>.
</address>
<p><small>Copyright © 2015 Supa Design Group</small></p>
</footer>
Еще примеры
body
<!DOCTYPE HTML>
<html>
<head> <title>Steve Hill's Home Page</title> </head>
<body> <p>Hard Trance is My Life.</p> </body>
</html>
article
<article>
<img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley
face with the caption 'masif'">
<p>My fave Masif tee so far!</p>
<footer>Posted 2 days ago</footer>
</article>
<article>
<img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt="">
<p>Happy 2nd birthday Masif Saturdays!!!</p>
<footer>Posted 3 weeks ago</footer>
</article>
Еще примеры
section
<h1>Biography</h1>
<section>
<h1>The facts</h1>
<p>1500+ shows, 14+ countries</p>
</section>
<section>
<h1>2010/2011 figures per year</h1>
<p>100+ shows, 8+ countries</p>
</section>
nav
<nav>
<ul>
<li><a href="/">Home</a>
<li><a href="/biog.html">Bio</a>
<li><a href="/discog.html">Discog</a>
</ul>
</nav>
Еще примеры
aside
<h1>Music</h1>
<p>As any burner can tell you, the event has a lot of trance.</p>
<aside>You can buy the music we played at our <a
href="buy.html">playlist page</a>.</aside>
<p>This year we played a kind of trance that originated in Belgium,
Germany, and the Netherlands in the mid 90s.</p>
h1-h6
<h1>The Guide To Music On The Playa</h1>
<h2>The Main Stage</h2>
<p>If you want to play on a stage, you should bring one.</p>
<h2>Amplified Music</h2>
<p>Amplifiers up to 300W or 90dB are welcome.</p>
Еще примеры
header
<article>
<header>
<h1>Hard Trance is My Life</h1>
<p>By DJ Steve Hill and Technikal</p>
</header>
<p>The album with the amusing punctuation has red artwork.</p>
</article>
footer
<article>
<h1>Hard Trance is My Life</h1>
<p>The album with the amusing punctuation has red artwork.</p>
<footer>
<p>Artists: DJ Steve Hill and Technikal</p>
</footer>
</article>
Скачать