How to Write HTML, Part 2: Understanding Tags

Brad Yale
Brad Yale
Oct 31, 2017 · 5 min read

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.

Image for post
Image for post
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.

Image for post
Image for post

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 , and tags.

The 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:

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

Likewise, the 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 - paragraph tag – is the body copy.

In both cases, the and 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 or or 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, or or

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

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, .

Image

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.

or

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.

HealthWellNext

HEALTHWELLNEXT is a thought leadership platform focused on…

Brad Yale

Written by

Brad Yale

Nerd at heart. I write about health, tech, data, search and content.

HealthWellNext

HEALTHWELLNEXT is a thought leadership platform focused on forward-thinking insights, strategies, ideas and innovation, brought to you by The Bloc.

Brad Yale

Written by

Brad Yale

Nerd at heart. I write about health, tech, data, search and content.

HealthWellNext

HEALTHWELLNEXT is a thought leadership platform focused on forward-thinking insights, strategies, ideas and innovation, brought to you by The Bloc.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store