0115 964 8205

The internet is built on content, and at the heart of nearly every website page lies HyperText Markup Language (HTML). HTML is the standard markup language used to structure and display content on the web. Whether you’re creating a personal log, a business website, an online portfolio or a new portal. Understanding how to write content using HTML is an essential skill. 

Unlike word processors, which focus primarily on formatting, HTML will organise content by defining both its structure and meaning. Properly written HTML can do a number of things, including improving readability, enhancing accessibility, boosting search engine optimisation (SEO) and increasing overall user experience (UX). In this article, we’re going to tell you how to use HTML to write and craft the perfect piece of content for your site. So, let’s get into it, shall we?

 

What is HTML?

HTML (HyperText Markup Language) is a markup language that’s used to create and structure website pages. It tells website browsers how to display text, images, links, lists and other elements on a web page. HTML uses elements, commonly called tags, enclosed within angle brackets (< >) to define various parts of a website page. Here’s a quick example before we go into things in more detail:

 

  • <h1> – this defines a main heading
  • <p> – this defines a paragraph

 

Browsers will interpret these tags and render the content appropriately. To understand how this works and how to do it yourself, we’re going to need to know more about HTML structure. 

Let’s understand the structure of an HTML document

Every HTML page will follow a standard structure. That standard structure is usually something along the lines of:

 

<!DOCTYPE html>

<html>

<head>

            <title>My First Web Page</title>

</head>

<body>

 

            <h1>Welcome to My Website</h1>

            <p>This is a sample paragraph.</p>

 

</body>

</html>

 

Let’s take a closer look at everything else you need to know about the structure of an HTML document:

 

An explanation of key components

  • <!DOCTYPE html> – declares that the document uses HTML5
  • <html> – the root element that contains the entire webpage
  • <head> – contains metadata, such as: page titles, character encoding, CSS links and meta descriptions
  • <title> – defines the text displayed in the browser tab
  • <body> – contains all visible webpage content

 

Writing headings in HTML: how to do it & practices to adopt

Headings organise content and improve readability, so they’re necessary in every sense of the word if you want a chance of appearing as high up in the search engine results pages (SERPs) as possible. HTML provides six heading levels:

  1. <h1>Main Title</h1>
  2. <h2>Section Heading</h2>
  3. <h3>Subsection Heading</h3>
  4. <h4>Smaller Heading</h4>
  5. <h5>Minor Heading</h5>
  6. <h6>Smallest Heading</h6>

When it comes to using headings in HTML, there are some pointers to make sure it’s done properly. Some tips include:

  • Using only one <h1> per page whenever possible
  • Arranging headings hierarchically
  • Avoiding skipping heading levels unnecessarily
  • Making headings descriptive and relevant 

Here’s an example:

<h1>How to Grow Tomatoes</h1>

<h2>Choosing the Right Soil</h2>

<h2>Watering Requirements</h2>

<h3>How Often to Water</h3>

 

Creating paragraphs

Paragraphs are created using the <p> tag. For example:

 

<p>HTML allows web developers to structure content clearly and efficiently.</p>

<p>Well-structured content improves both the user experience and overall SEO performance.</p>

 

Typically, browsers will automatically add spacing between paragraphs, so you won’t have to worry too much about that bit when you come to write yourself. 

 

Formatting text

HTML offers several tags for emphasising or formatting text. There’s bold text, italic text, underlined text, highlighted text, small text, deleted text and inserted text. On top of this, HTML can also be used to create lists, including both ordered and unordered lists. Let’s take a look in more detail.

To make text bold:

 

<strong>This text is important.</strong>

 

Or

 

<b>This text is bold.</b>

 

For italic text:

 

<em>This text is emphasised.</em>

 

Or

 

<i>This text appears italicised.</i>

 

To underline text:

 

<u>Underlined text.</u>

 

To highlight text:

 

<mark>Highlighted content.</mark>

 

To make text small:

 

<small>Small print information.<small>

 

Deleted and inserted text:

 

<del>Old price: £50</del>

<ins>New price: £40</ins>

 

To create an unordered list (bullet points):

 

 <ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

 

To make an ordered list (numbered):

 

<ol>

<li>Create a document</li>

<li>Add content</li>

<li>Save the file</li>

</ol>

 

Adding hyperlinks

Links connect webpages and resources. 

Syntax:

 

<a href=”https://example.com”>Visit Our Website</a>

 

An example of this would be:

 

<a href=”https://www.exaple.com”>

            Learn More About HTML

</>

 

You can also open links in a new tab using HTML:

 

<a href=”https://example.com” target=”_blank”>

            Open Website

<a/>

 

Inserting images

Images enrich webpage content. Basic syntax would be:

 

<img scr=“mountain.jpg”

            alt=“Snow-covered mountain landscape”>

 

