Posts Tagged ‘Headings’

What is HTML?

HTML is an acronym for HyperText Markup Language, the basic publishing language of the Internet.

Every computer document needs a way to be read and understood by a computer program, for example Excel spreadsheets are stored in a special file with the extension XLS which  stores all the rows, columns, headers, footers, special cells, math equations etc for Excel to read and understand. Likewise, the HTML file format stores everything an Internet capable device needs to know to read and interpret a web document such as a web page.

There are actually a number of types of HTML, the first was created by Tim Berners-Lee in 1980 and composed of 22 tags, these special tags allowed users to define the paragraphs and other structural elements of their document as well as some basic elements for leaving comments and document items such as the title.

Although it’s been almost 30 years since the first standard was published, most of the basic elements of HTML are still used. For example, to give your document a title we still use the <title>My Title</title> tag combination and to form a paragraph, the <p>This is my paragraph</p> tags are used. In a lot of ways, the simplicity of HTML is what has allowed it to be so expandable.

You may have noticed that the examples above use an opening <p> and closing </p> tag to designate objects in the HTML code, this is fairly common and easy to understand principle. Essentially every element on a page should have both an opening and a closing tag to show where it begins and ends.

Common examples of HTML block tags are:

  1. The paragraph – <p>
  2. Unordered (Bullet) Lists – <ul>
  3. Ordered (Numbered) Lists – <ol>
  4. Headings (there are several) – <h1> … <h6>

While the above tags allow us to layout a basic HTML document such as a resume, it’s important to note that there are some additional basic formating tags needed as well. For example, if you would like to bold a word, you will need to use the <b>bold</b> tags.

Speaking of which, since HTML has evolved a long way we can sometimes achieve the same effect with different tags. For example, <b>bold</b> and <strong>strong</strong> have the same effect in most web browsers. Why the difference? The word bold refers to a method of formating, which implies the purpose of HTML is to affect appearance, while strong implies that the selected text be more significant than the surrounding text without assuming design elements.

Let’s look at another example, the HTML formating tag <i>italics</i> forces a web browser to display text as italics but <em>emphasis</em> has the same default effect. While they both force the document to appear the same (with italic text) this is not always the desired effect. Perhaps we would like a word to appear darker or lighter than the words around it when it requires emphasis. So a word that we would assume to be italics is in fact displayed as bold, depending on the formating instructions of the designer.

To format HTML text, we have several possibilities:

  1. bold / strong – <b> <strong>
  2. italics / emphasis – <i> <em>
  3. pre formatted – <pre>

As time moved forward, many additional tags and functions became supported by HTML as some tags became depreciated, others found themselves being introduced.

The Basics of Hotel Website Marketing

Fresh Post at Getaway Graphics: The Basics of Hotel Website Marketing

These days every hotel needs to be keenly aware of how to market themselves online and the first rule is keywords. If you don’t know the first thing about keywords, don’t worry you’re not alone and that’s your key strength because very few people in the hospitality industry are taking the time to use effective keywords in their online marketing.

Read More

How to use the heading tag to improve search engine listings

In HTML there are few tags as important as the <h1> tag. It is literally the heading for your page and when we talk about how to structure a document, we’re taught that the <h1> tag should represent the title of the document.

Common Mistakes

Having more than one H1 per page.

A web document can have only one title, and that’s what the H1 tag is meant to be. Instead of having more than one, use the <h2> tag and stylize it with CSS.

Using the H1 tag because you like the font size

The H1 tag is big because it’s meant to be important not because people think it’s pretty. As will all HTML elements, you can use CSS to change the look and feel of tags easily. For example:

[source lang="html"]
<h1>Test Title</h1>
<h2>Test Title Two</h2>
<strong>Test Strong</strong>
[/source]

 

[source lang="css"]
h1,h2,strong {
font-size: 100px;
font-weight: normal;
}
[/source]

Using the code above will make all H1,H2 and strong (bold) tags throughout a website look identical.

 

Using the same H1 throughout the site

The purpose of the H1 tag is … as I’ve said to represent the content of a specific page so it’s important that the contents of your heading are unique for each page.

Using the H1 for the wrong content, or not using it at all

