What is HTML: The Structure Layer of Every Web Page
HTML is a markup language, not a programming language. It labels content so that browsers, search engines and assistive technology all agree on what each part of a page means.
-
HTML Basics
- What is HTML: The Structure Layer of Every Web Page
- HTML Document Structure: DOCTYPE, html, head and body
- Elements, Tags and Attributes: The Vocabulary of HTML
- HTML Comments: Notes That Ship With Your Code
- Block Level and Inline Elements
- Writing and Running Your First HTML Page
- How a Browser Turns Markup Into a Page
- Text and Formatting
- Links and Navigation
- Images and Media
- Lists
- Tables
-
Forms
- Form Structure: form, action and method
- Input Types: Text, Email, Number, Date and the Rest
- Labels: The Most Important Element in a Form
- Checkboxes, Radio Buttons and Grouping
- select, option, optgroup and datalist
- textarea, File Uploads and Hidden Fields
- Buttons: submit, reset and button
- Built In Form Validation
- GET or POST: What Happens When a Form Is Submitted
- Semantic HTML
- HTML5 Features
- Head and Metadata
- HTML with CSS
- HTML with JavaScript
- Accessibility
-
HTML SEO
- How Google Works: Crawling, Indexing and Ranking
- SEO Friendly HTML Structure
- Titles and Descriptions That Earn Clicks
- Headings and Content Structure for Search
- Internal Linking and Anchor Text
- robots.txt and XML Sitemaps
- Canonical URLs and Duplicate Content
- Structured Data and JSON-LD
- Image SEO
- Core Web Vitals and Mobile Friendliness
- DevTools and Debugging
- Editor Productivity
- HTML Best Practices
- HTML Projects
- Advanced Projects
- Practice and Exams
Concept
HTML stands for HyperText Markup Language. It is the layer of a web page that says what each piece of content is. It does not say how the content should look, and it does not calculate anything. It labels.
Three separate languages build a normal page, and keeping them apart is the single most useful habit a beginner can form:
| Language | Answers the question | Example of its job |
|---|---|---|
| HTML | What is this content? | This block is a heading, that block is a paragraph, this is a link |
| CSS | How should it look? | Headings are dark blue and 28 pixels tall |
| JavaScript | How should it behave? | Open the menu when the button is pressed |
The word hypertext is the older half of the name and still the important half. Hypertext is text that links to other text. A page of prose becomes a web the moment any word in it can carry a reader somewhere else, and the anchor element is what makes that possible.
Why it is called a markup language
Markup is an old publishing idea. An editor would write instructions in the margin of a manuscript - set this line as a chapter title, put this word in italics - and the typesetter would follow them. HTML does the same thing with angle brackets instead of margin notes. The content stays readable; the labels wrap around it.
Prices rise every year.
<p>Prices rise every year.</p>The first line is a sentence. The second line is a sentence that has been marked up as a paragraph. Nothing about the words changed; what changed is that software can now identify the boundaries of the sentence and treat it as a unit.
Who reads your HTML
Beginners usually picture one reader: a person with a browser. There are four, and they all rely on the same markup.
- Browsers - build the visual page from the tags they find.
- Screen readers and other assistive technology - announce the page out loud, and navigate it by heading, by link and by landmark. They can only do this if the right elements were used.
- Search engine crawlers - decide what the page is about, largely from the title, the headings and the link text.
- Other programs - preview cards in chat apps, reading modes, translation tools and archiving services all parse the markup for meaning.
This is the practical reason to care about choosing the correct element. A heading styled to look like a heading serves one reader out of four. A real h2 serves all four.
Example
A complete, valid page. Every part of it is explained across the next few notes; read it now for the shape.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Monsoon Reading List</title>
<meta name="description" content="Six short books worth finishing before the rain stops.">
</head>
<body>
<h1>Monsoon Reading List</h1>
<p>Six short books, none longer than two evenings.</p>
<ul>
<li>A book about rivers</li>
<li>A book about railways</li>
</ul>
<p>Written up in full on the <a href="/blog">blog</a>.</p>
</body>
</html>Explanation
Read the example as a set of claims about the content rather than as a set of drawing instructions. The markup claims that the page is in English, that its title is Monsoon Reading List, that there is one top level heading, that two items form a list, and that the word blog is a link. A browser turns those claims into a layout, a screen reader turns them into speech, and a crawler turns them into an index entry. None of them were told about fonts or colours, because none of that is HTML.
Important rules
- HTML is not a programming language. There are no variables, no conditions and no loops. If a page needs logic, that logic lives in JavaScript on the client or in a server language such as PHP.
- HTML is a living standard. It is maintained continuously rather than released as numbered versions, which is why HTML5 is best read as a shorthand for modern HTML rather than as a fixed edition.
- The browser will never reject your file. Broken markup is repaired by guesswork and rendered anyway, so a page that looks correct is not proof that it is correct.
- A file has to end in
.htmland be served astext/htmlfor a browser to treat it as a page rather than as text to download.
Common mistakes
- Reaching for a tag because of how it looks. Choosing
h3because the text should be smaller, rather than because it is a third level heading, breaks the document outline for every non visual reader. - Writing presentation into the markup - stacked
brtags for spacing, a table used to place two boxes side by side, an empty paragraph to push content down. Spacing is a CSS job. - Assuming the browser preview is the specification. Two browsers can repair the same broken markup differently.
- Treating alt text, labels and headings as optional extras. They are the parts of HTML that carry meaning to readers who are not looking at the screen.
Best practices
- Ask what is this content before asking which tag. The answer to the first question usually names the tag.
- Keep the three languages in three places: markup in the HTML file, appearance in a stylesheet, behaviour in a script.
- Write the page so it is still usable with the stylesheet switched off. If the order and the structure make sense as plain text, the markup is sound.
- Validate early and often rather than once at the end.
Practice
- Take any page you use daily and describe five parts of it in words - heading, navigation, article, list, footer - without naming a single tag. That description is the markup you would write.
- Explain in one sentence why
<p><strong>Total</strong></p>and<h2>Total</h2>are not interchangeable even if they are styled identically. - Name one reader of your HTML that never sees the screen, and one thing you would have to write differently for that reader.