Tags

Tags are the foundation of markup languages like HTML, defining elements and sections within a document. Tags provide formatting instructions to the browser. 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 structure.

HTML tags are always enclosed in angle brackets (the < and > characters), 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: an opening tag followed by a closing tag with content in between. An opening tag includes an opening angle bracket (<), the tag’s name in lowercase letters, and a closing angle bracket (>). The closing tag adds a forward slash (/)before the tag name.

The tag’s name will always be a single word.

Examples of paired tags include tags of headers, body, paragraphs, etc. The example below is for a paragraph. Notice the content in between the tags – this will become the text of the paragraph.

<p>Hello, world.</p>

Note: Don’t worry about what these specific tags mean yet; they will be formally introduced in their own sections. Focus instead on the syntax (in other words, focus on how the code is formatted).

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 (>).

Some choose to also put a space before the slash; this is based on preference. The example below shows the usage of a self-closing tag for inserting line breaks.

<br/>

Nested Tags

Paired tags can often have other tags inside of them – this is a technique known as nesting. One example of when nesting might be useful is when you want to put a line break in the middle of a paragraph.

To achieve nesting, simply place the inner tag (or pair of tags) after the outer opening tag, but before the outer closing tag. If your inner tag is paired, be sure the inner tag is closed before closing the outer tag.

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

Certain tags can sometimes have attributes. Attributes specify additional information beyond what type of tag is being used. For example, when creating a link in a webpage, an attribute must be used to specify the destination of the link.

Attributes are provided as attribute-value pairs. That is, each attribute is syntactically formatted as an attribute name (all lowercase and always one word) followed by an equals sign (=), followed by a value surrounded by quotation marks ("). Attribute-value pairs are listed immediately after the tag name, and are separated from the tag name by a space. In the case of paired tags, attributes are listed only in the opening tag. 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." />

HTML Comments

An HTML comment is used to insert notes into the code. The comments are not visible in the final result in the web browser, but will be visible when editing the code. Comments are useful to leave reminders to yourself, or to explain parts of your code to other people who may need to read it.

HTML comments always begins with <!-- and ends with -->. HTML comments do not have tag names or attributes within the angle brackets. Instead, they can contain any arbitrary string of text.

The example below shows the usage of a comment.

<!-- Note to self: 
     include a short bio in this paragraph. -->
	 
<p>Hello, world.</p>

Note: Make sure the message you type in your comment is separated from the special sequences of characters with at least one space on each end.

Besides adding messages for future coders (or yourself) to look at, comments are useful for temporarily removing parts of your code. Would you like to see what your page looks like without one of your paragraphs, but you aren’t ready to remove the code entirely? Just comment it out!