Computer Science
Grade 12
20 min
HTML Tags and Structure
HTML Tags and Structure
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Analyze a non-semantic HTML document and refactor it using appropriate semantic tags like `<article>`, `<section>`, and `<aside>`.
Implement ARIA (Accessible Rich Internet Applications) roles and attributes to enhance the accessibility of non-standard interactive elements.
Integrate Schema.org microdata into an HTML structure to define entities for search engine optimization (SEO) and data parsing.
Utilize the `<template>` and `<slot>` elements to create reusable, inert blocks of HTML for dynamic rendering with JavaScript.
Critique a web page's structure for logical document flow, heading hierarchy, and accessibility compliance.
Leverage custom `data-*` attributes to store and retrieve state information directly within the...
2
Key Concepts & Vocabulary
TermDefinitionExample
Semantic HTMLThe practice of using HTML tags that accurately describe the meaning and purpose of the content they contain, rather than just defining its appearance. This provides context for browsers, search engines, and assistive technologies.Using `<nav>` for a set of navigation links instead of `<div class="navigation">`. The tag itself communicates its purpose.
ARIA (Accessible Rich Internet Applications)A set of attributes that can be added to HTML elements to improve their accessibility. ARIA helps define roles, states, and properties for custom UI components that aren't natively understood by assistive technologies.`<div role="tab" aria-selected="true">...</div>` tells a screen reader that this `div` i...
3
Core Syntax & Patterns
The Semantic Structure Pattern
`<body> <header>...</header> <nav>...</nav> <main> <article> <section>...</section> </article> </main> <aside>...</aside> <footer>...</footer> </body>`
Use this hierarchical pattern to structure a standard web page. `main` contains the unique content, `article` is a self-contained piece, `section` groups related content, and `header`, `footer`, `nav`, and `aside` have specific landmark roles.
The ARIA Augmentation Pattern
1. Identify a non-semantic interactive element (e.g., a `<div>` used as a button). 2. Assign a `role` (e.g., `role="button"`). 3. Add necessary state/property attributes (e.g., `aria-pressed="false"`). 4. Ens...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
You are creating an accessible, dynamic 'star rating' widget where a user can click a star to set a rating from 1 to 5. Which ARIA design pattern is most appropriate for the widget's container and the individual star elements?
A.Container: `role="slider"`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax`. Stars: `data-value`, `tabindex="-1"`.
B.Container: `data-rating-widget`. Stars: `class="star"`, `aria-label="Rate X stars"`.
C.Container: `role="toolbar"`. Stars: `role="button"`, `aria-pressed`, `tabindex="0"`, `data-value`.
D.Container: `role="radiogroup"`. Stars: `role="radio"`, `aria-checked`, `tabindex="0"`, `data-value`.
Challenging
An 'About Us' page has an `<h2>` for 'Our Team'. This section contains profiles for three executives, each with their name in an `<h3>` and bio in a `<p>`. What is the most advanced and semantically rich way to refactor the 'Our Team' section and its profiles?
A.Keep the structure as is, but add `role="group"` to the 'Our Team' section.
B.Change the 'Our Team' `<h2>` to a `<header>` and wrap each executive profile in a `<div>` with `itemscope` and `itemtype="https://schema.org/Person"`.
C.Wrap the 'Our Team' content in a `<section>`, wrap each executive profile in an `<article>`, and use Schema.org microdata (`Person`) within each article.
D.Replace all headings with `<div>`s and use ARIA `role="heading"` and `aria-level` attributes to manage the outline.
Challenging
In the context of Web Components or frameworks that utilize the Shadow DOM, what is the primary function of the `<slot>` element?
A.It acts as a placeholder inside a component's encapsulated template (Shadow DOM), which can be populated with markup provided by the consumer of the component (Light DOM).
B.It is a JavaScript function that dynamically inserts HTML content into a `<template>`.
C.It is an attribute that reserves a space in the layout for an element that will be loaded asynchronously.
D.It defines a variable within a `<template>` that can be replaced with data from a JSON object.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free