Even though modern websites are generally built with user-friendly interfaces, it's useful to know some basic HTML. If you know the following 17 HTML example tags (and a few extras), you'll be able to create a basic webpage from scratch or tweak the code created by an app like WordPress.

We've provided simple HTML code examples with output for most of the tags. If you want to test them for yourself, copy the sample HTML code into your own document. You can play around with them in a text editor and load up your file in a browser to see what your changes do. Let's get started!

1. <!DOCTYPE html>

You'll need this tag at the beginning of every HTML document you create. It ensures that the web browser knows that it's reading HTML and that it expects HTML5, the latest version. Even though this isn't actually an HTML tag, it's still an important one to know.

2. <html>

This is another tag that tells a browser that it's reading HTML. The <html> tag goes straight after the DOCTYPE tag, and you close it with a </html> tag right at the end of your file. Everything else in your document goes between these tags.

3. <head>

The <head> tag starts the header section of your file. The stuff that goes in here doesn't appear on your webpage. Instead, it contains metadata for search engines and info for your browser. If you want ads on your site, Google's AdSense code goes here, too.

For basic pages, the <head> tag will contain your title, and that's about it. But there are a few other things that you can include, which we'll go over in a moment.

4. <title>

html title tag

This tag sets the title of your page. All you need to do is put your title in the tag and close it, like this (we've included the header tags, as well, to show the context):

        <head>
<title>My Website</title>
</head>

That's the name that will be displayed as the tab title when it's opened in a browser.

5. <meta>

Like the title tag, metadata is put in the header area of your page. Metadata is primarily used by search engines and is information about what's on your page. There are several meta fields, but these are some of the most commonly used:

  • description: A basic description of your page.
  • keywords: A selection of keywords applicable to your page (although these are generally ignored by search engines now).
  • author: The author of your page.
  • viewport: A tag for ensuring that your page looks good on all devices.

Here's an example that might apply to this page:

        <meta name="description" content="A basic HTML tutorial">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="MUO">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

The "viewport" tag should always have "width=device-width, initial-scale=1.0" as the content to make sure your page displays well on mobile and desktop devices.

6. <body>

After you close the header section, you get to the body. You open this with the <body> tag, and close it with the </body> tag. That goes right at the end of your file, just before the </html> tag.

All the content of your webpage goes in between these body tags. It's as simple as it sounds:

        <body>
Everything you want displayed on your page.
</body>

7. <h1> (and Other Header Tags)

The <h1> tag defines a level-one header on your page. This will usually be the title, and there will ideally only be one on each page.

<h2> defines level-two headers such as section headers, <h3> level-three sub-headers, and so on, down to <h6>. As an example, the names of the tags in this article are level-two headers.

        <h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>

Result:

html header tags

As you can see, they get smaller at each level. Search engines rank them in order of importance.

8. <p>

The paragraph tag starts a new paragraph. This usually inserts two line breaks.

Look, for example, at the break between the previous line and this one. That's what a <p> tag will do.

        <p>Your first paragraph.</p>
<p>Your second paragraph.</p>

Result:

Your first paragraph.

Your second paragraph.

You can also use CSS styles in your paragraph tags, like this one which changes the text size:

        <p style="font-size: 150%;">This is 50% larger text.</p>
    

Result:

make text larger in html

9. <br>

The line break tag inserts a single line break, with no space between the lines:

        <p>The first line.

The second line (close to the first one).</p>

Result:

line break in html

Working in a similar way is the <hr> tag. This draws a horizontal line on your page and is good for separating sections of text.

10. <strong>

This tag defines important text. In general, that means it will be bold, although it is possible to use CSS to make <strong> text display differently.

However, by default, you can safely use <strong> to bold text.

        <strong>Very important things you want to say.</strong>
    

Result:

Very important things you want to say.

If you're familiar with the <b> tag for bolding text, it still works, but is no longer recommended. You should always use the <strong> tag instead.

11. <em>

Like <b> and <strong>, <em> and <i> are related. The <em> tag identifies emphasized text, which generally means it will get italicized. Again, there's the possibility that CSS will make emphasized text display differently.

        <em>An emphasized line.</em>
    

Result:

An emphasized line.

The <i> tag still works, but again, it isn't recommended, and it's possible that it will be deprecated in future versions of HTML.

12. <a>

The <a>, or anchor, tag lets you create links. A simple link looks like this:

        <a href="https://www.muo.com/>Go to MUO</a>
    

Result:

Go to MUO

The "href" attribute identifies the destination of the link. In most cases, this will be another website. It could also be a file, like an image or a PDF.

Other useful attributes include "target" and "title." The target attribute is almost exclusively used to open a link in a new tab or window, like this:

        <a href="https://www.muo.com/" target="_blank">Go to MUO in a new tab</a>
    

Result:

Go to MUO in a new tab

The "title" attribute creates a tooltip. Hover over the link below to see how it works:

        <a href="https://www.muo.com/" title="This is a tooltip">Hover over this to see the tooltip</a>
    

Result:

Hover over this to see the tooltip

13. <img>

If you want to embed an image in your page, you'll need to use the image tag. You'll normally use it in conjunction with the "src" attribute. This specifies the source of the image, like this:

        <img src="wp-content/uploads/2019/04/sunlit-birds.jpg">
    

Result:

an example of the img html tag in use

Other attributes are available, such as "height," "width," and "alt." Here's how that might look:

        <img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="the name of your image">
    

As you might expect, the "height" and "width" attributes set the height and width of the image. In general, it's a good idea to only set one of them so the image scales correctly. If you use both, you could end up with a stretched or squished image.

The "alt" tag tells the browser what text to display if the image can't be displayed and should be included with any image. It's an accessibility feature, and screen readers will read the alt text aloud.

To go a step further, and to improve performance on your site, take a look at our guide on how you can create responsive images in HTML.

14. <ol>

The ordered list tag lets you create, by default, a numbered list. Each item in the list needs a list item tag (<li>), so the code for your list will look like this:

        <ol>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ol>

Result:

  1. First thing
  2. Second thing
  3. Third thing

In HTML5, you can use <ol reversed> to reverse the order of the numbers. And you can set the starting value with the "start" attribute.

The "type" attribute lets you tell the browser which type of symbol to use for the list items, including numbers, letters, and Roman numerals. It can be set to "1," "A," "a," "I," or "i," setting the list to display with the indicated symbol like this:

        <ol type="A">
    

15. <ul>

The unordered list is much simpler than its ordered counterpart. It's simply a bulleted list.

        <ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

Result:

  • First item
  • Second item
  • Third item

Unordered lists also have the "type" attribute, and you can set it to "disc," "circle," or "square."

16. <table>

While you shouldn't use tables for formatting, there are plenty of times when you'll want to use rows and columns to segment information on your page. Several tags are needed to get a table to work. Here's the sample HTML code:

        <table>
<tbody>
<tr>
<th>1st column</th>
<th>2nd column</th>
</tr>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tbody>
</table>

The <table> and </table> tags specify the start and end of the table. The <tbody> tag contains all the table content.

Each row of the table is enclosed in a <tr> tag. Each cell within each row is wrapped in either <th> tags for column headers, or <td> tags for column data. You need one of these for each column on each row.

Result:

1st column

2nd column

Row 1, column 1

Row 1, column 2

Row 2, column 1

Row 2, column 2

17. <blockquote>

When you're quoting another website or person and you want to set the quote apart from the rest of your document, use the blockquote tag. All you need to do is enclose the quote in opening and closing blockquote tags:

        <blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote>
    

Result:

The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

The exact formatting that's used may depend on the browser you're using or the CSS of your site. But the tag remains the same.

Master These HTML Code Samples and Examples

With these 17 HTML coding examples, you should be able to create a simple website. You can test them all out right now in an online text editor to get a feel for how they work.

This is only the start of what you can do with simple HTML programs. Once you've mastered the basics, you can start adding other features and cool effects to make your pages look more professional.