Key Takeaways

  • HTML is essential for writers whose articles are published online because websites use HTML to present content visually and structure it for search engine crawlers.
  • Heading tags, bold and italics tags, and paragraph tags are key HTML tags that writers should know to have complete control over the formatting and visual appearance of their content.
  • Numbered and bulleted lists, tables, and image tags are useful for organizing information and enhancing the visual appeal of articles, while hyperlinks add context and increase search engine ranking.

Many writers, even among those who cover technology, think they don’t need to know HTML. But if your articles get published online, you need HTML more than you might think.

That’s because websites use HTML to present your content. While many markdown editors, website builders, and content management systems let you edit your articles visually, they still use HTML tags underneath.

So, if you want to take complete control of your output and fine-tune its formatting, these are the fundamental HTML tags you need to know about.

1. Heading Tags

HTML heading tags

Heading tags let you summarize a section, or subsection, of your article. By default, a browser displays them in a larger, bolder font which makes your headings far more distinctive than the rest of your content.

Aside from these visual cues, however, heading tags also give your content structure and hierarchy, making it easier for search engine crawlers to understand the page.

There are six numbered heading tags, with larger numbers representing lower headings. For example, use the <h1> tag to represent the main title of a page, <h2> tags for each section, and <h3> tags for each subsection.

Make sure you use a reasonable structure for your page type and audience. <h5> and <h6> tags may be suitable for highly technical or legal documents, but they can be difficult for the average reader to follow.

On the other hand, headings can break your article into easily digestible chunks. A wall of text can be off-putting for reading online, and many readers will gloss over such content. Heading tags will let your reader relax for a bit—much like a speaker taking a quick break before diving into another topic.

Don’t forget to use a closing tag—e.g., </h1>—to end the heading.

2. Bold, Italics, and Other Text Formatting

formatting tags

Heading tags significantly affect the structure of your page, but other tags target much finer-grained detail. When you want to emphasize just a small part of a sentence, for example, you can use several formatting tags to do so. These tags will change the look of your text without affecting your content’s hierarchy.

Here are some of the most commonly used formatting tags:

  • <b> for bold text.
  • <i> for italicized text.
  • <s> for strikethrough text.

You can use these to emphasize concepts, explain definitions, and mark text as no longer relevant. Much like the heading tag, you need a pair of open/close tags to identify the text they apply to.

Markdown and content management tools will often copy over formatting when you paste text from another app. You can clean it up by removing these tags from the source or by stripping formatting when copying and pasting text in the first place.

3. Paragraphs and Spacing

poem using p and br tags for spacing

Aside from using heading tags to group your text into sections, you can also use the <p> and <br> tags to declare paragraphs or line breaks, respectively.

Many visual editors add these tags automatically as you write—e.g., when you hit enter. However, you can also add them manually to your HTML if you’re writing in a source view.

If you don’t want to create a new paragraph but still need a line break to separate lines of text, use the <br> tag. For example, say you’re writing a poem; you don’t need a <p> tag for every line since it follows the same thought. So, you should use the <br> tag instead.

The <br> tag is one of few tags that doesn’t have a matching close tag, so just use it on its own. This is because it doesn’t have any contents that it affects or describes.

These tags can help you follow design rules for professional-looking documents and websites, allowing your page to look more trustworthy in the eyes of your readers (and search engines).

4. Numbers and Bullets

Numbered and bulleted lists are also useful for organizing content. If you’re presenting a group of individual items, such as a set of ingredients or a series of steps to follow, lists are perfect for the job.

To create a numbered—or “ordered”—list, use the <ol> tag. On the other hand, use the <ul> tag—which stands for unordered list—to create a list with bullet points. Once you’ve chosen the type of list, use the <li> tag—for “list item”—to identify each item within the list.

Here’s some example markup for an ordered list with five items:

        <ol>
     <li>alpha</li>
     <li>bravo</li>
     <li>charlie</li>
     <li>delta</li>
     <li>echo</li>
</ol>

A browser will display this markup something like the following:

ol

