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

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

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

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

youtube.com/pepelsbey

Логотип семантики HTML5

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

Спасибо

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

HTML5

Дядя Оуэн и Люк Скайуокер

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

Важные вопросы

Дарья

Дарья

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

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

А что важно?

UX

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

Роли разметки

Контент?

Дарья

Главная страница KharkivJS

Главная страница KharkivJS

Пофиг и беда

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

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

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

Контент

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

Меню заголовков VoiceOver

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

OdessaJS

Главная страница OdessaJS Меню заголовков VoiceOver

Контролы форм в watchOS

Контролы форм в watchOS Контролы форм в watchOS

Режим чтения Safari в watchOS

Режим чтения Safari в watchOS Режим чтения Safari в watchOS Режим чтения Safari в watchOS Режим чтения Safari в watchOS Режим чтения Safari в watchOS

Интерфейс?

Дарья

Интерфейс

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

Меню ориентиров VoiceOver

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

Но апки…

Дарья

Документ

Документ

            <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

Полное меню ориентиров 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</h3a>
                </a>
            </nav>
        
Дарья

Приложение

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

Не бойтесь

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

d’ ARIA

Дарья

Ссылки

sokr.me/sfc

Спасибо!