Home  Privacy

Ten More HTML Tags to Play With

So far, we have created a simple HTML5 page that displayed the text Hello World! – which was done with a single line of code:

<p>Hello World!</p>

The rest of the HTML was boilerplate code that we extracted into a template for future use.
Thus tutorial expands your HTML vocabulary with ten new tags.

So far, the only tag you have used for displaying text on the screen is the <p> tag. This is also known as the paragraph tag because it marks a paragraph of text.
HTML5 tags are case-insensitive, so it doesn’t matter if you write them in UPPERCASE, lowercase, or MiXeDcAsE.
Most developers write HTML tags in lowercase, however, there are some who prefer UPPERCASE because it makes the tags stand out more.

Contents

  1. h1 – h6
  2. strong
  3. em
  4. i
  5. mark
  6. Summary
  7. Playing Around
  8. References

h1 – h6

The first six tags are known as heading tags. They are used to mark a heading for a block of text (think of it as the start of a section or subsection). They indicate the hierarchical structure of your document.
<h1> has the highest rank and <h6> has the lowest.
Each <tag> must have a corresponding closing </tag> tag.
Consider the following code:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Testing Header Tags</title>
    <meta charset="utf-8"  />
  </head>
  <body>

    <h1>Header 1</h1>
      <p>Some h1 Text.</p>
    <h2>Header 2</h2>
      <p>Some h2 text.</p>
    <h3>Header 1</h3>
      <p>Some h3 Text.</p>
    <h4>Header 2</h4>
      <p>Some h4 text.</p>
    <h5>Header 1</h5>
      <p>Some h5 Text.</p>
    <h6>Header 2</h6>
      <p>Some h6 text.</p>

  </body>
</html>

If you create a webpage using the code above, you will notice the headers are displayed in different font sizes and weights according to their importance, while the text all remains the same.
Since the <h1> to <h6 tags provide hierarchical structure to the content on the page, the general guidance for their use are:

  • <h1> should be used for the title on the page.
  • <h2> should be used for individual sections on the page.
  • <h3>– <h6> should for increasing subsections under <h2>.

Tools can use these tags to extract an outline of the content of your document – for example, to generate a table of contents.
The code above has the following structure:

  1. Header 1
    1. Header 2
      1. Header 3
        1. Header 4
          1. Header 5
            1. Header 6

The tutorial What Do You Need to Start Front-End Web Development? has the following heading structure:

  1. What Do You Need to Start Front-End Web Development? <h1>
    1. Contents <h2>
    2. Skills <h2>
    3. Tools <h2>
      1. Web Browser <h3>
      2. Text Editor <h3>

You can have more than one <h1> tag on your page, but that might suggest that each <h1> should have its own page.1

strong

The <strong> tag is used to indicate content that is important, serious, or urgent.
Each <strong> tag must have a corresponding closing </strong> tag.
The general guidance for use of this tag are:

  • Important: parts of the document that matter more than other parts
  • Serious: parts of a document that show a warning or caution notice
  • Urgent: parts of the document that the user should notice sooner than other parts of the document

Consider the code:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Testing The Strong Tag</title>
    <meta charset="utf-8"  />
  </head>
  <body>

    <p><strong>Lorem ipsum dolor sit amet</strong>,
      consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua.</p>

    <p><strong>Odio ut enim blandit volutpat maecenas.
    </strong> Accumsan lacus vel facilisis volutpat est
    velit egestas dui. Eleifend quam adipiscing vitae
    proin sagittis. </p>

  </body>
</html>

If you create a webpage using the code above, you will notice the first part of both paragraphs is rendered in bold text.
There is an HTML tag <b> that is for bold text. In general, you should avoid using this tag because it has no semantic meaning. In other words, using it doesn’t add any information to the document2 – it simply indicates the text should be displayed differently, but is not significant in any other way.

em

The <em> tag is used to indicate emphasis on part of a document, but not importance (for which you should use the <strong> tag).
Each <em> tag must have a corresponding closing </em> tag.
Consider the code:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Testing The Emphasis Tag</title>
    <meta charset="utf-8"  />
  </head>
  <body>

    <p><em>Lorem ipsum dolor sit amet</em>, consectetur
      adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua.</p>

    <p><em>Odio ut enim blandit volutpat maecenas.</em>
      Accumsan lacus vel facilisis volutpat est velit
      egestas dui. Eleifend quam adipiscing vitae proin
      sagittis. </p>

  </body>
</html>

If you create a webpage using the code above, you will notice the first part of both paragraphs is rendered in italic text.
The HTML tag <i> is for italic text and has a slightly different meaning from <em>.3

i

The <i> tag is used to indicate text that is different from the normal flow of the text – for example, a foreign word.4
Each <i> tag must have a corresponding closing </i> tag.
The general guidance for use of this tag are:

  • technical terms: It might surprise you to learn that HTML is more complicated and nuanced than you imagined.
  • foreign language words or phrases: The phrase Veni, vidi, vici comes from Julius Caesar.
  • internal thoughts: The student looked at the course syllabus and smiled. This is going to be easy.

