This article is the first of a six part series where I will discuss the basics of coding in HTML. So stay tuned!
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
Take a look at the image below. See how much of it you can read before your eyes begin to blur.
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.
And here is how the page looks with the code.
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:
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.
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.