Michelle Ndiangui
How to markup text in HTML

How to markup text in HTML

Michelle Ndiangui's photo
Michelle Ndiangui
·

4 min read

Table of contents

Websites are mainly made up of text and how it is marked up is important. In this blog, we will learn the best practices when marking up text content

Heading Elements

Headings break up our content and give our content hierarchy. HTML allows us to add six heading levels which vary in importance. They look different in size and boldness but this can be changed using CSS. Ensure you are not using a heading element to make text bold

h1 - main heading

H2 - subheadings for the main

H3 - subheadings for the h2

H4 - subheadings for the h3

H5 - subheadings for the h4

H6 - subheadings for the h5

<h1>Most Important Heading</h1>
<h2>Important Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Least Important Heading</h6>

Paragraph Elements

Paragraphs are wrapped in the p opening and closing tags. The browser displays them in a new line and adds space between them by default.

For example,

<p>Hey there, I’m learning how to make websites and I’m having so much fun. This is such a fulfilling journey and I love dedicating my free time to it</p>

<p>HTML is fun but I’m eager to learn CSS so that I can add colors, fonts and cool animations to my websites</p>

Semantic Markups

Semantic Markups allow us to add meaning to our content. They allow us to give meaning to abbreviations, emphasize text, annotate quotations and many more

Bold and Italic

You can make text bold or italic using HTML. I would rather use CSS for styling but this is a good alternative when you’re highlighting keywords.

<b></b> - used to make text bold

According to the W3C documentation, the b element makes the content important without changing the tone of the text. The b element is used to draw the user's attention. It should be used for keywords, product names, action verbs or any important words.

<i></i> - used to make text italic

The <i> element is used for content that should have a change of tone or mood because it is a different quality of the text. For example, technical terms, titles, a thought or a phrase from another language,

E.g.,

<p>I’m the best<b> web developer</b> in <i>Kwihota</i>.</p>

<strong></strong> - used to add importance, urgency and seriousness. The content is in bold.

  • Importance - It is added to headings, captions or paragraphs to add importance over all the other content

  • Urgency - it can be added to content the user needs to see first

  • Seriousness - can be added to a warning or caution notice

<p>Sale!<strong>Enjoy a 50% discount sitewide</strong></p>

<em></em> - used to emphasize content and change its tone. The content is usually italicized.

<p>This is a <em>digital</em> product</p>

Line Breaks and Horizontal Rules

White space is important in your website as it makes your content more readable. We can add white space in our paragraphs using <br />. To separate sections we can add a horizontal rule by adding <hr />

Quotations

Quotations are good when you would like to directly quote an idea someone came up with and it’s also good for search engines. You can add a quotation in two ways; as a paragraph and inline.

To add a quotation as a paragraph we use:

<blockquote>

<p>Your Quote Goes Here</p>

</blockquote>

A blockquote is usually indented without quotation marks.

To add a quote inline, we use:

<p>Your content <q>Your Quote</q> Continuation of your content </p>

Citations

To add a book, publication, research paper or any other document as a citation use:

<cite></cite>

Do not use this tag for authors

Contact Information

To add your contact details such as email, phone number, physical address and social media, you can use:

<address></address>

The contact information is italicized.

Text Markup Example

We will be creating a website using the elements from this blog. We are using the HTML boilerplate we discussed in the previous blog.

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Text Examples</title>

    </head>

    <body>

        <h1>Learning HTML</h1>

<!-- Adding a horizontal rule to separate the content -->

        <hr />

<!-- Adding a break inside the paragraph to make it more readable -->

        <p>Hey there, I'm learning HTML. So far I've covered the basic syntax and I understand how it works and I've already created my first website.<br/>In today's lesson I'm covering <b>texts</b> in HTML</p>

<!-- cite the book not the author -->

        <p>I'm using <cite>HTML and CSS: Design and Build Websites</cite> by <i>Jon Duckett</i> as my reference. I'm learning so much from the book and supplementing with the documentation.</p>

        <p>Remember to take care of yourselves and hydrate. Oscar Wilde said <q>Work is the refuge of those who have nothing better to do.</q> So don't learn and set all your attention to coding.</p>

        <address>

            <h3>Fast Learner</h3>

            <a href="mailto:luckiestgirl@universe.com">

            luckiestgirl@universe.com

            </a>

            <p>444 Best Web Developer Street</p>

        </address>

    </body>

</html>

While working on the website, notice how the different elements look in the same browser without styling.

Your Task

Create a website based on your favorite book and use as many tags as you can.

HTML5HTMLHTML tags