Examius

🌍 Frontend Web Development · subject

Frontend Web Development HTML & Document Structure Syllabus

Every chapter and topic of HTML & Document Structure examined in Frontend Web Development — 4 chapters, 19 topics, plus 51 flashcards written against it.

4Chapters
19Topics
0Sub-topics
~15hEst. first pass
13%Of Frontend Web Development
51Flashcards

HTML & Document Structure syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for HTML & Document Structure in Frontend Web Development, not a summary of it.

  1. HTML Fundamentals

     6 topics
    • Document Structure & DOCTYPE
    • Elements, Tags & Attributes
    • Headings, Paragraphs & Text Formatting
    • Links & Anchors
    • Images & the picture element
    • Lists & Tables

  2. Semantic HTML

     4 topics
    • Semantic Layout Elements
    • Figure, Figcaption & Time
    • Document Outline & Heading Hierarchy
    • SEO & Meta Tags

  3. Forms & User Input

     5 topics
    • Form & Fieldset Structure
    • Input Types & Attributes
    • Labels & Accessible Association
    • Select, Textarea & Buttons
    • Native Form Validation

  4. Multimedia & Embedded Content

     4 topics
    • Audio & Video Elements
    • Iframes & Embeds
    • Canvas & SVG Basics
    • Responsive Images & srcset

HTML & Document Structure flashcards for Frontend Web Development

20 of 51 cards from the HTML & Document Structure deck — real questions with worked answers.

  1. What is the purpose of the <!DOCTYPE html> declaration in an HTML document?

    It tells the browser to render the page in standards (no-quirks) mode using the current HTML5 specification. It must be the very first line, before the <html> element, and is not an HTML tag itself.

  2. What are the three essential structural elements every HTML5 document must contain, in order?

    <html> (the root element), <head> (metadata), and <body> (visible content). The <html> element wraps the whole document and should carry a lang attribute.

  3. What is the difference between an HTML element and a tag?

    A tag is the markup token in angle brackets (e.g., <p> or </p>); an element is the complete unit consisting of the start tag, content, and end tag. Void elements (like <img>) are elements with no closing tag or content.

  4. What is the syntax of an HTML attribute, and where does it appear?

    An attribute is written as name="value" inside the element's start tag, e.g., <a href="page.html">. Attribute names are case-insensitive; boolean attributes (like disabled) need no value.

  5. Which meta tag makes a page responsive on mobile devices, and what is its typical value?

    <meta name="viewport" content="width=device-width, initial-scale=1.0">. It sets the layout viewport width to the device width and the initial zoom to 1.

  6. What does the charset meta tag do and what value is recommended?

    <meta charset="UTF-8"> declares the document's character encoding. UTF-8 is recommended because it covers virtually all characters. It should appear within the first 1024 bytes of the head.

  7. How many heading levels does HTML provide, and what do they represent?

    Six: <h1> through <h6>. <h1> is the highest (most important) rank and <h6> the lowest. They convey document structure and hierarchy, not merely font size.

  8. What is the semantic difference between <strong>/<em> and <b>/<i>?

    <strong> denotes strong importance and <em> denotes stressed emphasis (semantic meaning). <b> and <i> only apply bold/italic styling with no added importance or emphasis.

  9. Which element defines a paragraph, and can it legally contain a <div>?

    <p> defines a paragraph. No: a <p> cannot contain block-level flow content like <div>; the browser will auto-close the paragraph. It may only contain phrasing (inline) content.

  10. What is the required attribute of an anchor (<a>) element that turns it into a hyperlink?

    The href attribute, which specifies the destination URL. Without href, <a> is a placeholder link (not a hyperlink) but can still be a link target via its content.

  11. How do you make a link open in a new browser tab, and what security attribute should accompany it?

    Use target="_blank". Add rel="noopener noreferrer" to prevent the new page from accessing window.opener and to withhold the referrer, mitigating reverse-tabnabbing.

  12. How do you create a link to a specific section within the same page (a fragment/anchor link)?

    Give the target element an id, then link with href="#the-id", e.g., <a href="#section2">. Using href="#top" or href="#" jumps to the top of the page.

  13. What are the two required attributes for an accessible <img> element?

    src (the image source URL) and alt (alternative text describing the image for screen readers and when the image fails to load). Decorative images should use an empty alt="".

  14. What is the purpose of the <picture> element and its <source> children?

    <picture> provides art direction and format/resolution switching: multiple <source> elements offer candidates with media or type conditions, and a fallback <img> is required. The browser picks the first matching <source>.

  15. What do the srcset and sizes attributes on <img> do?

    srcset lists candidate image files with width (w) or density (x) descriptors; sizes tells the browser the image's rendered width at various breakpoints so it can choose the best srcset candidate before layout.

  16. What is the difference between an ordered list, an unordered list, and a description list in HTML?

    <ol> is a numbered/ordered list, <ul> is a bulleted/unordered list (both contain <li> items). <dl> is a description list containing <dt> (term) and <dd> (description) pairs.

  17. In an HTML table, what are the roles of <thead>, <tbody>, and <tfoot>?

    They group table row sections: <thead> for header rows, <tbody> for the main data rows, and <tfoot> for footer/summary rows. This aids semantics, styling, and scrolling behavior.

  18. What is the difference between the <th> and <td> elements, and what does the scope attribute add?

    <th> is a header cell (bold, centered by default) and <td> is a standard data cell. scope="col" or scope="row" on <th> tells assistive tech which cells the header describes.

  19. What do the colspan and rowspan attributes do in a table cell?

    colspan makes a cell span multiple columns horizontally; rowspan makes it span multiple rows vertically. Both take an integer count, e.g., colspan="2".

  20. Name four HTML5 semantic layout elements and their intended roles.

    <header> (introductory/banner content), <nav> (navigation links), <main> (the document's primary unique content, one per page), and <footer> (footer info). Also <aside>, <section>, and <article>.

See more HTML & Document Structure flashcards →

Planning HTML & Document Structure for Frontend Web Development

HTML & Document Structure is about 13% of the Frontend Web Development syllabus by topic count — 19 of 142 topics, spread over 4 chapters. At roughly 45 minutes per topic plus 12 minutes per sub-topic, a first pass runs to about 15 hours.

The heaviest chapters are HTML Fundamentals (6 topics), Forms & User Input (5 topics), Semantic HTML (4 topics) . Front-load those while your energy is high; the short chapters are better revision filler later.

Work top-down: read the chapter, then tick topics off individually rather than marking the whole chapter done. Sub-topics are where silent gaps hide.

HTML & Document Structure (Frontend Web Development) FAQ

What is in the Frontend Web Development HTML & Document Structure syllabus?

HTML & Document Structure is split into 4 chapters — HTML Fundamentals, Semantic HTML, Forms & User Input and Multimedia & Embedded Content, containing 19 topics and 0 sub-topics in total.

How many chapters are there in HTML & Document Structure for Frontend Web Development?

4 chapters. HTML & Document Structure accounts for about 13% of the topics in the whole Frontend Web Development syllabus (19 of 142).

How long should I spend on HTML & Document Structure for Frontend Web Development?

Budget around 15 hours for a first pass through HTML & Document Structure — about 45 minutes per topic plus 12 minutes per sub-topic across its 19 topics. Add revision cycles on top.

Are there flashcards for Frontend Web Development HTML & Document Structure?

Yes — a 51-card HTML & Document Structure deck. Sample cards are printed on this page, and the full deck is free in the Examius app with spaced repetition scheduling.