Семантика для циников

Вадим Макеев, HTML Academy

Семантика для циников

Daria
© MTV
Логотип HTML Academy
Лёша, Оля и Вадим записывают подкаст
Вадим в видеоблоге

youtube.com/pepelsbey

Семантика —
это как монады.

Спасибо

Закрытые красные театральные шторы.

HTML5

Дядя Оуэн и Люк Скайуокер
© Lucasfilm
Pepelsbey.net blog
Дарья
© MTV

Это совсем не важно

Ну или важно, но вам может быть всё равно.

А что важно?

UX

Удобно ли пользоваться сайтом.

Контент?

Дарья
© MTV
Главная страница KharkivJS

Мы с вами…
дивелоперы

Крис Койер

Пустота в пустоте

Сообщение VoiceOver: /makeev.jpg, image Сообщение VoiceOver: link, UCYCPt7SWMZa4T8GwkQ-K-0A

Контент

Для поисковиков, режимов чтения, скринридеров, новых устройств.

Главная страница KharkivJS Пустое меню заголовков VoiceOver Полное меню заголовков VoiceOver
Главная страница OdessaJS Меню заголовков VoiceOver
Контролы форм в watchOS Контролы форм в watchOS
Designing Web Content for watchOS
Режим чтения Safari в watchOS Режим чтения Safari в watchOS Режим чтения Safari в watchOS Режим чтения Safari в watchOS Режим чтения Safari в watchOS
Designing Web Content for watchOS

Интерфейс?

Дарья
© MTV

Интерфейс

Для пользователей клавиатур и скринридеров.

Главная страница KharkivJS Пустое меню ориентиров VoiceOver Полное меню ориентиров VoiceOver

Но апки…

Дарья
© MTV

Документ

            <body>
                <h1>Заголовок 1</h1>
                <p>Съешь ещё этих булок</p>
                <h2>Заголовок 2</h2>
                <p>Да выпей кавы</p>
            </body>

Сайт

            <body>
                <header>Шапка сайта</header>
                <nav>Навигация</nav>
                <main>Главный контент</main>
                <aside>Прочий контент</aside>
                <footer>О сайте</footer>
            </body>
Дарья
Полное меню ориентиров VoiceOver

Приложение

            <header>
                <h1>Телеграм</h1>
                <a href="/contacts">Контакты</a>
                <a href="/chats">Чаты</a>
                <a href="/options">Настройки</a>
            </header>
Дарья

Приложение

            <nav>
                <h2>Чаты</h2>
                <a href="/chat-1">
                    <img src="chat-1" alt="Чат 1">
                    <h3>Чат 1</h3>
                </a>
            </nav>
Дарья

Приложение

            <main id="chat-1">
                <h2>Чат 1</h2>
                <p>Как дела?</p>
                <p>Ну такое…</p>
            </main>
            <main id="chat-2" hidden>
            <main id="chat-3" hidden>
Дарья
© MTV

Разметка — это просто.
Если вы знаете зачем.
Теперь вы знаете.

d’ ARIA

Дарья
© MTV

Ссылки

sokr.me/sfc

Спасибо!