Tags

HTML tags tell the browser how to display content and how to organize it. Tags can insert images, links, text, or navigation bars. Tags can also be used to define semantic categories, which often do not have a direct visual representation on the webpage, but can form an “outline” for your webpage.

HTML tags are always enclosed in angle brackets (< and >). Anything within these is interpreted as a tag rather than as textual information. These tags will present formatting information in a specific syntax to the browser. HTML tags come in two types: paired and self-closing.

Paired Tags

Paired tags, unsurprisingly, come in pairs. In the example below, the first tag opens with <p> , the second closes with a slash </p>. In this case, p is the tag’s name, for paragraph. Examples of paired tags include tags of headers, body, paragraphs, etc. The tag’s name will always be a single word.

<p>Hello, world.</p>

Self-Closing Tags

Self-closing tags represent self-contained elements and don’t have a separate closing tag. A self-closing tag begins with an opening angle bracket (<), followed by the tag’s name in lowercase letters, followed by a forward slash (/) and a closing angle bracket (>). The example below shows the usage of a self-closing tag for inserting line breaks.

<br/>

Nested Tags

In HTML, you can nest tags inside other tags. For example, you might nest a <br/> inside a paragraph to create a line break.

Note: Just make sure to close inner tags before closing the outer ones.

The example below shows a self-closing tag being nested inside of a paired tag.

<p>
    Hello, <br/>World.
</p>

This example shows a paired tag being nested inside of a paired tag.

<p>
    Hello, <span>World</span>.
</p>

Tags with Attributes

HTML tags can include attributes. Attributes specify additional information like a link’s destination or an image’s alt text.

Attributes use this format: <tagname attribute="value">

• The attribute comes after the tag name
• Values go in quotes
• Tags can have multiple attributes, separated by spaces
• Only the opening tag uses attributes

A tag can have more than one attribute — when this is the case, each attribute-value pair is separated from the others by a space.

The following example shows the syntactical formatting of a paired tag with an attribute. Notice that the value of the attribute is surrounded by quotation marks – this value might be a numeric, text, or other data value, depending on the attribute being used.

<a href="http://google.com">Google Homepage</a>

The following example shows the syntactical formatting of a self-closing tag with two attributes.

<img src="puppies.jpg" alt="Puppies playing." />