mikemai2awesome/semantic-html.md

## semantic-html.md

      
    Raw
  

              semantic-html.md
            
          
    What

Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation.
Why


Clarity for search engines (improve search ranking)
Clarity for visitors (improve accessibility)
Default browser styles make for good fall-back when CSS isn't working (improve user experience)

Dos & Don'ts


table is for tabular content, NOT layout
blockquote is for calling out a block of quote, NOT indenting text
dl, ul, and ol are for creating lists, NOT indenting text
p is for a block of text, NOT line breaks
span is for inline text, AVOID redefining it to block
strong and em are for bold and italic, AVOID using b and i
h1 to h6 are for information architecture first and foremost, NOT just visual cues

Multiple h1s are acceptable ONLY if they are not on the same level of hierarchy, use header[role="banner"], header[role="heading"], and article to indicate information hierarchy clearly


article is for a single article on the page, NOT multiple articles
section is for grouping within an article, AVOID styling it
details and summary are for interactive content with open and collapsed states, open state shows full details, collapsed state shows summary
nav is for navigations such as menu and breadcrumb, ol and ul are optional inside a nav, only use lists when the navigation has multiple levels
q is for inline quote
abbr is for abbreviation
acronym is for acronym

Accessibility


Skip Links

Skip to main content
Skip to specific sections


Common Role Attributes

banner
heading
navigation
region
contentinfo
separator
complimentary
and more: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute


Common Aria Attributes

aria-hidden (true: not accessible; false: accessible; visibility controlled by CSS) vs hidden (hidden visually and not accessible)
aria-label vs title (useless, do not use)
and more: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA


And More: https://developer.mozilla.org/en-US/docs/Web/Accessibility

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Brand Name</title>
  </head>
  <body>
    <a href="#main-content">Skip to main content</a>
    <header role="banner">
      <nav role="navigation" aria-label="Main Menu">
        <h1>
          <img src="http://dummyimage.com/50x50/4d494d/686a82.gif&text=placeholder+image" alt="Logo">
          Brand Name
        </h1>
        <a href="">Nav Item</a>
        <a href="">Nav Item</a>
        <a href="">Nav Item</a>
        <a href="">Nav Item</a>
        <a href="">Nav Item</a>
      </nav>
    </header>
    <hr role="separator">
    <main id="main-content" tabindex="-1">
      <article>
        <header role="heading">
          <h1>
            Article Title
          </h1>
        </header>
        <section role="region">
          <header role="heading">
            <h2>
              Section Title
            </h2>
            <h3>
              Section Subtitle
            </h3>
          </header>
          <p>
            Paragraph <q>inline quote</q>
          </p>
          <blockquote>
            <p>
              Pullquote
            </p>
            <footer>
              Quote Footer (credits)
            </footer>
          </blockquote>
          <aside role="complementary">
            <p>
              Section Aside
            </p>
          </aside>
        </section>
        <section>
          <header role="heading">
            <h2>
              Another Section Title
            </h2>
          </header>
          <p>
            Paragraph
          </p>
          <pre>
            <code>
              Code Snippet
            </code>
          </pre>
        </section>
        <aside role="complementary">
          <figure>
            <img src="http://dummyimage.com/300x200/4d494d/686a82.gif&text=placeholder+image" alt="Figure">
            <figcaption>
              Article Aside
            </figcaption>
          </figure>
        </aside>
        <footer>
          Article Footer
        </footer>
      </article>
    </main>
    <hr role="separator">
    <footer role="contentinfo">
      <p>
        Site Footer
      </p>
      <form action="#" method="post">
        <fieldset>
          <legend>
            Group Title
          </legend>
          <label for="name">
            Name
            <input type="text" name="name" placeholder="Enter your name" id="name">
          </label>
          <label for="email">
            Email Address
            <input type="email" name="email" placeholder="Enter your email" id="email">
          </label>
        </fieldset>
        <fieldset>
          <legend>
            Another Group Title
          </legend>
          <label for="weekly">
            Send me weekly newsletter
            <input type="radio" name="frequency" value="weekly" id="weekly" checked>
          </label>
          <label for="monthly">
            Send me monthly newsletter
            <input type="radio" name="frequency" value="monthly" id="monthly">
          </label>
        </fieldset>
        <p>
          <button type="submit">
            Subscribe
          </button>
        </p>
      </form>
    </footer>
  </body>
</html>