Consider the code:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Testing The Emphasis Tag</title>
    <meta charset="utf-8"  />
  </head>
  <body>

    <p>Webpage developers often use <i>Lorem ipsum</i>
      to flesh out the page with content</p>

    <p><i>Odio ut enim blandit volutpat maecenas.
      Accumsan lacus vel facilisis volutpat est velit
      egestas dui. Eleifend quam adipiscing vitae
      proin sagittis.</i></p>

  </body>
</html>

If you create a webpage using the code above, you will notice Loem ipsum and the second paragraph are rendered in italic text.
The HTML tag <em> is for emphasized text and has a slightly different meaning from <i>.5

mark

The <mark> tag is used to mark or highlight something for reference purposes. In other words, it is used to draw attention to something.
Each <mark> tag must have a corresponding closing </mark> tag.
The general guidance for use of this tag are:

  • Bring attention to something: like a splling mistake
  • Indicate a search string match: searching for text in a document is a common task on the computer, highlighting the matching text is good
  • Bring attention to something relevant: It is important to know the purpose of HTML tags because different HTML tags are used for different purposes. Otherwise you end up using them willy-nilly.

Consider the code:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Testing The Strong Tag</title>
    <meta charset="utf-8"  />
  </head>
  <body>

    <p>“That’s rather a broad idea,” I remarked.</p>

    <p>“One’s ideas must be as broad as Nature if they
      are to interpret Nature,” he answered. “What’s
      the matter? You’re not looking quite yourself.
      This Brixton Road affair has upset you.”</p>

    <p>“To tell the truth, it has,” I said. “I ought to
      be more case-hardened after my Afghan experiences.
      I saw my own comrades hacked to pieces at Maiwand
      without losing my nerve.”</p>

    <p>“I can understand. There is a mystery about this
      which stimulates the imagination; <mark>where
        there is no imagination there is no horror.
      </mark> Have you seen the evening paper?”</p>

    <p>“No.”</p>

  </body>
</html>

If you create a webpage using the code above, you will notice that a portion of the text6 is highlighted.

Summary

Even though the tags introduced in this tutorial affect the way text is rendered (displayed) in a browser, they are used to provide structure and meaning to the content, not appearance. Appearance (styling) should be done using CSS (which will be covered in later tutorials).

  1. Use heading tags to hierarchically structure the contents of your document.
  2. Use <strong> tags to mark important content.
  3. Use <em> tags to emphasize content.
  4. Use <i> tags to mark content that has a different flow or aspect from the surrounding content.
  5. Use <mark> tags to content you want to highlight.

Playing Around

The best way to learn is to play around with what you have learned.
Use the tags introduced in this section – along with the <p> tag – to create some basic webpages with content. They will be very plain pages because there is no styling.7
Some webpage ideas are:

  • your resume (or curriculum vitae)
  • a recipe
  • a collection of recipes (each recipe would be in its own section, so each recipe title would probably start with a <h1> tag)
  • study notes for this series of tutorials.

Only use the tags you learned so far. As this series progresses, we will cover all the tags and their uses. The point, right now, is to reinforce what you have learned.
If you are really stuck. You can go to Project Gutenberg:

  • find a book
  • copy & paste some text from it into your webpage
  • format the paragraphs using <p> tags
  • add a short header before each paragraph (the header should introduce the main point of the paragraph)
  • use the tags to mark up the text. Decide what is important, what needs emphasis, what flows differently from the text around it, and what needs to be highlighted

There are no right or wrong webpages. The point is to practice what you have learned and become comfortable with:

  • writing HTML5 code
  • using the tags you know

As well, try mixing and matching the tags. Can you use combine them? It should be obvious that the <strong>, <em>, <i>, <mark> tags can be used on content inside of <p> tags:

  • can they be used on content inside heading tags?
  • can they be combined?
  • can you have paragraph or heading tags around content inside those tags?

References

  1. Heading Tags
  2. <strong> tag
  3. <em> tag
  4. <i> tag
  5. <mark> tag
  6. <p> tag
  1. The exception to this would be if you are using the <section> and / or <article> tags. These will be covered in a later tutorial.↩
  2. HTML documents might be accessed by (1) people reading the content, (2) visually impaired people listening to the content being read by text-to-speech software, (3) computers trying to extract information. Visual flourishes, should be done using CSS.↩
  3. HTML documents might be accessed by (1) people reading the content, (2) visually impaired people listening to the content being read by text-to-speech software, (3) computers trying to extract information. Visual flourishes, should be done using CSS.↩
  4. In earlier versions of HTML, the <i> tag was used to set the text to italics. In HTML5, the meaning (semantics) has been changed. In HTML5, all styling should be done using CSS. HTML should be used only to provide structure and semantics (meaning) to the content of the document.↩
  5. HTML documents might be accessed by (1) people reading the content, (2) visually impaired people listening to the content being read by text-to-speech software, (3) computers trying to extract information. Visual flourishes, should be done using CSS.↩
  6. The text is taken from the Sherlock Holmes story, “A Study in Scarlett”.↩
  7. Styling is done using CSS and will be covered in later tutorials.↩

Published

Do not republish this article, in whole or in part. You may publish a short excerpt and provide a link back to the original article.