Semantic HTML – Real world document: publication – World Wide Web

View Github Repository Open presentation in a new window

dpashkevich

See all presentation from dpashkevich

Semantic HTML – Real world document: publication – World Wide Web

0 1

pres-semantichtml

A presentation on semantic HTML that advocates for a more thoughtful approach to architecting Web content and explains the benefits of it.

On Github dpashkevich / pres-semantichtml

Semantic HTML

By Dmitry Pashkevich

Goals

  • Thoughtful approach to composing HTML
  • Treat HTML pages as documents
  • Better overall front end code

Real world document: publication

Has structure!

  • Front page
  • Table of contents
  • Introduction
  • Chapters
  • Conclusion
  • References

Other elements

  • Header & footer
  • Footnotes
  • Asides
  • Definitions
  • Tables
  • Formulas
  • ...

World Wide Web

Made up of documents

Plenty of elements

Deep nesting

High dynamicity

Many representations

Still documents

Lots of them!

Hypertext

Fundamental concept behind WWW This is important to keep in mind when making Web documents

The Idea

Plenty of texts with links between them

Extend, connect, share

The language?

HyperText Markup Language

The Web Triforce

HTML documents

Composed of elements

<html> <!-- ROOT ELEMENT -->
    <head>
        <!--  METADATA: title, author, description, etc. -->
    </head>

    <body>
        <!--  PAYLOAD CONTENT -->
    </body>
</html>

Many overlook that html is actually a full element, just like others

The head element can contain lots of useful information about the document (metadata), this is akin to a front page of a publication.

Element order

MATTERS!

  • Search engines
  • Mobile browsing
  • Keyboard navigation
  • Find in page

Element order

Element order

Element order

Links

Essence of the World Wide Web

Links are what makes hypertext hypertext

link - isn't just a tag you use to include CSS. It's a LINK to an external resource!

1. Hyperlinks

<a href="/cats.html">Please don't break my href!</a>

2. Links to external resources

<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/touch-icon.png">
<link rel="stylesheet" href="/styles/main.css">
… used to augment the current document, generally automatically processed by the user agent.

Other uses of link

Author

Site search

News feed

Also...

  • Alternate language
  • Previous/next page
  • License
  • PDF version

See the spec for more

Don't reinvent the bicycle, the spec already defines a lot of useful cases. Feel free to experiment though.

HTML5

  • Simplified syntax
  • New elements and attributes
  • New API
  • Precisely defined parsing rules,including error behavior

New elements

  • section, article, aside, nav
  • header, footer
  • figure, figcaption
  • time, meter, progress, mark
  • audio, video, canvas

Full list

Not enough elements?

Not enough elements?

Are you sure?

Not enough elements?

Are you sure?

Use the class attribute

Sections

Each section is like a mini-document

New input types

search, email, url, tel,number, range, colordate, month, week, time, datetime, datetime-local

See examples

Input: not just text!

<input type="file" accept="image/*;capture=camera">
        <!-- also: camcorder, microphone -->
Demo

Benefits of semantic markup

Better read by programs

  • Screen readers
  • Search engines
  • Sharing tools
  • Content clippers
  • News grabbers
  • ...

Easier to change presentation

Reusability across projects

<section class="carousel">
    <h1>Featured Content</h1>

    <article class="slide">
        <h2>Slide Title</h2>
        <div class="slide-content"> ... </div>
    </article>

    <article class="slide">
        <h2>Slide Title</h2>
        <div class="slide-content"> ... </div>
    </article>
</section>
More great patterns from Anthony Ticknor Extract common patterns and reuse them! Also improves developer productivity * Minimal effort repetition * Better integration with external services * Eventually better user experience

Improves your JS too

Demo: css-tricks.com

Mobile view

Mobile view (with navigation)

Print

Evernote Clipped Article

Search result snippet (article)

Search result snippet (home)

Google Plus Share

Takeaways

Be responsible about IA*

Your HTML = your IA

Hyperlinks are important!

Don't break their functionality!

Experiment, make mistakes

Follow the standards

Stuff gets obsolete

Let's talk!

http://dpashk.com

dpashk@gmail.com

Attributions