You are on page 1of 52

Семантическая вёрстка

UA Web 2008

Вадим Макеев

0

Семантическая вёрстка
Современный взгляд на организацию кода
Вступление

1

Семантическая вёрстка
Современный взгляд на организацию кода
Вступление

1. Не гербалайф

1

Семантическая вёрстка
Современный взгляд на организацию кода
Вступление

1. Не гербалайф

2. Потребует бóльших умственных усилий

1

Семантическая вёрстка
Современный взгляд на организацию кода
Вступление

1. Не гербалайф

2. Потребует бóльших умственных усилий

3. В чём же смысл?

1

Совокупность смысловых отношений. возникающих в документе 2 .Семантика? Семантика (фр. σημαντικός — обозначающий) Определение 1. sémantique от греч.

благодаря внедрению в простой текст HTML-разметки 2 .Семантика? Семантика (фр. Рождение дополнительных смысловых уровней. sémantique от греч. возникающих в документе 2. σημαντικός — обозначающий) Определение 1. Совокупность смысловых отношений.

Сайт — это совокупность страниц 3 . страница. документ Определение 1.Семантика? Сайт.

2. что увидел пользователь. Сайт — это совокупность страниц. Страница — это то. после применения к документу стилей и JavaScript 3 . страница.Семантика? Сайт. документ Определение 1.

Документ — это то. Сайт — это совокупность страниц 2. Страница — это то. страница. что увидел пользователь.Семантика? Сайт. поисковик или пользователь. документ пределение 1. что получает браузер. у которого отключены или не подгрузились стили 3 . после применения к документу стилей и JavaScript 3.

Семантика? Смысловые связи Пример Семантика — совокупность смысловых отношений. 4 .

<dl> <dt>Семантика</dt> <dd>совокупность смысловых отношений.</dd> </dl> 4 .Семантика? Смысловые связи Пример Семантика — совокупность смысловых отношений.

Семантика? Смысловые связи Пример Семантика — совокупность смысловых отношений. <dl> <dt>Семантика</dt> <dd>совокупность смысловых отношений.</dd> </dl> 4 .

................</dt> <dd>..........</dd> </dl> 4 .......Семантика? Смысловые связи Пример Семантика — совокупность смысловых отношений........ <dl> <dt>...

Уровни семантики Не только «таблицы и фонты» Три уровня 1. Применение HTML-элементов 5 .

Уровни семантики Не только «таблицы и фонты» Три уровня 1. Именование элементов 5 . Применение HTML-элементов 2.

Комбинация именованных элементов 5 . Применение HTML-элементов 2. Именование элементов 3.Уровни семантики Не только «таблицы и фонты» Три уровня 1.

Уровни семантики Не только «таблицы и фонты» Три уровня — пример Алексей Рыбаков — alex@flack.ru 6 .

<h3>Алексей Рыбаков</h3> <address>alex@flack.Уровни семантики Не только «таблицы и фонты» Три уровня — пример Алексей Рыбаков — alex@flack.ru</address> 6 .ru 1.

<h3>Алексей Рыбаков</h3> <address>alex@flack.ru 1. <h3 class="name">Алексей Рыбаков</h3> <address class="email">alex@flack.ru</address> 6 .Уровни семантики Не только «таблицы и фонты» Три уровня — пример Алексей Рыбаков — alex@flack.ru</address> 2.

ru</address> </div> 6 .Уровни семантики Не только «таблицы и фонты» Три уровня — пример 3. <div class="vcard"> <h3 class="fn n"> <span class="given-name">Алексей</span> <span class="family-name">Рыбаков</span> </h3> <address class="email">alex@flack.

--> <!ELEMENT (%heading. %events -- > 7 .) %attrs.%coreattrs. %i18n.(%inline..heading --> <!ATTLIST (%heading.) .)* -. -.Применение HTML-элементов Первый уровень семантики Document Type Definition <!ENTITY % heading "H1|H2|H3|H4|H5|H6"> <!-- There are six levels of headings from H1 (the most important) to H6 (the least important).

