HTML Elements and Tags


This chapter takes a close look at tags, the fundamental building blocks of HTML. It covers how they work, some exceptions to the normal way they work, and a brief discussion on tag attributes.

Structure of Tags

Generally, matching pairs of tags surround the section of text which they affect. Two matching pairs of tags, along with the content they enclose, are called an “element.”

<strong>This element begins and ends with the "strong" tag.</strong>

The opening tag can contain additional attributes which provide more information about the contents of the tag and how to display them. These attributes are written as name–value pairs, separated by an equals ( = ) sign, with the value placed in quotes.

<a href="">This is a link. The tag is an "a" for "anchor," and the href (hyper reference) attribute specifies where the link is pointing.</a>

A few tags do not occur in matching pairs, because they are used to insert something, rather than describe text. These are called “empty” or “void” tags, and the most common one is the one used for inserting an image. The src attribute is used to specify the URL of the image.

<img src="" />

Notice there is no closing tag, and therefore no enclosed text. The slash right before the final angle bracket ( /> )is used to “self-close” the tag. This is not absolutely required, but it is a good reminder that whatever follows will not be enclosed.

There are several other empty tags. Two are fairly straight forward and common.

  • <br/> inserts a line-break.
  • <hr/> inserts a horizontal rule (line) separator.

Others do not insert something visual, but are used to provide information about the page itself.

<link rel="stylesheet" type="text/css" href="theme.css" />  <meta name="description" content="Title of this page." />

Additionally, the <script> tag (which is used to add Javascript to a page) can be empty, but it doesn’t have to be.

(More information on <link>, <meta>, and <script> tags will be provided later in this guide.)

Block-level vs. inline

With the exception of tags that provide information about the document itself, HTML tags fall into two categories, block and inline.

Block elements

Block elements represent rectangular blocks of content. They have an implied line break before and after. Block elements include sectional content like paragraphs ( <p> ), divisions ( <div> ), and headlines ( <h1>, <h2>).

It is standard practice to type most block-level tags on individual lines above and below their content:

<div>  This is a div. </div>

However, this is not always done, especially with headlines:

<h1>This is the title of a page</h1>  <h2>This is a major section</h2>  <p> Some content in a paragraph. </p>

Block-level elements can be nested, but some block-level elements can not contain other block-level elements:

<div>   <h2> Title of an article</h2>   <p>     First paragraph of article.   </p> </div>

Paragraphs and headlines cannot contain other block-level elements.

Inline elements

Inline elements are elements used within text. Bold ( <strong> ), italic ( <em> ), and links ( <a> ) are all inline elements.

Inline elements are sometimes called “span-level” elements. There is also a generic span-level elements, simply called a span ( <span> ). This doesn’t do a whole lot by itself, but can be used to create customized types of text-display, through the use of elements.

<span class="special-text">This text is special.</span>

(See the chapter on CSS for information on how to make class="special-text" display in a special format.)

Sometime it doesn’t make sense

Images ( <img> ) feel like block-level elements — they are rectangular, have definite dimensions, and are usually displayed outside of the flow of text.

However they are actually inline elements. The reason for this is mostly a hold-over from a less-sophisticated period of web design, but we’re stuck with it now. The weird implications of this can be avoided easily, but its good to know. (See the chapter on images and also the one on CSS.)

There are other weird issues like this, and they will be covered later in this guide when they come up.

More about attributes

Almost every element tag can include attributes. Many elements have a specific set of attributes they support (like <img> and the src= attribute), but there are several elements which are globally supported by all element types.

Two important attribute types are class and id.

<a href="" class="example-link" id="link27">This anchor tag has three attributes.</a>

Class attributes

Class attributes are used to mark one or more elements as belonging to a specific “class” or group — this can be used for displaying them all the same way.

For example, it is common to use an unordered list ( <ul>) as a menu, and to make the list item ( <li> ) which points to the current page look different than all the other links in the same list.

<ul class="menu">  <li class="menu-item">    <a href="/home">Home</a>  </li>  <li class="current-item">    <a href="/about">About</a>  </li>  <li class="menu-item">    <a href="/contact">Contact</a>  </li> </ul>

An element can have more than one class. Multiple classes are separated by spaces inside the class element.

<p class="first drop-cap">   This is the first paragraph, and it is also part of the drop-cap class. </p>

Because classes are separated by a space, classes may not include spaces in their names.

In CSS, JavaScript, and other languages, the class of an element is notated with a dot before the name.

/*CSS*/  .first {     color: green; }

The above CSS code means that within any element that has a class of first, the text color should display as green.

ID attribute

The ID attribute works similarly to the Class attribute, but is conceptually different. Rather than signifying the element’s membership in a group, it uniquely identifies that element. For this reason, there can be only one element with any specific ID on any given page.

<h1 id="page-title">This is the title of the page</h1>

IDs are less often used for affecting display, and more often used for functional purposes.

IDs can be used for internal linking of a document, such as the Table of Contents on a wikipedia article.

<ol>  <li>   <a href="#intro">Intro</a>  </li>  <li>   <a href="#history_of_topic">History of Topic</a>  </li> </ol>  <h2 id="intro" class="section-header">Introduction</h2>  <p> Text of introductory section. </p>  <h2 id="history_of_topic" class="section-header">  <p> Some history on this topic. </p>

Notice that the links to the sections include the name of the tag, prefixed with the hash or pound sign ( # ). This is the standard way to reference the id of an element:

/*CSS*/  #intro {     font-size: 14px; }
// Jquery  $("#intro").click(   // do something when the intro area is clicked );

Other attributes

Each HTML tag has its own set of available attributes relating to their specific purpose. For example, the <a> tag, which defines a hyperlink, includes the href (hyper-reference) attribute, which specifies a URL being linked to.

These attributes will be covered in more detail as we look at each tag individually in later chapters.

There are also a number of “global” attributes — attributes any element can have. These will also be covered in more detail later on, as their uses become more relevant.

Comment Tags

The last point to cover in basic HTML tags is the comment. Comments begin with an angle bracket, followed by an exclamation point and two dashes. They end with two dashes and a closing angle-bracket.

<!-- This is a comment. -->

Comments may be multi-line.

<!-- This is a comment. It has two lines. -->

Comments may not be nested:

<!--  If I try to nest a comment inside another comment.   <!-- Like this --> Then this the part after the first closing tag will fall outside the comment. -->

You need to watch our for nesting of comments if you ever try to comment-out a large section of existing HTML — inline comments in the original section will mess up your commenting.

Anything inside the comments will not be displayed to the user inside the browser. However, HTML comments can be viewed by the site visitors if they choose to view the page source. Therefore, do not use comments for anything you wish to hide from the public.


HTML is essentially text content with tags that are used to specify the meaning of that content within the document and the relationship of each piece of content to the others.

Tags are short snippets of letters inside angle-brackets. They typically consist of a matching pair — an opening and a closing tag. The opening tag is just the tag name, while the closing tag is prefixed with a slash.

Attributes may be added to any element. Attributes are specified inside the opening tag, as name–value pairs joined by an equal sign. The value must be inside single or double quotes (double quptes is standard).

The two most common attributes are the class and id attribute, which are used both for styling and functional purposes.