HTML Tutorial
HTML Elements
An element is a start tag, content, and usually an end tag. Nesting builds the document tree a browser, a screen reader, and a crawler all walk.
Start tag, content, end tag
Most HTML is written as a pair of tags around content. The start tag names the element. The end tag uses the same name with a slash. Together they are one element.
Example
<p>Oral temperature 38.4 °C is a paragraph element.</p><p> opens the paragraph. The sentence is the content. </p> closes it. Headings, links, lists, and most other tags follow the same shape.
Nested elements
Elements sit inside other elements. A paragraph lives in the body. A strong phrase can live inside that paragraph. The inner element must close before the outer one. That nesting is the page tree the browser builds.
Example
<body>
<p>Give <strong>500 mg</strong> now, then review.</p>
</body>Do not overlap tags. <p>text <strong>more</p></strong> is wrong. Close strong first, then p.
Empty elements
Some elements have no content and no end tag. They are often called empty or void elements.<br> inserts a line break. <hr> draws a thematic break.<img> shows an image from a src path.
Example
<p>First line.<br>Second line.</p>
<hr>
<img src="lake.jpg" alt="A still lake at dusk">You may see a trailing slash in older files, such as <br />. In HTML5 the slash is optional. A start tag with no end tag is enough for these elements.
Tags are case-insensitive
HTML tag names do not care about case. <P> and <p> mean the same thing. The convention in this course is lowercase, because it is easier to type and matches CSS selectors you will write later.
Example
<h1>Lowercase tags</h1>
<p>This is the style StudyGrid uses.</p>Attribute values can be case-sensitive, especially file names on some servers. Lake.jpgand lake.jpg are not always the same file. Tag names are the part that ignore case.
Unclosed tags
If you forget an end tag, the browser often still shows something. It guesses where the element should stop. The guess can put the rest of the page inside the wrong parent, so styles and layout leak.
A missing </p> is frequently repaired. A missing </div> or</a> is more likely to swallow later content. Write both tags. Do not rely on the repair.
Click Try it in HTML under an example. That opens /html/try — a live page preview. Try removing an end tag on purpose and see how the preview changes.
The page is a tree
Nested elements form a tree. The html element is the root. head andbody are children. Everything visible hangs off body. This tree is the DOM — the Document Object Model — that CSS and JavaScript later walk.
| Piece | Example | Notes |
|---|---|---|
| Start tag | <p> | May include attributes |
| Content | the text or child elements | Empty elements have none |
| End tag | </p> | Not used on br, hr, img |
| Element | the whole p including tags | One node in the tree |
A small nested page
Read the indentation as the tree: body contains two children, and the second paragraph contains a strong phrase.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elements</title>
</head>
<body>
<h1>Trail notes</h1>
<p>The path is <strong>icy</strong> after four.</p>
</body>
</html>Next: attributes, the extra name-value pairs you put on a start tag.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Biology
A warning nested in a paragraph
An element is a start tag, content, and an end tag. Nesting builds a tree: body contains p, p contains strong. Close the inner tag first.
strong is not “make it bold for fun”. It marks importance. A screen reader may stress it. Fever copy belongs in that role, not in a random span.
Example
<p>Oral temperature 38.4 °C.
<strong>Treat as fever.</strong>
Rest and fluids unless a clinician says otherwise.
</p>Chemistry
Empty tags on a sample card
Some elements are empty: br, hr, img. They have no end tag because they have no content. br is a line break inside an address or a formula line.
hr is a thematic break between sections, not a decorative line you sprinkle for looks. Use it when the topic actually changes.
Example
<h1>Titration</h1>
<p>HCl vs NaOH</p>
<hr>
<p>Run 1: 24.8 mL<br>Run 2: 25.1 mL</p>