🌍 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.
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.
-
Basics
3 topics- HTML Syntax
- HTML Elements
- HTML Attributes
-
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.
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).
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>`.
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>`.
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>`.
How do you write a comment in HTML?
`<!-- this is a comment -->`. Browsers do not render comment content.
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>`.
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.
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.
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. `<` = <, `>` = >, `&` = &, ` ` = non-breaking space.
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>`).
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.
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>`.
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>`.
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>`.
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.
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.
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.
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.
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.