Вёрстка со смыслом

Вёрстка со смыслом

Новая семантика HTML5

Семантика

Уровни семантики

1. Применение HTML-элементов;
2. Именование элементов;
3. Комбинация именованных элементов.

Подробнее: Семантическая вёрстка, статья в двух частях.

Суп из тегов

Суп из тегов

			<td class="list">
			    <div class="oh"><div class="oh2">
			    <table id="acont_foto"><tr>
			        <td><div class="item">
			            <br class="clear"/>
			            <div style="text-align: center">
			                 <img src="prozrachniy.gif" border="0"/>
		

Антикварный DTD

			<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
			<!-- There are six levels of headings from H1
			    the most important to H6 the least important. -->
			<!ELEMENT (%heading;)
			    -- (%inline;)* -- heading -->
			<!ATTLIST (%heading;)
			    %attrs; -- %coreattrs, %i18n, %events -->
		

HTML5

Поточные

			<a> <abbr> <address> <area> <article> <aside>
			<audio> <b> <bdi> <bdo> <blockquote> <br> <button>
			<canvas> <cite> <code> <command> <datalist> <del>
			<details> <dfn> <div> <dl> <em> <embed> <fieldset>
			<figure> <footer> <form> <h1> <h2> <h3> <h4> …
		

Элементы, составляющие поток документа.

Мета

			<base> <command> <link>
			<meta> <noscript> <script>
			<style> <title>
		

Элементы, говорящие о документе.

Структурные

			<article> <aside> <section> <nav>
		

Элементы, определяющие структуру документа.

Заголовочные

			<h1> <h2> <h3> <h4> <h5> <h6>
			<hgroup>
		

Элементы, озаглавливащие разделы документа.

Текстовые

			<a> <abbr> <area> <audio> <b> <bdi> <bdo> <br>
			<button> <canvas> <cite> <code> <command> <datalist>
			<del> <dfn> <em> <embed> <i> <iframe> <img> <input>
			<ins> <kbd> <keygen> <label> <map> <mark> <math> <meter>
			<noscript> <object> <output> <progress> <q> <ruby> …
		

Элементы, составляющие содержимое документа.

Встроенные

			<audio> <canvas> <img>
			<iframe> <embed> <math>
			<object> <svg> <video>
		

Элементы, встраивающие в документ стороннее содержимое.

Интерактивные

			<a> <audio> <button> <details> <embed>
			<input> <iframe> <img> <keygen> <label> <menu>
			<object> <select> <textarea> <video>
		

Элементы, предназначенные для взаимодействия с пользователем.

Структурные

Section

1. Структурный элемент самого высокого уровня;
2. Желательно должен содержать заголовок;
3. Ближе к структуре, нежели к главному содержимому;
4. Для иных целей — элемент <div>.

Article

1. Независимое, самоценное содержимое;
2. Часто содержит шапку и подвал;
3. Более универсальный, может использовать на любых уровнях;
4. Запись в блоге, отдельный комментарий, некоторый модуль.

Aside

1. Вторичное содержимое, имеющее отношение к основному;
2. Как в контексте <article>, так и всего документа;
3. Не только сайдбар, но и вторичная навигация и реклама.

Header

1. Универсальная шапка для содержимого;
2. Как в контексте отдельных блоков, так и всего документа;
3. Содержит не только заголовки, но и другие необходимые элементы;
4. Не только шапка сайта, но и любые другие.

Footer

1. Подвал, следующий за основным содержимым блока;
2. Допольнительная мета-информация о содержимом;
3. Не только подвал сайта, но и любой другой;
4. Не обязательно в самом конце блока.

Меню

			<nav class="menu">
			    <ul>
			        <li><a href="#">Главная</a></li>
			        <li><a href="#">Каталог</a></li>
			        <li><a href="#">О компании</a></li>
			    </ul>
			</nav>
		

Крошки

			<nav class="pagination">
			    <ul>
			        <li><a href="#">Назад</a></li>
			        <li><a href="#">1</a></li>
			        <li><a href="#">2</a></li>
			    </ul>
			</nav>
		

