HTML • Chapter 12 • Foundations to Production
Sections and Articles
Each topic contains substantial explanation, ten focused teaching examples, its own HTML code example, code reasoning, expected browser result, and practice.
12.1 section Element
section Element is part of the HTML structure covered in Chapter 12. HTML communicates meaning and document relationships to browsers, search engines, assistive technology, and other tools, so the choice of element or attribute should match the content rather than only its visual appearance.
For section Element, examine the element's permitted content, relevant attributes, semantic meaning, accessibility effect, and how it behaves when CSS or JavaScript is unavailable. In sections and articles, the markup should remain understandable as a document before presentation is added.
In Chapter 12, a reliable way to learn section Element is to write a small valid fragment, inspect the browser result and document outline, then test one incorrect or missing attribute. This makes the reason for each piece of markup visible instead of treating HTML as a collection of tags to memorize.
Concept in plain language
section Element is part of the HTML structure covered in Chapter 12. HTML communicates meaning and document relationships to browsers, search engines, assistive technology, and other tools, so the choice of element or attribute should match the content rather than only its visual appearance.
10 teaching examples
Example 1: Minimal markup
Create the smallest valid documentation page example that demonstrates section Element. Identify which part carries meaning and which parts are only supporting structure. This is Chapter 12, topic 1, example 1.
Example 2: Content variation
Change the text or resource used by section Element in the event page. Confirm that the markup still describes the new content correctly instead of depending on the old wording. This is Chapter 12, topic 1, example 2.
Example 3: Missing-information test
Remove one important attribute or related element from the FAQ page example using section Element. Explain what meaning, accessibility, navigation, or browser behavior is lost. This is Chapter 12, topic 1, example 3.
Example 4: Accessibility review
Read the photo story example using the semantics of section Element. Check names, labels, landmarks, alternatives, focus behavior, and whether the content still makes sense without styling. This is Chapter 12, topic 1, example 4.
Example 5: Mobile review
Open the support page markup containing section Element on a narrow screen. Ensure embedded content, long text, controls, and translated labels do not force the page wider than the viewport. This is Chapter 12, topic 1, example 5.
Example 6: RTL review
Translate the dashboard shell into Arabic or Persian. Keep document text RTL where appropriate while URLs, code samples, numbers, and intentionally LTR fragments remain readable. This is Chapter 12, topic 1, example 6.
Example 7: Validation exercise
Run the language page fragment using section Element through an HTML validator. Fix invalid nesting, duplicate IDs, missing required attributes, or obsolete markup before adding extra features. This is Chapter 12, topic 1, example 7.
Example 8: Progressive-enhancement check
Use section Element in the booking page so the core content remains useful before CSS and JavaScript load. Add enhancement only after the document structure is complete. This is Chapter 12, topic 1, example 8.
Example 9: SEO and semantics review
Inspect how section Element contributes to the meaning of the media page. Keep headings, links, metadata, and document regions consistent so crawlers and users receive the same primary content. This is Chapter 12, topic 1, example 9.
Example 10: Production review
Review section Element in the school page for validity, accessibility, security-related attributes, performance hints, responsive behavior, localization, and maintainability. This is Chapter 12, topic 1, example 10.
HTML code example
<header><h1>Course Library</h1></header>
<nav aria-label="Primary"><a href="/">Home</a></nav>
<main><article><h2>HTML Lesson</h2><p>Lesson content.</p></article></main>
<footer><p>Course footer</p></footer>Step-by-step code explanation
- Identify the element or attribute responsible for section Element.
- Read the markup from the outer document structure inward and verify that each child is allowed in its parent context.
- Check the semantic meaning and any accessibility relationship such as labels, alternatives, headings, captions, or landmarks.
- Open the fragment in a browser and compare the rendered result with the source instead of assuming visual appearance proves validity.
- Validate the markup and test responsive, RTL, and no-JavaScript behavior where they apply.
Expected browser result: The browser displays or exposes the structure appropriate for section Element while preserving the semantic relationships expressed by the markup.
Practice exercise
Write a fresh HTML fragment for section Element in Chapter 12. Validate it, remove one important attribute or related element to observe the difference, then restore the correct markup. Test the result with keyboard navigation when interactive, on a narrow screen, and in Arabic or Persian when the content can be translated.
12.2 article Element
article Element is part of the HTML structure covered in Chapter 12. HTML communicates meaning and document relationships to browsers, search engines, assistive technology, and other tools, so the choice of element or attribute should match the content rather than only its visual appearance.
For article Element, examine the element's permitted content, relevant attributes, semantic meaning, accessibility effect, and how it behaves when CSS or JavaScript is unavailable. In sections and articles, the markup should remain understandable as a document before presentation is added.
In Chapter 12, a reliable way to learn article Element is to write a small valid fragment, inspect the browser result and document outline, then test one incorrect or missing attribute. This makes the reason for each piece of markup visible instead of treating HTML as a collection of tags to memorize.
Concept in plain language
article Element is part of the HTML structure covered in Chapter 12. HTML communicates meaning and document relationships to browsers, search engines, assistive technology, and other tools, so the choice of element or attribute should match the content rather than only its visual appearance.
10 teaching examples
Example 1: Minimal markup
Create the smallest valid FAQ page example that demonstrates article Element. Identify which part carries meaning and which parts are only supporting structure. This is Chapter 12, topic 2, example 1.
Example 2: Content variation
Change the text or resource used by article Element in the photo story. Confirm that the markup still describes the new content correctly instead of depending on the old wording. This is Chapter 12, topic 2, example 2.
Example 3: Missing-information test
Remove one important attribute or related element from the support page example using article Element. Explain what meaning, accessibility, navigation, or browser behavior is lost. This is Chapter 12, topic 2, example 3.
Example 4: Accessibility review
Read the dashboard shell example using the semantics of article Element. Check names, labels, landmarks, alternatives, focus behavior, and whether the content still makes sense without styling. This is Chapter 12, topic 2, example 4.
Example 5: Mobile review
Open the language page markup containing article Element on a narrow screen. Ensure embedded content, long text, controls, and translated labels do not force the page wider than the viewport. This is Chapter 12, topic 2, example 5.
Example 6: RTL review
Translate the booking page into Arabic or Persian. Keep document text RTL where appropriate while URLs, code samples, numbers, and intentionally LTR fragments remain readable. This is Chapter 12, topic 2, example 6.
Example 7: Validation exercise
Run the media page fragment using article Element through an HTML validator. Fix invalid nesting, duplicate IDs, missing required attributes, or obsolete markup before adding extra features. This is Chapter 12, topic 2, example 7.
Example 8: Progressive-enhancement check
Use article Element in the school page so the core content remains useful before CSS and JavaScript load. Add enhancement only after the document structure is complete. This is Chapter 12, topic 2, example 8.
Example 9: SEO and semantics review
Inspect how article Element contributes to the meaning of the course lesson. Keep headings, links, metadata, and document regions consistent so crawlers and users receive the same primary content. This is Chapter 12, topic 2, example 9.
Example 10: Production review
Review article Element in the news article for validity, accessibility, security-related attributes, performance hints, responsive behavior, localization, and maintainability. This is Chapter 12, topic 2, example 10.
HTML code example
<header><h1>Course Library</h1></header>
<nav aria-label="Primary"><a href="/">Home</a></nav>
<main><article><h2>HTML Lesson</h2><p>Lesson content.</p></article></main>
<footer><p>Course footer</p></footer>Step-by-step code explanation
- Identify the element or attribute responsible for article Element.
- Read the markup from the outer document structure inward and verify that each child is allowed in its parent context.
- Check the semantic meaning and any accessibility relationship such as labels, alternatives, headings, captions, or landmarks.
- Open the fragment in a browser and compare the rendered result with the source instead of assuming visual appearance proves validity.
- Validate the markup and test responsive, RTL, and no-JavaScript behavior where they apply.
Expected browser result: The browser displays or exposes the structure appropriate for article Element while preserving the semantic relationships expressed by the markup.
Practice exercise
Write a fresh HTML fragment for article Element in Chapter 12. Validate it, remove one important attribute or related element to observe the difference, then restore the correct markup. Test the result with keyboard navigation when interactive, on a narrow screen, and in Arabic or Persian when the content can be translated.
12.3 aside Element
aside Element is part of the HTML structure covered in Chapter 12. HTML communicates meaning and document relationships to browsers, search engines, assistive technology, and other tools, so the choice of element or attribute should match the content rather than only its visual appearance.
For aside Element, examine the element's permitted content, relevant attributes, semantic meaning, accessibility effect, and how it behaves when CSS or JavaScript is unavailable. In sections and articles, the markup should remain understandable as a document before presentation is added.
In Chapter 12, a reliable way to learn aside Element is to write a small valid fragment, inspect the browser result and document outline, then test one incorrect or missing attribute. This makes the reason for each piece of markup visible instead of treating HTML as a collection of tags to memorize.
Concept in plain language
aside Element is part of the HTML structure covered in Chapter 12. HTML communicates meaning and document relationships to browsers, search engines, assistive technology, and other tools, so the choice of element or attribute should match the content rather than only its visual appearance.
10 teaching examples
Example 1: Minimal markup
Create the smallest valid support page example that demonstrates aside Element. Identify which part carries meaning and which parts are only supporting structure. This is Chapter 12, topic 3, example 1.
Example 2: Content variation
Change the text or resource used by aside Element in the dashboard shell. Confirm that the markup still describes the new content correctly instead of depending on the old wording. This is Chapter 12, topic 3, example 2.
Example 3: Missing-information test
Remove one important attribute or related element from the language page example using aside Element. Explain what meaning, accessibility, navigation, or browser behavior is lost. This is Chapter 12, topic 3, example 3.
Example 4: Accessibility review
Read the booking page example using the semantics of aside Element. Check names, labels, landmarks, alternatives, focus behavior, and whether the content still makes sense without styling. This is Chapter 12, topic 3, example 4.
Example 5: Mobile review
Open the media page markup containing aside Element on a narrow screen. Ensure embedded content, long text, controls, and translated labels do not force the page wider than the viewport. This is Chapter 12, topic 3, example 5.
Example 6: RTL review
Translate the school page into Arabic or Persian. Keep document text RTL where appropriate while URLs, code samples, numbers, and intentionally LTR fragments remain readable. This is Chapter 12, topic 3, example 6.
Example 7: Validation exercise
Run the course lesson fragment using aside Element through an HTML validator. Fix invalid nesting, duplicate IDs, missing required attributes, or obsolete markup before adding extra features. This is Chapter 12, topic 3, example 7.
Example 8: Progressive-enhancement check
Use aside Element in the news article so the core content remains useful before CSS and JavaScript load. Add enhancement only after the document structure is complete. This is Chapter 12, topic 3, example 8.
Example 9: SEO and semantics review
Inspect how aside Element contributes to the meaning of the contact page. Keep headings, links, metadata, and document regions consistent so crawlers and users receive the same primary content. This is Chapter 12, topic 3, example 9.
Example 10: Production review
Review aside Element in the product description for validity, accessibility, security-related attributes, performance hints, responsive behavior, localization, and maintainability. This is Chapter 12, topic 3, example 10.
HTML code example
<header><h1>Course Library</h1></header>
<nav aria-label="Primary"><a href="/">Home</a></nav>
<main><article><h2>HTML Lesson</h2><p>Lesson content.</p></article></main>
<footer><p>Course footer</p></footer>Step-by-step code explanation
- Identify the element or attribute responsible for aside Element.
- Read the markup from the outer document structure inward and verify that each child is allowed in its parent context.
- Check the semantic meaning and any accessibility relationship such as labels, alternatives, headings, captions, or landmarks.
- Open the fragment in a browser and compare the rendered result with the source instead of assuming visual appearance proves validity.
- Validate the markup and test responsive, RTL, and no-JavaScript behavior where they apply.
Expected browser result: The browser displays or exposes the structure appropriate for aside Element while preserving the semantic relationships expressed by the markup.
Practice exercise
Write a fresh HTML fragment for aside Element in Chapter 12. Validate it, remove one important attribute or related element to observe the difference, then restore the correct markup. Test the result with keyboard navigation when interactive, on a narrow screen, and in Arabic or Persian when the content can be translated.
12.4 Heading Sections
Heading Sections is part of the HTML structure covered in Chapter 12. HTML communicates meaning and document relationships to browsers, search engines, assistive technology, and other tools, so the choice of element or attribute should match the content rather than only its visual appearance.
For Heading Sections, examine the element's permitted content, relevant attributes, semantic meaning, accessibility effect, and how it behaves when CSS or JavaScript is unavailable. In sections and articles, the markup should remain understandable as a document before presentation is added.
In Chapter 12, a reliable way to learn Heading Sections is to write a small valid fragment, inspect the browser result and document outline, then test one incorrect or missing attribute. This makes the reason for each piece of markup visible instead of treating HTML as a collection of tags to memorize.
Concept in plain language
Heading Sections is part of the HTML structure covered in Chapter 12. HTML communicates meaning and document relationships to browsers, search engines, assistive technology, and other tools, so the choice of element or attribute should match the content rather than only its visual appearance.
10 teaching examples
Example 1: Minimal markup
Create the smallest valid language page example that demonstrates Heading Sections. Identify which part carries meaning and which parts are only supporting structure. This is Chapter 12, topic 4, example 1.
Example 2: Content variation
Change the text or resource used by Heading Sections in the booking page. Confirm that the markup still describes the new content correctly instead of depending on the old wording. This is Chapter 12, topic 4, example 2.
Example 3: Missing-information test
Remove one important attribute or related element from the media page example using Heading Sections. Explain what meaning, accessibility, navigation, or browser behavior is lost. This is Chapter 12, topic 4, example 3.
Example 4: Accessibility review
Read the school page example using the semantics of Heading Sections. Check names, labels, landmarks, alternatives, focus behavior, and whether the content still makes sense without styling. This is Chapter 12, topic 4, example 4.
Example 5: Mobile review
Open the course lesson markup containing Heading Sections on a narrow screen. Ensure embedded content, long text, controls, and translated labels do not force the page wider than the viewport. This is Chapter 12, topic 4, example 5.
Example 6: RTL review
Translate the news article into Arabic or Persian. Keep document text RTL where appropriate while URLs, code samples, numbers, and intentionally LTR fragments remain readable. This is Chapter 12, topic 4, example 6.
Example 7: Validation exercise
Run the contact page fragment using Heading Sections through an HTML validator. Fix invalid nesting, duplicate IDs, missing required attributes, or obsolete markup before adding extra features. This is Chapter 12, topic 4, example 7.
Example 8: Progressive-enhancement check
Use Heading Sections in the product description so the core content remains useful before CSS and JavaScript load. Add enhancement only after the document structure is complete. This is Chapter 12, topic 4, example 8.
Example 9: SEO and semantics review
Inspect how Heading Sections contributes to the meaning of the profile page. Keep headings, links, metadata, and document regions consistent so crawlers and users receive the same primary content. This is Chapter 12, topic 4, example 9.
Example 10: Production review
Review Heading Sections in the documentation page for validity, accessibility, security-related attributes, performance hints, responsive behavior, localization, and maintainability. This is Chapter 12, topic 4, example 10.
HTML code example
<main>
<h1>HTML Course</h1>
<section>
<h2>Forms</h2>
<h3>Text inputs</h3>
</section>
</main>Step-by-step code explanation
- Identify the element or attribute responsible for Heading Sections.
- Read the markup from the outer document structure inward and verify that each child is allowed in its parent context.
- Check the semantic meaning and any accessibility relationship such as labels, alternatives, headings, captions, or landmarks.
- Open the fragment in a browser and compare the rendered result with the source instead of assuming visual appearance proves validity.
- Validate the markup and test responsive, RTL, and no-JavaScript behavior where they apply.
Expected browser result: The browser displays or exposes the structure appropriate for Heading Sections while preserving the semantic relationships expressed by the markup.
Practice exercise
Write a fresh HTML fragment for Heading Sections in Chapter 12. Validate it, remove one important attribute or related element to observe the difference, then restore the correct markup. Test the result with keyboard navigation when interactive, on a narrow screen, and in Arabic or Persian when the content can be translated.
12.5 Choosing div or Semantic Elements
Choosing div or Semantic Elements is part of the HTML structure covered in Chapter 12. HTML communicates meaning and document relationships to browsers, search engines, assistive technology, and other tools, so the choice of element or attribute should match the content rather than only its visual appearance.
For Choosing div or Semantic Elements, examine the element's permitted content, relevant attributes, semantic meaning, accessibility effect, and how it behaves when CSS or JavaScript is unavailable. In sections and articles, the markup should remain understandable as a document before presentation is added.
In Chapter 12, a reliable way to learn Choosing div or Semantic Elements is to write a small valid fragment, inspect the browser result and document outline, then test one incorrect or missing attribute. This makes the reason for each piece of markup visible instead of treating HTML as a collection of tags to memorize.
Concept in plain language
Choosing div or Semantic Elements is part of the HTML structure covered in Chapter 12. HTML communicates meaning and document relationships to browsers, search engines, assistive technology, and other tools, so the choice of element or attribute should match the content rather than only its visual appearance.
10 teaching examples
Example 1: Minimal markup
Create the smallest valid media page example that demonstrates Choosing div or Semantic Elements. Identify which part carries meaning and which parts are only supporting structure. This is Chapter 12, topic 5, example 1.
Example 2: Content variation
Change the text or resource used by Choosing div or Semantic Elements in the school page. Confirm that the markup still describes the new content correctly instead of depending on the old wording. This is Chapter 12, topic 5, example 2.
Example 3: Missing-information test
Remove one important attribute or related element from the course lesson example using Choosing div or Semantic Elements. Explain what meaning, accessibility, navigation, or browser behavior is lost. This is Chapter 12, topic 5, example 3.
Example 4: Accessibility review
Read the news article example using the semantics of Choosing div or Semantic Elements. Check names, labels, landmarks, alternatives, focus behavior, and whether the content still makes sense without styling. This is Chapter 12, topic 5, example 4.
Example 5: Mobile review
Open the contact page markup containing Choosing div or Semantic Elements on a narrow screen. Ensure embedded content, long text, controls, and translated labels do not force the page wider than the viewport. This is Chapter 12, topic 5, example 5.
Example 6: RTL review
Translate the product description into Arabic or Persian. Keep document text RTL where appropriate while URLs, code samples, numbers, and intentionally LTR fragments remain readable. This is Chapter 12, topic 5, example 6.
Example 7: Validation exercise
Run the profile page fragment using Choosing div or Semantic Elements through an HTML validator. Fix invalid nesting, duplicate IDs, missing required attributes, or obsolete markup before adding extra features. This is Chapter 12, topic 5, example 7.
Example 8: Progressive-enhancement check
Use Choosing div or Semantic Elements in the documentation page so the core content remains useful before CSS and JavaScript load. Add enhancement only after the document structure is complete. This is Chapter 12, topic 5, example 8.
Example 9: SEO and semantics review
Inspect how Choosing div or Semantic Elements contributes to the meaning of the event page. Keep headings, links, metadata, and document regions consistent so crawlers and users receive the same primary content. This is Chapter 12, topic 5, example 9.
Example 10: Production review
Review Choosing div or Semantic Elements in the FAQ page for validity, accessibility, security-related attributes, performance hints, responsive behavior, localization, and maintainability. This is Chapter 12, topic 5, example 10.
HTML code example
<header><h1>Course Library</h1></header>
<nav aria-label="Primary"><a href="/">Home</a></nav>
<main><article><h2>HTML Lesson</h2><p>Lesson content.</p></article></main>
<footer><p>Course footer</p></footer>Step-by-step code explanation
- Identify the element or attribute responsible for Choosing div or Semantic Elements.
- Read the markup from the outer document structure inward and verify that each child is allowed in its parent context.
- Check the semantic meaning and any accessibility relationship such as labels, alternatives, headings, captions, or landmarks.
- Open the fragment in a browser and compare the rendered result with the source instead of assuming visual appearance proves validity.
- Validate the markup and test responsive, RTL, and no-JavaScript behavior where they apply.
Expected browser result: The browser displays or exposes the structure appropriate for Choosing div or Semantic Elements while preserving the semantic relationships expressed by the markup.
Practice exercise
Write a fresh HTML fragment for Choosing div or Semantic Elements in Chapter 12. Validate it, remove one important attribute or related element to observe the difference, then restore the correct markup. Test the result with keyboard navigation when interactive, on a narrow screen, and in Arabic or Persian when the content can be translated.
Chapter 12 review — 10 questions and answers
1. What should you check first when using section Element?
Answer: Check that the markup for section Element matches the meaning of the content, is valid in its context, and does not depend on visual styling to communicate essential information.
2. How do you review section Element before publishing?
Answer: Validate the HTML, inspect accessibility and keyboard behavior where relevant, test narrow screens and translated text, and confirm that section Element adds real document meaning or browser behavior.
3. What should you check first when using article Element?
Answer: Check that the markup for article Element matches the meaning of the content, is valid in its context, and does not depend on visual styling to communicate essential information.
4. How do you review article Element before publishing?
Answer: Validate the HTML, inspect accessibility and keyboard behavior where relevant, test narrow screens and translated text, and confirm that article Element adds real document meaning or browser behavior.
5. What should you check first when using aside Element?
Answer: Check that the markup for aside Element matches the meaning of the content, is valid in its context, and does not depend on visual styling to communicate essential information.
6. How do you review aside Element before publishing?
Answer: Validate the HTML, inspect accessibility and keyboard behavior where relevant, test narrow screens and translated text, and confirm that aside Element adds real document meaning or browser behavior.
7. What should you check first when using Heading Sections?
Answer: Check that the markup for Heading Sections matches the meaning of the content, is valid in its context, and does not depend on visual styling to communicate essential information.
8. How do you review Heading Sections before publishing?
Answer: Validate the HTML, inspect accessibility and keyboard behavior where relevant, test narrow screens and translated text, and confirm that Heading Sections adds real document meaning or browser behavior.
9. What should you check first when using Choosing div or Semantic Elements?
Answer: Check that the markup for Choosing div or Semantic Elements matches the meaning of the content, is valid in its context, and does not depend on visual styling to communicate essential information.
10. How do you review Choosing div or Semantic Elements before publishing?
Answer: Validate the HTML, inspect accessibility and keyboard behavior where relevant, test narrow screens and translated text, and confirm that Choosing div or Semantic Elements adds real document meaning or browser behavior.