Chapter 2.4: Tags and Elements

As you have seen in the previous section, HTML uses tags to describe parts of the document. The combination of tags and contents is an element. The tag is simply a word, shorthand, or acronym contained within a pair of less-than and greater-than symbols that is used to describe what is being displayed. For example, <p> indicates that you want to start a paragraph. Tags generally indicate the start of a span or a block, with blocks taking up their entire area while spans only take up the area of their contents. For example, a paragraph is a block as the end part of the paragraph becomes blank space to fill out a rectangular block. A word that is bold would be an example of a bold span.

Since both spans and blocks have a beginning and an ending, we need a second tag that indicates the end. This second tag must necessarily be different from the start element to allow the user to easily distinguish the beginning tag from the ending tag, but also needs to be easy to associate with the starting tag as HTML supports nesting of tags. HTML does this by having the end tag be the same as the start tag but with a / in front of it. This combination is known as an element.

Not all tags have content within them, but simply indicate the presence of something such as a hard line or a break. Many developers like to be able to quickly see if a tag is self-contained, so to make such tags more distinguishable, it is common to see these tags end with a / character such as <br />. This is not a requirement so is up to the developer to put in. It is recommended that you be consistent with this, so either don’t use the ending slash or always use it.

Normally, when you are creating a page, you are going to have headings and text. There are 6 levels of headings, each represented using a different size and/or style. The tag for these is simply an h followed by the level of the heading with <h1> being the highest level of heading and <h6> being the lowest level of heading. These can be seen in below where the tags are highlighted, normally the tags themselves are not shown.

<h1>Heading level 1 (highest)</h1>

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<h5>Heading level 5</h5>

<h6>Heading level 6</h6>

As mentioned before, paragraphs are text between <p> and </p> tags. Because the display size is not under the browser’s control, HTML formats the text itself. Making things a bit confusing for new users is that HTML ignores all the spaces and tabs between words treating them as a single space. The term for these spaces and tabs is whitespace. Part of the reason for the whitespace rules is to make it easier to create the HTML text document itself as it allows paragraphs to be written across multiple lines without causing confusion when the browser’s window size is larger than the size of the text on the browser line. Likewise, the display font in text editors tends to be monospaced (each character takes up the same width) while browsers display use fonts that are not monospaced meaning the width of each character varies. In cases, such as poems, where spacing is important, you can put the poem’s text between a <pre> and </pre> tag to have preformatted text.

One of the powerful features of HTML is the ability to nest tags. This is when you have a tag within the contents section of another tag. The biggest use of this feature is to add some special formatting to your text. While styling information is part of CSS, there are several tags that are still used for adding some style related information. The <b> tag makes text bold. Italic text is done by using the <i> tag. Underlined text is done by using the <u> tag. By using <b><i><u>bold and italic and underlined</u></i></b> you would have text that is bold, underlined, and italic.

The standard styles are not the only ones that are supported. We also have support for highlighting text using the <mark> tag and can have strike-through text by using the <del> (short for deleted) tag. There are two alternatives to bold and italic which were added as an attempt to move away from style tags. These are <strong> and <emphasis> which by default map to bold and italic. Having these extra tags can be handy as how they are displayed can be controlled by CSS so you can control what the formatting looks like.

Tags can have additional commands inside of them. These are known as attributes. The most important tag when we get to JavaScript is the id attribute which gives a tag a unique identifier. Tags are separated by spaces. An example of such a tag would be for displaying images. <img src="CSS3_and_HTML5_logos_and_wordmarks.svg" width="300" height="250" id="logo" alt="CSS3 and HTML5 logos" /> which is an image provided by daPhyre, CC BY 3.0. The img tag displays the image located at the src attribute (more on specifying file locations later) with a specified width and height and an id so we can manipulate the image with JavaScript, a topic we will be covering in the future.

HTML also contains one special type of tag. It starts with <!-- and continues to --> with whatever text you want between the opening and closing of the tag. This is a comment. It is ignored by the browser but can be used by the author to provide additional information to future editors of the page. As tags can be contained within the comment block, it can also be useful for temporarily removing sections of the HTML document for testing purposes.