How to Write HTML, Part 2: Understanding Tags
By: Brad Yale
Tags: HTML, Html5, Web Design, CSS, Web Development

Tags.

As mentioned in How to Write HTML, Part 1: What is HTML?,:

“A tag is the basic bedrock principle of HTML. It is the building block tool which enables formatting of font, color, graphic, and hyperlinks. Tags are used universally across HTML to identify specific types of content and how a webpage is formatted… By knowing the rules of how tags work, which tags to use in a specific situation and more importantly, how tags relate to one another, it becomes stupid simple to create a HTML page.”

So, let’s dive into tags to understand both their form and their function.

HTML5 DOCTYPE is now the most common, used on 80% of pages — PowerMapper

The Basics

Think of a tag as a bookend to all content placed on a page. They are the directives telling the web browser how to display content in relation to the formatting you impose upon it and they direct how content is related to additional content on a given page.

This said, tags can help you format paragraphs, bolded copy, line breaks, hyperlinks, block quotes, headings, order lists, header data, body copy, etc. You can use this link to find a more comprehensive list of tags. For a basic list of tags, like the ones you will be using to create your first webpage later on in this series, see the chart below.

A comprehensive list of basic HTML tags

Page Formatting and Content Formatting

As mentioned, HTML is meant to define the attributes on your page. While you might think of that only as the look and feel of content, HTML also defines the structure of the page, i.e. where the content is placed in relation to other bits of content.

To understand what this means, let’s take a look at the head , title and body tags.

The head tag is how you define for the web browser what content is the head section – the top most section – of your webpage. The tag defines the placement of webpage meta content which serves as the website search name/title within search engine result pages (SERP’s).

As such, when viewing the source of any web page, it would be normal to see:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Learning HTML</title>

<link href="learnHTML.css" rel="stylesheet">

</head>

<body>

<!-- alter in due time -->

<p>When you take the time to cycle through the process of understanding tags, their use and their structure, learning HTML isn’t all that hard.</p>

</body>

</html>

The head tag contains the content along with the linking cascading style sheet (CSS).

Likewise, the body tag is used to tell the web browser what content on your page is body copy for the reader. In this case, the sentence which is book ended by the p - paragraph tag – is the body copy.

In both cases, the head and body tags direct the browser on how content should be used, where it should be placed and its overall relation to the additional content on the page.

Formatting

As you can see from both the inserted and linked tag list, the basic structure of a tag is:

Angle bracket — specific directive — angle bracket

Angle bracket — backslash — repeating original directive — angle bracket

This means there are two tags to keep in mind whenever using HTML — opening and closing.

The opening tag uses both the backwards and front facing angle bracket with the directive p or html or br in the middle.

The closing tag adds a symbol to the mix, the backwards facing slash, to signal to the reader the closing of the formatting tag. Like the opening tag, the closing tag uses both the backwards and front facing angle bracket with the directive in the middle however places a backwards slash directly in front of the opening tag, /p or /html or /br.

The backwards slash is paramount in closing the tag. If it is forgotten, the formatting directive opened by the first tag will be applied to all content below it. Thus, if you don’t close the tag, all remaining copy could be bolded or italicized or hyperlinked etc.

Formatting Inconsistencies

Now, as you might notice, not all HTML tags contain the same formatting. The vast majority hold the same construct of:

Angle bracket — specific directive — angle bracket

…however some HTML tags, like hyperlinks and images have modified structure. With both, two additional symbols are added to the formatting structure, the equals sign and quotation marks. These elements are added to direct the web browser to the link location of the image or server file where an image is being pulled from.

Thus proper hyperlink and image formatting is shown below:

Hyperlink

<a href=”Insert_link_here”>Cute Puppies</a>

As you can see the angled bracket opens with the letter a (anchor) and continues with href (hypertext reference) followed by the equals to value and quotation marks finalized by the direct link. Naturally than, this tag closes with the closing of the anchor, /a .

Image

<img src=”Insert_image_file_name_or_linking_url”>

The image tag works in almost the same fashion as the hyperlink tag.

As you can see the angled bracket opens with the truncated img (image) and src (source) followed by the equals to value finalized with quotation marks. It is important to note because an image can be pulled from a linking source or a server file, two distinct values will fall within the quotation marks.

<img src="https://i-msdn.sec.s-msft.com/dynimg/IC485706.png">

or

<img src="/wp-content/uploads/flamingo.jpg">

The difference being one image is being called via a linked file location and the other is being called via an image stored on a local server.

Summary

HTML tags are used to define how content is formatted on a web page and the relation of that content to other content held within the same webpage. They allow you to tell the web browser what belongs where with what look and feel.

Now that you know the basics of tags, how they work and what they are used for, let’s take a deeper dive into the core formatting functionality of tags.