Semantic for cynics

Vadim Makeev, HTML Academy

Semantic for cynics

Daria
© MTV
HTML Academy logo
Alexey, Olga and Vadim
Vadim on YouTube

youtube.com/pepelsbey

Semantics
is like monads.

Thank you

Closed red curtains.

HTML5

Uncle Owen and Luke Skywalker
© Lucasfilm
Pepelsbey.net blog
  1. Semantic coding, part 1
  2. Semantic coding, part 2
  3. Semantics-shmemantics, ay4
Daria
© MTV

It doesn’t
matter

Well, it does if you care. But you don’t have to.

What
matters?

UX

User Experience

Content?

Daria
© MTV
KharkivJS main page

We are…
divelopers

Empty nothing

VoiceOver message: /makeev.jpg, image VoiceOver message: link, UCYCPt7SWMZa4T8GwkQ-K-0A

Content

For search engines, reader modes, screen readers, new devices.

KharkivJS main page Empty VoiceOver heading menu Full VoiceOver heading menu
OdessaJS main page VoiceOver heading menu
watchOS form controls watchOS form controls
Designing Web Content for watchOS
Safari reader mode on watchOS Safari reader mode on watchOS Safari reader mode on watchOS Safari reader mode on watchOS Safari reader mode on watchOS
Designing Web Content for watchOS

Interface?

Daria
© MTV

Interface

For keyboard and screen reader users.

KharkivJS main page Empty VoiceOver landmarks menu Full VoiceOver landmarks menu

But apps…

Daria
© MTV

Document

            <body>
                <h1>Heading 1</h1>
                <p>The quick green frog</p>
                <h2>Heading 2</h2>
                <p>Jumps over the lazy dog</p>
            </body>

Web site

            <body>
                <header>Header</header>
                <nav>Navigation</nav>
                <main>Main content</main>
                <aside>Secondary content</aside>
                <footer>About</footer>
            </body>
Daria

Application

            <header>
                <h1>Telegram</h1>
                <a href="/contacts">Contacts</a>
                <a href="/chats">Chats</a>
                <a href="/options">Options</a>
            </header>
Daria

Application

            <nav>
                <h2>Chats</h2>
                <a href="/chat-1">
                    <img src="chat-1" alt="Chat 1">
                    <h3>Chat 1</h3>
                </a>
            </nav>
Daria

Application

            <main id="chat-1">
                <h2>Chat 1</h2>
                <p>Whassup?</p>
                <p>Whassup!</p>
            </main>
            <main id="chat-2" hidden>
            <main id="chat-3" hidden>
Daria
© MTV

Semantics is easy.
If you know why.
Now you know.

d’ ARIA

Daria
© MTV

Links

sokr.me/sfc/en

Thanks!