H M < >
CMM721

HTML5 & Semantic Structure

Session 2

James Williams

jwilliams@staff.newman.ac.uk

Learning Objectives

  • Master semantic HTML5 elements and their proper usage
  • Understand accessibility standards (WCAG) and best practices
  • Implement SEO optimization techniques in HTML
  • Use ARIA roles and attributes effectively
  • Validate HTML structure and ensure cross-browser compatibility

What is Semantic HTML?

Semantic HTML = Meaningful markup that describes content
  • Uses elements that clearly describe their purpose
  • Improves accessibility for screen readers
  • Enhances SEO by helping search engines understand content
  • Makes code more maintainable and readable
<!-- Non-semantic -->
<div class="header">...</div>
<!-- Semantic -->
<header>...</header>

HTML5 Semantic Elements

Document Structure

  • <header>: Introductory content or navigation
  • <nav>: Navigation links
  • <main>: Main content of the document
  • <section>: Thematic grouping of content
  • <article>: Self-contained, independent content
  • <aside>: Content tangentially related to main content
  • <footer>: Footer content or document information

HTML5 Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Application</title>
</head>
<body>
<header>
<h1>Site Title</h1>
<nav>...</nav>
</header>
<main>
<section>
<h2>Section Title</h2>
<article>...</article>
</section>
</main>
<footer>...</footer>
</body>
</html>

Accessibility Fundamentals

WCAG 2.1 Guidelines
  • Perceivable: Content must be presentable in different ways
  • Operable: Interface components must be operable
  • Understandable: Information and UI operation must be understandable
  • Robust: Content must be robust enough to work with assistive technologies

Key Practices:

  • Use semantic HTML elements
  • Provide alt text for images
  • Ensure proper heading hierarchy
  • Use sufficient color contrast

ARIA Roles and Attributes

Common ARIA Roles:

  • role="banner": Header content
  • role="navigation": Navigation links
  • role="main": Main content
  • role="contentinfo": Footer content

Important Attributes:

  • aria-label: Accessible name for elements
  • aria-labelledby: References another element's ID
  • aria-describedby: Additional description

SEO Optimization

On-Page SEO Elements:

  • Title Tag: Unique, descriptive page titles
  • Meta Description: Compelling summaries (150-160 characters)
  • Heading Structure: Proper H1-H6 hierarchy
  • Alt Text: Descriptive image descriptions
  • Internal Linking: Connect related content
<head>
<title>CMM721: Web Application Development | Newman University</title>
<meta name="description"
content="Learn full-stack web development with HTML5, CSS3, JavaScript,
Python, Django, and React at Birmingham Newman University.">
</head>

Task 1: Semantic HTML Creation

Objective:

Create a semantic HTML structure for a web application

Requirements:

  1. Create an HTML5 document with proper DOCTYPE
  2. Use semantic elements (header, nav, main, section, article, aside, footer)
  3. Include proper meta tags for SEO and accessibility
  4. Add ARIA labels where appropriate
  5. Validate your HTML using W3C validator

Deliverables:

  • Valid HTML5 document
  • Screenshot of validation results
  • Brief explanation of semantic choices

HTML Validation

Why Validate?

  • Ensures cross-browser compatibility
  • Improves accessibility
  • Helps with SEO
  • Catches syntax errors early

Validation Tools:

  • W3C Markup Validator: validator.w3.org
  • HTML5 Validator: html5.validator.nu
  • Browser DevTools: Console errors

Real-World Semantic HTML Examples

<header>
<h1>Tech Blog</h1>
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Building Modern Web Apps</h2>
<p>Learn full-stack development...</p>
</article>
</main>

Task 2: Accessibility Audit

Objective:

Evaluate a website for accessibility compliance

Steps:

  1. Choose a website to audit
  2. Check heading hierarchy (H1-H6)
  3. Verify alt text for all images
  4. Test with keyboard navigation only
  5. Use screen reader if available
  6. Check color contrast ratios

Tools to Use:

  • Browser accessibility inspector
  • axe-core browser extension
  • WAVE web accessibility evaluator

Semantic HTML Best Practices

General Guidelines:

  • Use semantic elements instead of divs when possible
  • Maintain proper heading hierarchy (don't skip levels)
  • Include lang attribute on html element
  • Use descriptive alt text for images
  • Provide labels for form elements

Performance Considerations:

  • Minimize DOM depth
  • Use semantic elements for better parsing
  • Include proper meta tags

Common Semantic HTML Mistakes

Avoid These:

  • Using divs for everything
  • Skipping heading levels (H1 → H3)
  • Missing alt text on images
  • Non-descriptive link text
  • Improper form labeling
Remember: Semantic HTML benefits users, developers, and search engines!

Next Session: CSS3 & Responsive Design

  • CSS3 fundamentals and box model
  • Flexbox and CSS Grid layouts
  • Media queries and responsive design
  • Mobile-first development approach
  • CSS frameworks and best practices

Prepare by reviewing CSS basics and thinking about responsive design principles.

Questions & Discussion

Contact: JWilliams@Staff.newman.ac.uk

Office Hours: Available for consultation

Thank you for your attention!