If you want to use bullet points instead, simply replace <ol> with <ul> to get a bulleted list.

You can also nest the <ol> and <ul> tags if you have multiple levels of information. For example, let’s say you want to create a list like this:

nested

You can do so with the following markup:

        <ol>
  <li>alpha</li>
  <li>
    bravo
    <ol>
      <li>Hip</li>
      <li>Hip</li>
      <li>Hooray</li>
    </ol>
  </li>
  <li>charlie</li>
  <li>
    delta
    <ul>
      <li>Difference</li>
      <li>River mouth</li>
    </ul>
  </li>
  <li>echo</li>
</ol>

You can nest lists, including lists of different types, to represent more complex structures and organize information so your readers can understand the topic better.

5. Building a Table

While bulleted and numbered lists are a great way of organizing a small amount of information, sometimes you have to work with multiple related pieces of data. When that’s the case, it often makes sense to lay your data out in a table.

First, start with the <table> tag. This will contain all the information you wish to present in the table. Inside it, use the <tr> tag to represent each row. Within each row, use the <td> tag to represent a cell; it stands for “table data.” You can use <th> instead of <td> to represent a table header. Don’t forget to add closing tags for your table, rows, and cells.

Here’s an example table with two columns, four rows, and headers in the first row:

        <table>
     <tr>
          <th>Group 1</th>
          <th>Group 2</th>
     </tr>
     <tr>
          <td>Mark</td>
          <td>Belle</td>
     </tr>
     <tr>
          <td>Ralph</td>
          <td>Shane</td>
     </tr>
     <tr>
          <td>John</td>
          <td>Josie</td>
     </tr>
</table>

This is what the table should look like in your browser:

table-1

You can add as many rows and columns as you like. Just remember that, when building a table using HTML, you’re working on it row by row, not column by column. You can use modern CSS to style your tables with borders, colored rows, and more.

6. Adding Images

Inserting an image in your page is a little different from marking up text content. Since image data isn’t usually represented by text, you’ll need to store it in a separate file, and you’ll need some way of indicating that file’s location alongside a tag.

You can use the <img> tag to insert an image in your document, but you’ll need to use an HTML feature called “attributes” to specify the location of the image file. You can add attributes after the tag name, but before the closing angle bracket. Attributes have a name and a value with an equals sign between them. Use double-quotes around attribute values.

Here’s an example:

        <img alt="tree leaves and branches"
    src="https://images.unsplash.com/photo-1532365673558-f9bb768644e7">

In this case, the “src” attribute (standing for “source”) indicates the URL of the image to include. It can be a relative or absolute URL, which often depends on whether it’s an external image or one on the same server.

Meanwhile, the “alt” attribute stands for “alternate text” and should describe the contents of the image. You should usually include this attribute since it is valuable for screen readers and search engines alike. Anyone—human or machine—who cannot, for any reason, see the original image can benefit from alt text telling them what it contains.

Browsers will replace the <img> tag with the image located at the URL you provide in the src attribute, embedding it in the page like this:

tree and branches

If the file at the src URL is not a valid image, including if it doesn’t exist at all, the browser will typically display a blank rectangle with the alt text inside it.

Finally, one of the distinguishing features of HTML: the hyperlink. Links to other pages on your site, and those on external websites, can add context to the information you’re providing and boost its rank in search engine results.

To add a link, use the <a> tag with an “href” attribute that contains the URL that should be the target of the link. The text (or other content) that you enclose with the <a> tag and its matching </a> will be clickable, so readers can follow the link to change the page they’re viewing.

Here’s an example of link markup in HTML:

        <a href="https://www.makeuseof.com/author/jowi-morales">
 Jowi Morales MUO Page
</a>

Knowing HTML Will Make Your Life Easier

While most markdown editors and content management systems let you work visually, there’s still value in knowing basic HTML.

Understanding how HTML works can let you troubleshoot problems with your content if it doesn’t look quite right. Visual editors rarely cover every aspect of HTML, so your documents can be more expressive and accurate if you know how to edit their markup directly.