The current version of HTML defines over 100 tags that you use to structure your content. Let's meet a few of these so that you can start putting together your own HTML documents.
Headings are used to label sections of your document. For a top-level heading like the title of a report, you use the tag <h1>. For a section title, you use <h2>. For a subsection, you use <h3>. How deep can one go? Try plumbing the depths by adding more heading levels to this body element:
The root and head elements have been left out to reduce noise. They must be present in a well-formed document.
Notice how each heading appears on its own line. Headings are block elements, which means they proudly fill their whole line. Any later content will appear on the following line.
A word of caution: HTML also has tags for head and header that have different meanings.
Long flows of text are broken into paragraph elements. Paragraphs are block elements, so no other content will appear on the same line as a paragraph.
Sometimes paragraphs may seem unnecessary. If we remove the <p> tag, the document seems to render just fine:
But watch what happens when we try to add a second implicit paragraph:
Whitespace usually collapses down to a single space character when the HTML is rendered. So, even though there's a linebreak between the paragraphs in the HTML, no linebreak appears in the browser. This collapsing doesn't happen when explicit <p> tags are used:
People who don't know what they're doing sometimes try to make linebreaks using an empty paragraph, like this:
This is a hostile practice that violates the meaning of the paragraph element and makes the structure of your page harder to understand for humans and machines alike.
A blockquote element is used to set apart a quotation. Most browsers will render the element with some extra indentation to set it apart from the surrounding text.
To structure a series of content, you use an unordered list. The whole list is enclosed in ul tags, and each list item is enclosed in li tags, like so:
Lists may also be ordered. This list below is a sequence of translations conducted with Google Translate. Item 1 is the original sentence. Each subsequent item is the translation of the preceding item into a different language, with the last translation returning to English.
The only legal child of a list is a list item. Any nested content must appear within a list item.
In the early days of the web, text reigned supreme. Berners-Lee's WorldWideWeb could display images, but they popped up in a separate window. Then a computer science student named Marc Andreessen added support for inline images to Mosaic, a web browser developed at the University of Illinois at Urbana–Champaign. (Andreessen would go on to found Netscape Communications Corporation. Today he is a venture capitalist.) Images soon became universal.
The img tag expects a src attribute holding the address of the image, as shown here:
Not all visitors to a web page use their eyes to consume the content. Some humans use screen readers. The alt attribute provides a textual description of the pixels that they do not see. Search engines crawl the web and use the alt text to classify your images. Omitting the attribute is another hostile practice.
The image is the sibling of a raw text element. Notice that the image does not appear on its own line. Both images and raw text are inline elements rather than block elements.
What puts the HT in HTML is the link. A link is content that when clicked directs the user to another resource. The content is often text, but it may also be an image or some other clickable element. Links are not created with the <link> tag; the <link> tag does something else. Being the inventor of the HTML, Berners-Lee got to pick the names. He christened them anchors, and today you must use the <a> tag to create a link:
Anchor elements are inline elements. As with images, you must provide an attribute declaring the address to which to jump. The attribute is named href, which is short for hypertext reference.
The anchor element may also be given a target attribute. The target of the anchor in this example is set to _blank. What happens when you click on the link? The default value is _self. What happens when you remove the target attribute and click on the link? When you set the attribute to _top?