HTML Tags – Part 1: The Structural Elements

This article is the first of a six part series where I will discuss the basics of coding in HTML. So stay tuned!

HTML Tags - Structural Elements 500px

If the content within your posts are merged together without any breaks or is poorly displayed, you will lose your audience to your competitors. This tutorial will show you the structural tags in HTML that will help you display information properly.

My What is HTML – Understanding the Content Layer of a Webpage post gave foundational information on HTML. If you have not read it or are not familiar with the basics of HTML, it would be helpful to take a few minutes to read it before moving on to this article.

What you will learn today are the HTML tags that help your content read well by grouping them into smaller sections. There are many tags that can help structure your document but the following should be learned first.

HTML Tags – Part 1: The Paragraph, Break, and Horizontal Rule Tags

Paragraph Tag

Take a look at the image below. See how much of it you can read before your eyes begin to blur.

Sentences grouped together.

I had a hard time reading this and I typed it! It would be tiresome to read a post where the words seem to go on and on without a break. If you want people to read what you have to say and stay on your page, you need to separate your content and the paragraph tag <p> is a great tag to do this.

Below is the same paragraph using a few paragraph tags. The program that I used to show this is Adobe Dreamweaver, a great software that helps with programing and designing a website.

HTML Paragraph Tag Code View

And here is how the page looks with the code.

HTML Paragraph Tag Preview

Break Tag

Another way of breaking your sentences is by using the break tag (<br />). This tag works similar to hitting the Enter (Windows) or Return (Mac) key on your keyboard once. It will take you to the next line, breaking it without adding any spaces. If you use two <br /> tags in a row, it will work similar to the <p> tag.

Horizontal Rule Tag

The third tag in this section deals with creating a visual separation of content. The horizontal rule tag (<hr />) will place a horizontal line from the left of the page to the right. It is similar to creating a page break within a word processing document.

Learn HTML: Learn HTML Structural Elements Part 1 (VIDEO)

I bet after reading all of this information, you’re ready to try these tags out. My video below, Learn HTML: Learn HTML Structural Elements Part 1, will walk you through the examples I have above so you can fully understand how they work.

HTML Tags – Part 1: Headline Tags

When you read the news, either online or in paper format, you will see the most important story in big letters. This is the headline on the front cover and there are six tags that replicates that in HTML. Here they are in descending order:

HTML Headline Tags

The headline commands have a letter “h” paired with a number ranging from 1 to 6. <h1> represents the biggest headline and <h6> is the smallest. Each level has their own use and you have to decide which one fits within the content you are creating.

HTML Tags – Part 1: The Blockquote, Strong, and Em Tags

Utilizing the <p> tag will help separate content but there may be times when you want to present a section of copy (text) to make it stand out. The <blockquote>, <strong>, and <em> tags, used together, will indent, bold, and italicize your copy, respectively.

HTML Blockquote Tag

As you can see, it is possible to mix and match different tags with one another. One thing to remember is to make sure you open and close your tags in the correct order.

What Are Your Thoughts

Besides bolding and italicizing copy on a page, what other presentational techniques would help make a page stand out? Leave your answer on my Facebook Page. I’d love to hear what creative ways you can make your page stand out.