Содержание

			<nav class="table-of-contents">
			    <dl>
			        <dt>Оглавление</dt>     <dd>стр. 1</dd>
			        <dt>Глава первая</dt>   <dd>стр. 2</dd>
			        <dt>Эпилог</dt>         <dd>стр. 3</dd>
			    </dl>
			</nav>
		

Заголовочные

Заголовочные

			<article>
			    <h1>Вёрстка со смыслом</h1>
			    <p>Вадим Макеев, Opera Software</p>
			</article>
		

Заголовочные

			<article>
			    <header>
			        <h1>Вёрстка со смыслом</h1>
			        <p>Вадим Макеев, Opera Software</p>
			    </header>
			</article>
		

Заголовочные

			<article>
			    <header>
			        <h1>Вёрстка со смыслом</h1>
			        <h2>Новая семантика HTML5</h2>
			        <p>Вадим Макеев, Opera Software</p>
			    </header>
			</article>
		

Заголовочные

			<header>
			    <hgroup>
			        <h1>Вёрстка со смыслом</h1>
			        <h2>Новая семантика HTML5</h2>
			    </hgroup>
			    <p>Вадим Макеев, Opera Software</p>
			</header>
		

Текстовые

Figure

			<figure>
			    <img src="001.jpg" alt="Mmm, icicle">
			</figure>
		

Дополнительное содержимое в текстовом потоке.

Figure

			<figure>
			    <img src="001.jpg" alt="Mmm, icicle">
			    <figcaption>
			        Mmm, icicle… By pepelsbey
			    </figcaption>
			</figure>
		

Figure

			<figure>
			    <img src="001.jpg" alt="Mmm, icicle">
			    <img src="002.jpg" alt="Oh, another one">
			    <img src="003.jpg" alt="Delicious!">
			    <figcaption>So many icicles!</figcaption>
			</figure>
		

Figure

			<figure>
			    <blockquote>
			        <p>Зомби зомби зомби.</p>
			    </blockquote>
			    <figcaption>Народная мудрость</figcaption>
			</figure>
		

Italic

Элемент <i> представляет собой фрагмент текста с дополнительным выделением или же экспрессивно-эмоциональным сдвигом относительно обычного текста — то, что обычно обозначается курсивом в типографике.

Bold

Элемент <b> представляет собой фрагмент текста, который выделяется из окружающего его контекста, но не передает никакого особого значения и по правилам типографики обычно выделяется полужирным начертанием.

Italic и Bold

Nanotyrannus («карликовый тиран») принадлежит к семейству тиранозавров, и, возможно, является юной особью тиранозавра. Его череп был найден Чарльзом Гилмором в 1942-м году. Гилмор обозначил его как представителя нового вида Gorgosaurus lancensis.

Italic и Bold

<i class="taxonomy">Nanotyrannus</i> («карликовый тиран») принадлежит к семейству тиранозавров, и, возможно, является юной особью <i class="taxonomy">тиранозавра</i>. Его череп был найден <b>Чарльзом Гилмором</b> в 1942-м году. Гилмор обозначил его как представителя нового вида <i class="taxonomy">Gorgosaurus lancensis</i>.

Emphasis

			<p>
			    <em>Быстро</em> позови доктора!
			    Быстро позови <em>доктора!</em>
			</p>
		

Strong

			<p>
			    <strong>Граждане!</strong>
			    При В.И. Матвиенко
			    любая сторона улицы
			    <strong>опасна для жизни!</strong>
			</p>
		

Бесконечная погоня

Internet Explorer

Internet Explorer

			<!--[if lt IE 9]>
			    <script src="html5.js"></script>
			<![endif]-->
		

Решение: p.ya.ru/media/html5.js

Что дальше?

• Спецификация: w3.org/TR/html5
• HTML5 Doctor: html5doctor.com
• Веб-стандарты: web-standards.ru

Вёрстка со смыслом

Вадим Макеев, Opera Software

• pepelsbey.net
• twitter.com/pepelsbey
• pepelsbey@opera.com

Презентация: pepelsbey.net/pres/sense-coding