HTML Study Guide
Study Guide
📖 Core Concepts
HTML – the standard markup language that defines the structure and content of web pages; browsers read the markup and render the page.
Elements / Tags – building blocks written in angle brackets (<tag> … </tag>).
Void (empty) elements like and <br> have no closing tag.
Attributes – name‑value pairs inside a start tag that modify an element (e.g., src, href, id, class).
id vs class – id must be unique within the document; class can be shared by many elements for styling or semantics.
Document Type Declaration (Doctype) – <!DOCTYPE html> tells the browser to use standards mode; omitting it may trigger quirks mode.
Semantic HTML – tags that describe meaning (<header>, <nav>, <article>, <section>, <strong>, <em>). Improves accessibility and SEO.
HTML5 Media – <audio>, <video>, and <canvas> (the latter works with JavaScript for graphics).
XHTML vs HTML – XHTML is XML‑based; requires every element to have a closing tag (or self‑close with /), and must be well‑formed.
Rendering Modes – determined by the Doctype; standards mode follows specs, quirks mode mimics legacy browsers.
---
📌 Must Remember
<!DOCTYPE html> → HTML5, standards mode.
Void elements (, <br>, <input>, <meta>, <link>) never have an end tag.
id must be unique; class can be reused.
Optional end tags (e.g., </p>) are inferred by the browser.
Entity references: <, >, &, ", ' (or ').
Strict HTML → no deprecated presentational tags/attributes.
Transitional HTML → allows deprecated tags like <font>, <center>, and attributes such as bgcolor, align.
XHTML empty‑element syntax: <br/>, .
MIME type: serve HTML as text/html; XHTML can be served as application/xhtml+xml.
Semantic replacements: <strong> (instead of <b>), <em> (instead of <i>), structural tags (<header>, <nav>, <section>, <article>, <footer>).
---
🔄 Key Processes
Create a valid HTML5 document
<!DOCTYPE html>
<html lang="en"> (optional lang)
<head> → <meta charset="UTF-8">, <title>…</title>, optional CSS/JS links
</head>
<body> → add content (headings, paragraphs, images, links, etc.)
</body></html>
Add an image
(no closing tag).
Add a hyperlink
<a href="https://example.com">Link text</a>
Serve XHTML as HTML (for compatibility)
Ensure HTTP header Content-Type: text/html.
Keep well‑formed markup (all tags closed, quotes around attribute values).
Switch between Strict and Transitional
Use the appropriate Doctype:
Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional: ...//DTD HTML 4.01 Transitional//EN"...
---
🔍 Key Comparisons
Strict vs Transitional
Strict – no deprecated tags/attributes; encourages CSS.
Transitional – permits deprecated presentational elements (<font>, <center>) and attributes (bgcolor, align).
HTML vs XHTML
HTML – forgiving syntax, optional end tags, case‑insensitive.
XHTML – XML rules: case‑sensitive, all tags closed, attributes quoted, self‑closing slash for empty elements.
Semantic vs Presentational Tags
Semantic (<strong>, <em>, <section>) → conveys meaning.
Presentational (<b>, <i>, <font>) → only visual effect, deprecated.
Standard vs Quirks Rendering
Doctype present → standards mode (accurate CSS/JS behavior).
Doctype missing/incorrect → quirks mode (browser emulates old IE behavior).
---
⚠️ Common Misunderstandings
“Browsers display tags.” → Tags are instructions, not visible text.
“Every tag needs a closing tag.” – Void elements (, <br>) do not.
“id can be reused on multiple elements.” – Violates uniqueness requirement.
“The Doctype only affects CSS.” – It controls all rendering (HTML, CSS, JavaScript).
“<b> is the correct way to make text bold.” – Use <strong> for semantic emphasis.
“XHTML must always be served as application/xhtml+xml.” – It can be served as text/html for legacy compatibility (but will be parsed as HTML).
---
🧠 Mental Models / Intuition
HTML = a tree: <html> is the root, branches are nested elements, leaves are text nodes.
Attributes = element properties: think of them like object properties (img.src, a.href).
Doctype = “instruction manual” telling the browser which rulebook to follow.
Semantic tags = labels that tell both humans and machines what the content is, not how it looks.
---
🚩 Exceptions & Edge Cases
Optional end tags – e.g., </p> can be omitted; the browser auto‑closes when a new block element starts.
Self‑closing slash in HTML5 – allowed (<br/>) but not required; in XHTML it is required.
<script> and <style> – their content is not parsed as HTML, so </script> must be explicit.
<canvas> does nothing without JavaScript; it’s just a drawable surface.
---
📍 When to Use Which
Start a new project? → Use HTML5 Strict with semantic tags and external CSS.
Maintaining legacy pages? → Choose Transitional to avoid breaking old markup.
Need XML tools (XSLT, XPath)? → Write XHTML and serve as application/xhtml+xml.
Presenting bold/italic purely visual? – Use CSS (font-weight, font-style) instead of <b>/<i>.
Embedding multimedia? – Use <audio>, <video> for native playback; use <canvas> when you need programmatic drawing.
---
👀 Patterns to Recognize
Missing <!DOCTYPE html> → likely a quirks‑mode question.
without alt → accessibility issue – may be flagged.
Deprecated tags (<center>, <font>) → clue that the page is Transitional or outdated.
Attributes without quotes – invalid in XHTML, acceptable (but discouraged) in HTML.
<meta charset="UTF-8"> inside <head> → proper character‑encoding declaration.
---
🗂️ Exam Traps
“<br> must be closed with </br>.” – False; <br> is a void element.
“The Doctype only influences CSS rendering.” – Wrong; it also affects layout, JavaScript, and box model.
“id attributes can be reused for styling.” – Incorrect; id must be unique.
“<strong> changes the font size.” – No; it semantically emphasizes text (default rendering may be bold).
“XHTML documents can omit closing tags if they are empty.” – False; every tag must be closed (<br/>).
“<canvas> works without JavaScript.” – Misleading; the element provides a drawing surface, but nothing appears without script.
---
or
Or, immediately create your own study flashcards:
Upload a PDF.
Master Study Materials.
Master Study Materials.
Start learning in seconds
Drop your PDFs here or
or
