🌍 Front-end Web Development · subject

Front-end Web Development HTML Syllabus

Every chapter and topic of HTML examined in Front-end Web Development — 2 chapters, 6 topics, plus 51 flashcards written against it.

2Chapters
6Topics
0Sub-topics
~5hEst. first pass
9%Of Front-end Web Development
51Flashcards

HTML syllabus — full chapter and topic list

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

  1. Basics

    3 topics
    • HTML Syntax
    • HTML Elements
    • HTML Attributes
  2. Advanced

    3 topics
    • Forms and Input
    • Semantic HTML
    • HTML5 APIs

HTML flashcards for Front-end Web Development

18 of 51 cards from the HTML deck — real questions with worked answers.

  1. What is the standard DOCTYPE declaration for an HTML5 document, and what is its purpose?

    `<!DOCTYPE html>`. It must be the first line of the document and tells the browser to render the page in standards mode (rather than quirks mode).

  2. What is the basic skeletal structure of a valid HTML5 document?

    `<!DOCTYPE html>` followed by `<html>` containing a `<head>` (metadata) and a `<body>` (visible content). Example: `<!DOCTYPE html><html><head><title>...</title></head><body>...</body></html>`.

  3. In HTML syntax, what are the three main parts of a typical element?

    An opening tag (e.g. `<p>`), the content, and a closing tag (e.g. `</p>`). Together: `<p>content</p>`.

  4. What is a void (empty) element in HTML? Give three examples.

    A void element has no content and no closing tag — only a start tag. Examples: `<br>`, `<img>`, `<input>`, `<hr>`, `<meta>`, `<link>`.

  5. How do you write a comment in HTML?

    `<!-- this is a comment -->`. Browsers do not render comment content.

  6. What is the correct way to nest HTML elements, and what is improper nesting?

    Elements must be properly nested — closed in the reverse order they were opened. Correct: `<p><strong>text</strong></p>`. Improper (overlapping): `<p><strong>text</p></strong>`.

  7. Are HTML tag names case-sensitive? What is the recommended convention?

    HTML tag names are not case-sensitive (`<P>` equals `<p>`), but the convention is to write them in lowercase.

  8. How do you specify the character encoding of an HTML5 document, and which encoding is recommended?

    With a meta tag in the head: `<meta charset="UTF-8">`. UTF-8 is the recommended/standard encoding.

  9. What is an HTML entity? Give the entities for <, >, &, and a non-breaking space.

    An entity is an escape code for a reserved or special character. `&lt;` = <, `&gt;` = >, `&amp;` = &, `&nbsp;` = non-breaking space.

  10. What is the difference between block-level and inline elements?

    Block-level elements start on a new line and take the full available width (e.g. `<div>`, `<p>`, `<h1>`). Inline elements stay within the text flow and take only as much width as their content (e.g. `<span>`, `<a>`, `<strong>`).

  11. What are the six heading elements in HTML, and what determines their importance?

    `<h1>` through `<h6>`. `<h1>` is the most important/highest level and `<h6>` the least. There should typically be one `<h1>` per page representing the main heading.

  12. Which element creates a hyperlink, and which attribute specifies its destination?

    The anchor element `<a>`, using the `href` attribute. Example: `<a href="https://example.com">Link</a>`.

  13. What is the difference between ordered and unordered lists, and which elements create them?

    An unordered list `<ul>` shows bullet points; an ordered list `<ol>` shows numbers/sequence. Both contain list items `<li>`.

  14. How do you create a description (definition) list in HTML?

    Use `<dl>` (the list), `<dt>` (the term), and `<dd>` (the description). Example: `<dl><dt>HTML</dt><dd>HyperText Markup Language</dd></dl>`.

  15. What elements are used to build an HTML table, including header, body, rows, and cells?

    `<table>` wraps it; `<thead>`, `<tbody>`, `<tfoot>` group sections; `<tr>` is a row; `<th>` is a header cell; `<td>` is a data cell.

  16. What is the difference between the <strong> / <em> elements and <b> / <i>?

    `<strong>` and `<em>` carry semantic meaning (strong importance, emphasis) read by assistive tech. `<b>` and `<i>` are purely presentational (bold/italic) with no added meaning.

  17. What is the purpose of the <span> and <div> elements?

    They are generic containers with no semantic meaning, used for styling/grouping. `<div>` is block-level; `<span>` is inline.

  18. How do you embed an image, and which attributes are required/recommended?

    `<img src="path" alt="description">`. `src` is required (the image source); `alt` provides alternative text for accessibility and when the image fails to load.

See more HTML flashcards →

Planning HTML for Front-end Web Development

HTML is about 9% of the Front-end Web Development syllabus by topic count — 6 of 68 topics, spread over 2 chapters. At roughly 45 minutes per topic plus 12 minutes per sub-topic, a first pass runs to about 5 hours.

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 (Front-end Web Development) FAQ

What is in the Front-end Web Development HTML syllabus?

HTML is split into 2 chapters — Basics and Advanced, containing 6 topics and 0 sub-topics in total.

How is HTML structured in the Front-end Web Development syllabus?

2 chapters. HTML accounts for about 9% of the topics in the whole Front-end Web Development syllabus (6 of 68).

How long should I spend on HTML for Front-end Web Development?

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

Are there flashcards for Front-end Web Development HTML?

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