If the purpose of a heading tag is to highlight the heading (or title) of the document, then not including one at all will result in search engines being unable to properly understand your content.

Using Heading Tags to separate content

Let’s take a look for example at a simple piece of Lorem Ipsum to see how search engines may see your content with (and without) proper headings.

Example One : No Formating

As you can see from this example, it’s nearly impossible to determine what text is important and which is worthless in this post.

[source lang="html"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien nulla, malesuada eu, tincidunt eu, dapibus sed, risus. Curabitur rutrum velit non enim. Duis congue, neque non pharetra blandit, est lectus aliquet purus, id dapibus augue lacus sed sem. Aliquam erat volutpat. Ut hendrerit sapien vitae lacus. Duis libero lectus, varius sit amet, auctor ut, mattis id, magna. In hac habitasse platea dictumst. Aliquam libero neque, interdum id, dignissim id, fermentum eget, tellus. Aliquam eget lorem quis nibh fermentum egestas. Duis id ante sed ligula egestas malesuada. Maecenas pharetra mollis ipsum. Vestibulum dignissim, turpis vel luctus facilisis, dolor mi gravida nisi, ac suscipit enim ipsum vel elit. Aenean mauris purus, convallis ac, pellentesque suscipit, varius in, lacus. Morbi blandit odio quis libero. Nullam gravida rhoncus massa. Fusce ullamcorper. Phasellus sapien nibh, consequat eu, semper in, pretium in, dui. Vivamus scelerisque.
[/source]

Example Two: Simple Text Formating

Now, with paragraph breaks, we can at least start to understand the format but not what is important.

[source lang="html"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed sapien nulla, malesuada eu, tincidunt eu, dapibus sed, risus. Curabitur rutrum velit non enim. Duis congue, neque non pharetra blandit, est lectus aliquet purus, id dapibus augue lacus sed sem. Aliquam erat volutpat. Ut hendrerit sapien vitae lacus. Duis libero lectus, varius sit amet, auctor ut, mattis id, magna. In hac habitasse platea dictumst.

Aliquam libero neque, interdum id, dignissim id, fermentum eget, tellus.

Aliquam eget lorem quis nibh fermentum egestas. Duis id ante sed ligula egestas malesuada. Maecenas pharetra mollis ipsum. Vestibulum dignissim, turpis vel luctus facilisis, dolor mi gravida nisi, ac suscipit enim ipsum vel elit. Aenean mauris purus, convallis ac, pellentesque suscipit, varius in, lacus. Morbi blandit odio quis libero. Nullam gravida rhoncus massa. Fusce ullamcorper. Phasellus sapien nibh, consequat eu, semper in, pretium in, dui. Vivamus scelerisque.
[/source]

Example Three: Formating with Headings

Using both paragraph formating and headers:

[source lang="html"]
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>

Sed sapien nulla, malesuada eu, tincidunt eu, dapibus sed, risus. Curabitur rutrum velit non enim. Duis congue, neque non pharetra blandit, est lectus aliquet purus, id dapibus augue lacus sed sem. Aliquam erat volutpat. Ut hendrerit sapien vitae lacus. Duis libero lectus, varius sit amet, auctor ut, mattis id, magna. In hac habitasse platea dictumst.

<h2>Aliquam libero neque, interdum id, dignissim id, fermentum eget, tellus.</h2>

Aliquam eget lorem quis nibh fermentum egestas. Duis id ante sed ligula egestas malesuada. Maecenas pharetra mollis ipsum. Vestibulum dignissim, turpis vel luctus facilisis, dolor mi gravida nisi, ac suscipit enim ipsum vel elit. Aenean mauris purus, convallis ac, pellentesque suscipit, varius in, lacus. Morbi blandit odio quis libero. Nullam gravida rhoncus massa. Fusce ullamcorper. Phasellus sapien nibh, consequat eu, semper in, pretium in, dui. Vivamus scelerisque.
[/source]

As you can see, using the heading tag properly in example three allows us to clearly see a separation of content and allows robots such as Google to properly crawl and identify the critical areas of our websites.

You may also care to watch the video Does it matter what order you put header tags in?