17 Simple HTML Code Examples You Can Learn in 10 Minutes
Whatsapp Pinterest

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

I’ve provided examples for most of the tags, but if you want to see them in action, download the linked HTML file at the end of the article. You can play with it in a text editor and load it up in a browser to see what your changes do.

If you don’t know what tags do exactly, you can take a slight detour and get familiar with the basics of HTML code 5 Steps to Understanding Basic HTML Code 5 Steps to Understanding Basic HTML Code HTML is the backbone of every webpage. If you're a beginner, let us walk you through the basic steps to understanding HTML. Read More first.

1. <!DOCTYPE html>

You’ll need this tag at the beginning of every HTML document you create. It ensures that a 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 a good one to know.

HTML code example
Image Credit: Yurich via Shutterstock

2. <html>

This is another tag that tells a browser that it’s reading HTML. Why do we need both? Who knows? But it’s a good idea to put it in anyway.

And at the end of your document, add a </html> tag.

3. <head>

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>

As you might expect, this defines the title of your page. All you need to do is put your title in the tag and close it, like this (I’ve included the header tags, as well):

<title>My Website</title>

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

html title tag

5. <meta>

Like the title tag, metadata is put in the header area of your page (this metadata, unlike metadata from your mobile devices Metadata - The Information About Your Information Metadata - The Information About Your Information Read More , isn’t sensitive). Metadata is primarily used by search engines, and is — as you might expect — information about the information on your page. There are a number of different 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.
  • 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="Dann Albright">
<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>

The body of your webpage — basically everything other than the title is set inside the body tag. It’s as simple as it sounds:

Everything you want displayed on your page.

7. <h1>

The <h1> tag defines level-one headers on your page. <h2> defines level-two headers, <h3> level-three, 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>


Big and Important Header

Slightly Less Big Header


As you can see, they get smaller at each level.

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>


Your first paragraph.

Your second paragraph.

You can also use CSS styles in your paragraph tags, like this:

<p style="font-size: 120%;">20% larger text</p>


20% larger text

To learn how to use CSS to style your text, check out these HTML and CSS tutorials Learn HTML and CSS with These Step by Step Tutorials Learn HTML and CSS with These Step by Step Tutorials Curious about HTML, CSS, and JavaScript? If you think that you have a knack for learning how to create websites from scratch -- here are a few great step-by-step tutorials worth trying. Read More .

9. <br>

The line break tag inserts a single line break:

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


The first line.
The second line (close to the first one).

Note: You may sometimes see this tag written as <br /> or <br/>. It does the same thing (the slash makes the tag readable in XHTML Learn to Speak "Internet": Your Guide to xHTML Learn to Speak "Internet": Your Guide to xHTML Welcome to the world of XHTML – Extensible Hypertext Markup Language – a markup language that allows anyone to construct web pages with many different functions. It's the primary language of the Internet. Read More ).

10. <strong>

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

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

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


Very important things you want to say.

If you’re familiar with the <b> tag for bolding text, you can still use it. There’s no guarantee it will continue to work in future versions of HTML, but for now, it works.

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>


An emphasized line.

The <i> tag still works, but again, 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="//www.makeuseof.com/>Go to MakeUseOf</a>


Go to MakeUseOf

The “href” attribute identifies the destination of the link. In many 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="//www.makeuseof.com/" target="blank">Go to MakeUseOf in a new tab</a>


Go to MakeUseOf in a new tab

The “title” attribute creates a tooltip. Hover over the link below to see what I mean:

<a href="//www.makeuseof.com/" title="This is a COOLtip">Hover over this one</a>


Hover over this one

13. <img>

If you want to embed an image in your page, you’ll need to use the image tag. The simplest way to use it is to simply add the source of the image in the “src” attribute, like this:


17 Simple HTML Code Examples You Can Learn in 10 Minutes wp-content/uploads/2016/02/hdr-moderation.png” />

That includes the image. However, there are a number of other attributes you’ll like want to use, like “height,” “width,” and “alt.” Here’s how that might look:


17 Simple HTML Code Examples You Can Learn in 10 Minutes wp-content/uploads/2016/02/hdr-moderation.png” alt=”the name of your image” width=”320″ />

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 is a good idea to include in any image. If someone has an especially slow connection or an old browser, they can still get an idea of what you have on your page.

14. <ol>

The ordered list tag lets you create an ordered list. In general, that means you’ll get a numbered list. Each item in the list needs a list item tag (<li>), so your list will look like this:

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


  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. It can be set to “1,” “A,” “a,” “I,” or “i,” setting the list to display with the indicated symbol.

15. <ul>

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

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


  • First item
  • Second item
  • Third item

Unordered lists also have “type” attributes, and you can set it to “disc,” “circle,” or “square.”

16. <table>

While using tables for formatting is frowned upon, there are plenty of times when you’ll want to use rows and columns to segment information on your page. There are a number of tags you’ll need to use to get a table to work. Take a look at this example and you’ll see what I mean:

<th>First column</th>
<th>Second column</th>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
First column Second column
Row 1, column 1 Row 1, column 2

Each <th> tag surrounds a header (you might sometimes see these encased in a <thead> tag, as well). <tbody> sets off the body of the table. The <tr> tag sets off a new table row, and each <td> tag identifies a cell in that row.

17. <blockquote>

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

<blockquote>I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain.</blockquote>


I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain.

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.

Go Forth and HTML

With these 17 HTML tags (and a few more attendant ones) you should be able to create a simple webpage. To see how to put them all together, you can download the sample HTML page that I’ve created. You can open it in your browser to see how it all comes together, or in a text editor to see exactly how the code works.

For more bite-sized lessons in HTML, try these microlearning apps for coding Want to Learn Basic Coding? Try 5 Bite-Sized Coding Apps in Your Spare Time Want to Learn Basic Coding? Try 5 Bite-Sized Coding Apps in Your Spare Time Want to learn basic coding but have little time? These bite-size coding apps will take up just a few minutes of your busy day. Read More .

Explore more about: HTML, Web Development, Wordpress.

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. ranjeet jkumar
    February 10, 2019 at 5:53 pm

    thanks bro,
    its very helpful for me.

  2. C.Ronaldo
    February 6, 2019 at 2:27 pm

    Thanks bro

  3. skjrgh
    January 4, 2019 at 7:19 pm

    Thank you

  4. Baz
    July 19, 2018 at 5:38 pm
  5. Ugnjirzs
    April 14, 2018 at 3:44 am

    In the Astros, Yankees, and Dodgers the Twins will face teams that have been in contention all year.
    Donations of food and other needed supplies will be accepted at the Minute Maid Park gates.
    strokes: On August 10, Betts was moved to the third spot in the lineup, then clean-up shortly thereafter.

    Tyler O’Connor is the front runner for the starting quarterback position.
    Meanwhile, Michigan had their biggest win since the 1970s.

  6. Charchita Shakalya
    January 18, 2018 at 3:17 pm

    Thank you it is really helpful and absolutely easy to understand.

  7. Johnpaul
    January 6, 2018 at 2:06 pm

    Thanks for the tutorial

  8. khadeer
    January 5, 2018 at 6:03 am

    Excellent page for learners,Good Usages,Thanks.

  9. khadeer
    January 5, 2018 at 6:02 am

    Excellent Page to learn & play in HTML,Thanks :)

  10. priya
    December 16, 2017 at 9:05 am

    very usefull

  11. SK.Moinul Islam.
    November 2, 2017 at 3:45 am

    I copied it and pest to a html simulator, it did not show as shown the results.

  12. singleseeker
    April 18, 2017 at 9:41 am

    what is "metadata from your mobile devices" on the article?