Dan Birlew

Las Vegas Web Developer, Designer, Programmer, and Author

HTML Blackboard

Common HTML Elements

Posted January 2nd, 2014 at 8:00am by Dan Birlew in HTML. Comments Off on Common HTML Elements

In our last lesson I spoke about HTML page creation and required tags. This time we’re going to talk about frequently used webpage elements. Here is a basic page structure so far, from the last tutorial:


<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>My First Page</h1>
<p>This is my first HTML page. How exciting!</p>
</body>
</html>

Tags are used to format elements. The text contained between each opening and closing tags is referred to as the element. Therefore the text “My First Page” is the element of the <title> tags, and is also the element of the <h1> tags. But when referring to the element between the <title> tags, we would call that text the <title> element, just as we’d refer to the element between the <h1> tags as the “header one” element or the <h1> element.

Aside, note that it’s a good idea for the <title> and the <h1> to have the same text, as it eases the concerns of search engine crawlers regarding the validity of page information. This is part of what’s referred to as Search Engine Optimization or SEO. We’ll get into that more later.

Header Tags

There are six types of header tags available for formatting web documents. The lower the number, the higher the priority:


<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

The <h1> tag should be used sparingly, to identify the absolute most important pieces of information such as the website’s name or the page title.

Second level <h2> headers should be used to break up long text into smaller sections, making it easier to read. Each <h2> tells the reader to take a short breath before continuing to read, and also indicates a change in topic. Each time your topic changes, insert an <h2> to indicate this to your reader beforehand for a more pleasurable reading experience. (It is also possible to use these as navigation anchors on your page, so that you can refer someone to a specific portion of an article just by sharing the link. We’ll get into that when we talk about ID attributes.)

Third level <h3> headers should be used to identify less important information, such as tables, lists, forms, etc.

Regarding <h4> to <h6>, you will rarely use these. However if you do write a webpage document that requires more than 6 headers, consider reorganizing your content, perhaps splitting it into multiple pages.

Paragraphs

The <p> element on the page identifies it as a paragraph, or a body of text. Paragraph text can all be written on a single line or multiple lines, the browser will ignore the extra spaces:


<p>This is a paragraph. It consists of several sentences. A good rule of thumb in
writing is that a paragraph should have at least three sentences, also known as the
"rule of threes."</p>
<p>This is also a paragraph. 
It is broken into lines so that it can be more easily read in the editor.
But the browser doesn't show the line breaks.</p>

This is what the output of these two elements looks like in a browser:

This is a paragraph. It consists of several sentences. A good rule of thumb in writing is that a paragraph should have at least three sentences, also known as the “rule of threes.”

This is also a paragraph. It is broken into lines so that it can be more easily read in the editor. But the browser doesn’t show the line breaks.

Line Breaks

The <br> tag inserts a single line break into any text:


<h1>Header With <br>Line Break</h1>
<p>This is a paragraph with a <br>line break.</p>

Notice that the <br> tag does not require a closing tag, it can be inserted as a single instance.

Horizontal Rules

The <hr> tag inserts a horizontal rule or a thick line between sections, indicating a thematic break in the topic. Horizontal rules should be used sparingly, such as when describing separate but related topics:


<p>This is the content regarding the first topic.</p>
<hr>
<p>This content resumes the narrative with a different topic, tone, or pace than the
first topic.</p>

Now here’s what all of the elements above look like in a browser, scroll down to see the whole page or click here to view in another window:

Next time I’ll discuss attributes of HTML tags.

Comments are closed.