Tags and elements

An element is usually three things in a row: an opening tag, some content and a closing tag with a slash.

The parts of an element

Look at <p>Bread is ready.</p>. The opening tag <p> says a paragraph starts here. The closing tag </p>, with a slash after the first angle bracket, says it ends. Everything between them is the content. The whole thing, tags plus content, is the element. People often say tag when they mean element, and in conversation that is fine, but the difference helps when you read documentation: a tag is the bit in angle brackets, an element is the finished piece of the page.

Attributes add details

An opening tag can carry attributes, extra settings written as name="value". In <a href="menu.html">Menu</a> the attribute href says where the link goes. In <html lang="en"> the attribute lang names the language. Put the value in double quotes; the standard allows some unquoted values, but quotes never cause trouble. Several attributes are separated by spaces, and their order does not matter. A few attributes, such as required on a form field, are boolean: writing the name alone switches them on.

<p class="note" id="opening">We open at <strong>7 am</strong>.</p>

Nesting: close in reverse order

Elements go inside other elements. In the example above, <strong> sits inside <p>. The rule is the same as with brackets in arithmetic: whatever opened last must close first. <p><strong>7 am</p></strong> is wrong because the paragraph closes while the strong element is still open. Browsers will guess what you meant, but different mistakes lead to different guesses. Indenting child elements by two spaces, as the examples in this course do, makes the nesting easy to see.

Void elements

Some elements cannot have content, so they have no closing tag. These are called void elements. The common ones are <br> (a line break), <hr> (a thematic break), <img>, <input>, <meta> and <link>. You may see them written with a slash, such as <br />; in HTML the slash is allowed and ignored, so both forms work.

Meaning, not looks

Inside a paragraph you can mark words with <strong> for strong importance and <em> for stress emphasis, the kind that changes how a sentence is spoken. Browsers show strong as bold and em as italic, but the point is the meaning. A screen reader may read them with a different voice, and a search engine treats them as important words. If you only want bold text for decoration, that is a job for CSS. <b> and <i> still exist for text that is set apart without extra importance, such as a ship name or a foreign word.

Special characters and comments

Because < starts a tag, you cannot type it as ordinary text. Write a character reference instead: < for less than, > for greater than, and & for the ampersand itself. A comment, <!-- like this -->, is ignored by the browser and is handy for notes to yourself. Finally, HTML collapses white space: ten spaces or three line breaks in your file show up as a single space. Layout comes from elements and CSS, not from pressing the space bar.