(%inline. %events -- > 7 .Применение HTML-элементов Первый уровень семантики Document Type Definition <!ENTITY % heading "H1|H2|H3|H4|H5|H6"> <!-- There are six levels of headings from H1 (the most important) to H6 (the least important). %i18n. -.)* -..%coreattrs. --> <!ELEMENT (%heading.) %attrs.) .heading --> <!ATTLIST (%heading.

. ну.. то есть дивно. <div id="menu"> <a href="#">Колбаса</a> <br/> <a href="#">Макароны</a> <br/> <a href="#">Тушёнка</a> <br/> <a href="#">Гречка</a> </div> 8 .Применение HTML-элементов Первый уровень семантики Бестаблично.

1. Корневой группирующий элемент 9 .Применение HTML-элементов Первый уровень семантики Включаем мозг.

Корневой группирующий элемент 2. Неупорядоченный список продуктов 9 .. 1.Применение HTML-элементов Первый уровень семантики Включаем мозг.

Корневой группирующий элемент 2.. Элемент визуального форматирования — <br/> 9 .. 1.Применение HTML-элементов Первый уровень семантики Включаем мозг. Неупорядоченный список продуктов 3.

Применение HTML-элементов Первый уровень семантики Семантически верно <ul id="menu"> <li><a href="#">Колбаса</a></li> <li><a href="#">Макароны</a></li> <li><a href="#">Тушёнка</a></li> <li><a href="#">Гречка</a></li> </ul> 10 .

Применение HTML-элементов Первый уровень семантики Не к ночи помянутый JavaScript <h3>Размер шрифта</h3> <ul id="font-size"> <li><a href="#" onclick="return fz(-1)">Маленький</a></li> <li><a href="#" onclick="return fz(0)">Нормальный</a></li> <li><a href="#" onclick="return fz(1)">Большой</a></li> </ul> 11 .

Гиперссылка. которая никуда не ведёт 12 .Применение HTML-элементов Первый уровень семантики Включаем мозг. 1.

1. без JS невозможная 12 . которая никуда не ведёт 2. Функциональность.Применение HTML-элементов Первый уровень семантики Включаем мозг.. Гиперссылка.

без JS невозможная 3. которая никуда не ведёт 2.. Гиперссылка.. Функциональность. Всё ради cursor:pointer? 12 . 1.Применение HTML-элементов Первый уровень семантики Включаем мозг.

Динамические JS-обработчики 2. #font-size LI { cursor:pointer.Применение HTML-элементов Первый уровень семантики Не к ночи помянутый JavaScript <h3>Размер шрифта</h3> <ul id="font-size"> <li>Маленький</li> <li>Нормальный</li> <li>Большой</li> </ul> 1. } 13 .

class — следующий смысловой уровень 14 .Именование элементов Второй уровень семантики Содержимое — в имени 1. ID — уникальный структурный блок.

ID — уникальный структурный блок.Именование элементов Второй уровень семантики Содержимое — в имени 1. class — следующий смысловой уровень <ul id="footer"> <li class="copy">pepelsbey © 2007</li> <li class="rss">RSS</li> </ul> 14 .

поэтому логично повторное использование имени в других контекстах 15 . Имя класса звучит в контексте ID.Именование элементов Второй уровень семантики Содержимое — в имени 2.

Имя класса звучит в контексте ID.Именование элементов Второй уровень семантики Содержимое — в имени 2. поэтому логично повторное использование имени в других контекстах <div id="header"> <a href="#" class="rss">RSS</a> </div> <div id="footer"> <a href="#" class="rss">RSS</a> </div> 15 .

Именование элементов Второй уровень семантики Содержимое — в имени 3. Имя элемента характеризует его функциональность или содержимое 16 .

Имя элемента характеризует его функциональность или содержимое <ol id="comments"> <li>Первый</li> <li>Второй</li> </ol> 16 .Именование элементов Второй уровень семантики одержимое — в имени 3.

Микроформаты (μf) 17 .Комбинация именованных элементов Третий уровень семантики Глубинные залежи смысла 1.

Комбинация именованных элементов Третий уровень семантики Глубинные залежи смысла 1. Микроформаты (μf) 2. Идейный вдохновитель — Тантек Челик (Tantek Çelik) http://microformats.org 17 .

Комбинация именованных элементов Третий уровень семантики Глубинные залежи смысла 1.org 3. Микроформаты (μf) 2. Всё более широкое внедрение 17 . Идейный вдохновитель — Тантек Челик (Tantek Çelik) http://microformats.

padding…' /> </a> <a href='#'> <b>kuteev</b> </a> </span> 18 .Комбинация именованных элементов Третий уровень семантики Старый головастик <span class='ljuser' lj:user='kuteev' style='white-space…'> <a href='#'> <img src='#' alt='[info]' width='17' height='17' style='vertical-align: bottom. border: 0.

отключили у него рамку. — полужирный 19 . Юзернейм не переносится 2. оказывается. Кутеев. отступ и задали размеры 3.Комбинация именованных элементов Третий уровень семантики Старый головастик — что нового? 1. Головастика выровняли по вертикали.

Комбинация именованных элементов Третий уровень семантики Новый головастик <span class="ljuser vcard"> <a class="ico" href="#" target="_blank" title="Профиль"> <img src="#" alt="" /></a> <a class="fn nickname url" href="#" target="_blank" title="Журнал"> kuteev </a> </span> 20 .

Никнейм Кутеева — kuteev 4. а точнее — в журнал 5. Мы имеем дело с мини-визиткой Кутеева 2. Ссылка с никнейма ведёт на сайт Кутеева. Ссылка с головастика ведёт в профиль 3.Комбинация именованных элементов Третий уровень семантики Новый головастик — что нового? 1. Пара нажатий — и Кутеев добавлен в мою адресную книгу 21 .

Комбинация именованных элементов Третий уровень семантики Географически <div class="contacts vcard"> <h1 class="fn org">Яндекс</h1> <dl> <dt>Адрес:</dt> <dd class="adr"> … </dd> <dl> <div id="map" class="geo"> … </div> </div> 22 .

Комбинация именованных элементов Третий уровень семантики Географически 1. дом 1</span> 2.6786">W 37° 67. <span class="street-address">ул.7582">N 55° 75.82</abbr> <abbr class="longitude" title="37. Самокатная.86</abbr> 23 . Координаты (geo) <abbr class="latitude" title="55. <span class="locality">Москва</span>. Адрес (adr) <span class="postal-code">111033</span>.

Также нам известно географическое положение организации (которое в дальнейшем может быть загружено в GPS-навигатор и использовано для нахождения кратчайшей дороги) 4. Мы имеем дело с визиткой организации и называется она «Яндекс» 2. Пара нажатий — и «Яндекс» добавлен в мою адресную книгу 24 . У нас есть её структурно размеченный адрес 3.Комбинация именованных элементов Третий уровень семантики Географически — что нового? 1.

Новые смысловые уровни документа. Использование языка в соответствии с его предназначением. Самодокументируемый код 4.Семантика! Почему это важно Заключение 1. удобная работа с ними 25 . концепция POSH (Plain Old Semantic HTML) 3. Повышение доступности сайта для альтернативных устройств просмотра 2.

com «Semantics in HTML». Тантек Челик (Tantek Çelik) — http://tantek. «Built in Semantics in HTML» 2. «The Importance of Being POSH» 3.Семантика! Обязательно к прочтению Заключение 1.com/blog «Who will read your Semantic HTML?» 26 . Jesse Skinner — http://thefutureoftheweb. Джон Оллсоп (John Allsopp) — http://microformatique.com «A Touch of Class».

net 27 .Семантическая вёрстка UA Web 2008 Спасибо! Вадим Макеев — http://pepelsbey.