HTML5 Features for Modern CSS UI

HTML5 Features & Modern Document Structure

What You'll Learn

HTML5 standardized semantic elements, richer forms, media embedding, and APIs that work hand-in-hand with CSS. This tutorial ties those features to practical styling and layout decisions.

Semantic sectioning: header, nav, main, article, section, aside, footer
Embedded media: video, audio, picture, responsive images
Forms: new input types and validation hooks that affect CSS state (:valid, :invalid)
How HTML5 structure improves SEO and accessibility when styled consistently

HTML5 is not just “new tags”—it is a document model that helps browsers, assistive tech, and search engines understand your page. CSS then expresses the visual hierarchy on top of that model.

Building a Semantic Page Outline

Theory: One <main> per page holds the primary content. <header> and <footer> can appear per section or site-wide. <nav> wraps major navigation blocks.

Example: Minimal skeleton

<body>
  <header class="site-header">...</header>
  <nav class="site-nav" aria-label="Primary">...</nav>
  <main id="content">
    <article>
      <h1>...</h1>
      <section>...</section>
    </article>
    <aside>...</aside>
  </main>
  <footer class="site-footer">...</footer>
</body>

Sample output (with CSS): A predictable landmark structure for screen readers, plus clear hooks for layout (grid/flex) without extra wrappers.

Video, Audio, and Picture

Theory: Native media elements reduce plugin reliance. CSS controls sizing, aspect ratio, and object fit; picture + source lets you serve art-directed images.

Example: Responsive video with aspect ratio

.video-wrap {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Sample output: Video fills a rounded 16:9 frame without black bars or layout shift—especially when combined with explicit width/height attributes in HTML.

Form Inputs and CSS States

Theory: Types like email, url, number, date enable better validation and mobile keyboards. Pseudo-classes :required, :optional, :valid, :invalid let you style feedback without JavaScript.

Example: Accessible input styling

input:required:invalid:not(:placeholder-shown) {
    border-color: #dc2626;
}

input:required:valid {
    border-color: #16a34a;
}

input:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

Sample output: Users see clear error/success borders after interaction, and keyboard users get a visible focus ring.

Rich Snippets & Structured Data (Overview)

Theory: article, time, and address elements carry meaning. Pair them with JSON-LD or microdata (in HTML) so search engines can show article dates, breadcrumbs, and FAQs—CSS keeps the human presentation readable.

Keep headings in order (h1 → h2 → h3) inside each landmark; it improves both accessibility and SEO signals.

Summary

HTML5 gives you a meaningful skeleton and modern media/forms. Use semantic tags first, then layer CSS Grid/Flex for layout, and validate states with pseudo-classes for polished UX. Continue with CSS Metadata & SEO for meta tags and social sharing.