Important attributes

  • src specifies the image location
  • alt provides alternative text for accessibility and SEO

 

Line breaks & horizontal rules

You can use HTML to add line breaks and horizontal rules. 

Line breaks:

Use the <br> rule here.

An example of this would be:

 

<p>

First line.<br>

Second line.

</p>

 

Horizontal rules:

Use the <hr> rule here.

An example of this would be:

 

<h2>Chapter One</h2>

<p>Introduction text.</p>

<hr>

<h2>Chapter Two</h2>

 

Organising content with semantic HTML

Semantic HTML gives meaning to content. Examples of this include:

  • <header>
  • <nav>
  • <main>
  • <section>
  • <article>
  • <aside>
  • <footer>

 

Here’s an example for reference:

 

<header>

            <h1>Travel Blog</h1>

</header>

<nav>

            <a href=“#”>Home</a>

            <a href=“#”>Destinations</a>

</nav>

<main>

            <article>

                        <h2>Exploring Paris</h2>

                        <p>Paris offers incredible culture and history.</p>

            </article>

</main>

<footer>

            <p>Copyright 2026</p>

</footer>

 

Writing tables

Tables are useful when it comes to website structure, as it helps to display information in an easy-to-read and understand format. But how can you make one using HTML? Here’s an example:

 

<table border=“1”>

<tr>

            <th>Language</th>

            <th>Difficulty</th>

</tr>

<tr>

            <td>HTML</td>

            <td>Beginner</td>

</tr>

</table>

 

Tables should only be used for tabular data and not for the actual page layout.

 

Adding comments

Comments will help document code. Something to note, however, is that comments are not displayed in browsers.

 

<! – – Main heading starts here – – >

<h1>Welcome</h1>

<! – – End of introduction – – >

 

Creating forms for user input

Forms are helpful for a number of reasons. Usually, it’s because a business needs to collect information from users. An example of this would be:

 

<form>

<label>Name:</label>

<input type=“text”>

<label>Email:</label>

<input type=“email”>

<input type=“submit” value=“Submit”>

</form>

 

Common input types will include things like:

  • Text
  • Email
  • Password
  • Checkbox
  • Radio
  • Date
  • File
  • Submit

HTML: best practices

Writing HTML may seem like a simple and easy task now that you know how it’s done. But there are still some good practices that you should be aware of so that it’s written correctly and makes sense when translated to the website. Let’s have a closer look:

 

Use semantic elements

Choose meaningful tags instead of generic containers whenever possible. This means using:

  • <article>
  • <section>
  • <header>

Do this instead of excessive use of:

  • <div>

 

Keep content well-structured

Use headings and paragraphs logically when writing HTML.

 

Prioritise accessibility

When it comes to HTML and accessibility, you should make sure that you’re always adding alt text to images, using descriptive link text and maintaining proper heading hierarchy.

 

Write clean & intended code

Writing clean and intended code looks something like this:

 

<section>

            <h2>Services</h2>

            <p>We provide website design services.</p>

</section>

 

Proper indentation will help to improve maintainability and keep track of how your text, website pages, and content are structured.

 

Separate content from presentation

Use HTML for structure and CSS for styling. This is why you should avoid:

 

<font colour=“red”>Text</font>

 

Instead of the above, you should use:

 

<p class=“important”>Text</p>

 

Validate HTML

Use HTML validators to detect errors and ensure standards compliance. This will ensure that the HTML you’re writing translates properly on site.  

 

Mistakes to avoid when writing HTML

Writing HTML might seem straightforward enough, now that you have the tools and knowledge to be able to do it yourself, but it’s not always as simple as it may now seem. To stop your HTML from going wrong, there are some mistakes you should avoid, and they include the following:

  • Missing closing tags
  • Improper use of nesting elements
  • Using multiple <h1> tags unnecessarily
  • Forgetting to use alt attributes
  • Using tables for page layout
  • Excessive use of <br> for spacing
  • Ignoring semantic HTML

An example of incorrect HTML would be:

 

<p><strong>This is wrong. </p></strong>

 

The correct form of this same example would be:

 

<p><strong>THis is correct.</strong></P>

 

 

Kumo is pleased to provide a wide range of digital marketing services, including SEO, PPC, content creation, website design and more. Our team of dedicated experts are able to propel your business into the spotlight and set you apart from your competitors. If you’d like further information about how we can help you today, get in touch with a member of our friendly, specialist team – we’re always happy to hear from you.

Share

Author Biography

Lorna

As an experienced Copywriter, Lorna enjoys creating varied content for an abundance of different industries and sectors. From detailed, informative articles to creative infographics, she's always looking to inject originality into the work she produces. When she isn't working, Lorna runs her own lifestyle blog, plays the guitar and loves to take part in charity runs.