0% completed
HTML Tags
On This Page
Start Tags and End Tags
Heading Tags
Tags With No End Tag
The Line Break Tag
Checking Your Tags
The Bakery Page So Far
The bakery page from the previous chapter contains 14 tags, from <html> at the top to </html> at the bottom. Each one is written between the angle brackets < and > and starts with a short name. As the previous chapter showed, each tag marks where a piece of content starts or ends, and tags are the first thing the browser looks for when it reads a file.
Start Tags and End Tags
Most tags come in pairs. Here is one line of the bakery page:
<p>Fresh bread every morning, from 7 a.m.</p>
The browser reads this line in three steps:
- It finds
<p>, which is a start tag, also called an opening tag. It means "a paragraph begins here". - It reads the text that follows as the paragraph's content.
- It finds
</p>, which is an end tag, also called a closing tag. An end tag has the same name as its start tag, with a forward slash/before the name. It means "the paragraph ends here".
The start tag, the content and the end tag together make one element, which in this case is a paragraph element. The two words are easy to confuse. A tag is a piece of text you type, and an element is the complete thing that the tags mark out and that the browser places in the document tree. So <p> is a tag, while <p>Fresh bread every morning, from 7 a.m.</p> is an element.
The picture marks the three parts of the line and the bracket that covers all of them. The bracket is the element, and only the two ends of it are tags.
Tag names are not case sensitive, so <P> and <p> mean the same thing. The usual practice is to write every tag name in lowercase, and this course does so throughout.
Heading Tags
The heading tags show how a tag's name tells the browser what the content means. HTML has six levels of heading, from <h1> to <h6>. An <h1> is the main heading of the page, an <h2> is the heading of a section inside it, an <h3> is a heading inside that section, and so on. Here the bakery page gains a section about its opening hours:
<h1>Maya's Bakery</h1> <p>Fresh bread every morning, from 7 a.m.</p> <h2>Opening Hours</h2> <p>Monday to Saturday, 7 a.m. to 6 p.m.</p>
The browser shows this:
Maya's Bakery (largest, bold) Fresh bread every morning, from 7 a.m. Opening Hours (smaller, bold) Monday to Saturday, 7 a.m. to 6 p.m.
The browser shows an <h1> larger than an <h2>, but the size is only a default style. The number gives the heading's level in the structure of the page, and screen readers let their users jump from heading to heading using those levels. So choose a heading level for its place in the structure, not for its size, and do not skip a level, for example from <h1> straight to <h3>. The chapter on working with text covers headings in more detail.
Tags With No End Tag
A few elements never have content, so they consist of a start tag only. They are called void elements. You have already met one of them, <meta>, in the head of the bakery page. Other common void elements are <br> for a line break, <img> for an image, <input> for a form field, <hr> for a change of topic, and <link>, which connects the page to another file. Each of these is explained in the lesson or chapter that uses it.
Writing an end tag for a void element is a mistake. The validator reports </br> as an error, and Chrome repairs it by treating it as a <br>, so the line still breaks.
You will also see void elements written with a slash before the closing bracket, such as <br />. This style comes from XHTML, an older and stricter form of HTML. Current HTML allows the slash on void elements and ignores it, so <br> and <br /> mean exactly the same. On any other element the slash has no effect at all: <p /> is still only a start tag, and the browser keeps the paragraph open until it finds </p> or another element that ends it. This course writes void elements without the slash.
The Line Break Tag
A paragraph is shown as one block of text, and the browser decides where its lines wrap. Line breaks that you type in the file are treated as spaces. The <br> tag forces a new line at the exact point where it appears. Compare the same address written twice, first without <br> and then with it:
<p> Maya's Bakery 12 Mill Road Springfield </p> <p> Maya's Bakery<br> 12 Mill Road<br> Springfield </p>
In the render, the first paragraph runs together as "Maya's Bakery 12 Mill Road Springfield", because the browser turned the typed line breaks into spaces. The second paragraph keeps its three lines.
Use <br> only where the line break is part of the content itself, as in an address or the lines of a poem. Do not use it to add space between paragraphs or below a heading. Each paragraph should be its own <p> element, and the space between blocks is set with CSS. Several <br> tags in a row also confuse screen reader users, because a screen reader may announce each break while giving no useful content for it.
Checking Your Tags
When a tag is misspelled, the browser does not show an error. It accepts an unknown name such as <pp> as an element it does not understand, shows the text inside it as plain text, and carries on. A forgotten end tag is also accepted silently, and the browser guesses where the element was meant to end.
To find these mistakes, use the Nu HTML Checker at validator.w3.org/nu, the W3C's HTML validator from the lesson on your first HTML file. Paste your markup or upload your file, and it lists every error with its line number. For <pp> it reports that the element is "completely-unknown". Checking a page with the validator after every few changes is a good habit while you are learning.
The Bakery Page So Far
Here is the complete bakery page with the new heading and the address:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Maya's Bakery</title> </head> <body> <h1>Maya's Bakery</h1> <p>Fresh bread every morning, from 7 a.m.</p> <h2>Opening Hours</h2> <p>Monday to Saturday, 7 a.m. to 6 p.m.</p> <h2>Find Us</h2> <p> 12 Mill Road<br> Springfield </p> </body> </html>
The page now has one main heading, two section headings and three paragraphs. The only <br> sits inside the address, where the line break belongs to the content.
Reading Progress
0%
On This Page
Start Tags and End Tags
Heading Tags
Tags With No End Tag
The Line Break Tag
Checking Your Tags
The Bakery Page So Far