Learn HTML in 10 Minutes

This article will teach you the basics of HTML and how to create a simple website in ten minutes or less with the most commonly used HTML tags.

What is HTML?

HTML, short for Hypertext Markup Language, is the coding standard for documents designed for web browsers, consisting of a series of elements or tags used to make up the structure of a web page. These elements can include headings, paragraphs, div containers, tables, and more.

HTML tags are nested, meaning there are opening and closing tags, with the content in between those tags.

Here's an example of a simple HTML document to illustrate its structure:

<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Notice how the first tag, the opening html tag, is near the top of the document. All other tags and content in between are nested within this opening tag and its closing tag at the bottom of the document.

Closing tags always begin with a forward slash / and indicate the end of the associated element and its contents.

Let's dive into each of these elements individually and the possibilities that they have to offer.

The DOCTYPE Declaration

DOCTYPE is not so much a tag, but more of an instruction, indicating to the browser that the document type to be served to the user is, in fact, an HTML document. This DOCTYPE instruction should always be included at the top of every HTML page:

<!DOCTYPE html>

This declaration tells the browser that an HTML5 document will be processed and served to the end-user.

The html Tag

The html tag is used to contain all of the web page's HTML code, as you saw above. It contains an opening and a closing tag with the contents in between.

The html tag also comes with a lang attribute, allowing you to specify the spoken language of the contents of the page:

<html lang="en">

The lang attribute helps search engines return specific results by spoken language. It also helps screen readers to switch language profiles, providing the user with correct accents and pronunciations as they peruse through your page content.

The HTML head Tag

The HTML head tag is the first section of the code that contains all of the information about a web page's properties, links, and more, the page's title, description, additional meta tags, and CSS code.

This example will set the web page's title and description:

<head>
<title>My First Website</title>
<meta name="description" content="This is my very first website." />
</head>

We've set the web page's title to "My First Website" and the description to "This is my very first website." These two items will appear in the search engine's results pages.

Sometimes search engines, like Google, will find a description they feel is more relevant to your page content. They may ignore your meta description entirely and replace the description in SERP's (Search Engine Results Pages) with what they believe describes your web page more accurately. If this happens, don't be alarmed. You can update your description to match your content more closely if needed or leave as is.

Notice how the meta tag has a forward slash at the end of it instead of a closing tag. Tags like this are considered self-closing, which means they don't require a closing tag and is accomplished by adding a forward slash to the end of the tag's contents like in the example above.

Adding CSS to the head Tag

There are two ways to add CSS to your head tag: internally and externally.

  • Adding CSS internally: You can add CSS internally using the style tag:
<style>
h1 {
font-size: 20pt;
}
p {
font-size: 12pt;
}
</style>
  • Adding CSS externally: You can also add CSS externally using the self-closing link tag:
<link type="text/css" href="/style.css" rel="stylesheet" />

The latter method is much cleaner as it allows you to separate your CSS code from your HTML code. In this method, you would create a file named "style.css" at the root directory of your project and add the CSS code above to it, omitting the style tags.

There is also an additional method, where you can write inline CSS within an HTML tag:

<div style="font-size: 12pt;">
This element contains inline CSS.
</div>

I've never been a fan of this method or of the internal CSS method within the head tag as it inflates the length of the HTML code file and doesn't look clean. Generally, I stick with the second method of external CSS, keeping the HTML code and CSS code in separate files, and including the CSS file in the document head using the link tag.

The HTML body Tag

The HTML body tag contains all of the displayable contents of your web page, including headings, paragraphs, div containers, tables, and more, like this:

<body>
<h1>My First Website</h1>
<p>My first paragraph</p>
</body>

HTML Header Tags

Header tags are essential for SEO, Search Engine Optimization, purposes. There are six header tags in total, h1 defining the most important header, and h6 defining the least important header.

Typically, each web page should only contain a single h1 tag as this is the main heading and subject for the web page. However, you can have multiple h2 tags, h3, all the way to h6 header tags.

This blog uses h2 tags for each of the main section headings to separate the content and make it more legible. Then h3 tags for any subsections.

HTML Paragraph Tags

Paragraph, p, tags create padding in the top and bottom of the element to help separate the text between each paragraph, also making your content more readable.

In this example, we'll create the main page heading with two section headers and paragraphs:

<h1>My First Website</h1>

<h2>My First Section</h2>

<p>This is my first paragraph.</p>

<h2>My Second Section</h2>

<p>This is my second paragraph.</p>
<p>This is my third paragraph.</p>

Line Breaks

Line breaks can be helpful from time to time. If you want to provide a single line break in your content, you can do so by adding a
tag like this:

My first line.<br/>My second line.

// Output:
// My first line.
// My second line.
This is another self-closing tag, where the br tag contains no attributes and no closing tag superceding it.

The HTML div Tag

The HTML div tag defines a division or a section in an HTML document and is used as a container for other HTML elements. These elements can include content areas, sidebars, page headers, page footers, and more.

You can have as many div elements as you want within a single web page. I've always practiced keeping HTML code to a minimum, so the page code doesn't outweigh the page content. Plus, I'm a minimalist. The less code, the better.

Here's an example of two sections separated by div containers:

<div class="container">
My first container.
</div>

<div class="container">
My second container.
</div>

Visibly, nothing is separating the content of these two div containers other than some vertical spacing. You could style these two elements any way you want to distinguish the two different sections. You could align them by sitting them side-by-side instead of top-bottom by adding display: inline-block; styling to the elements. You could set the positioning to absolute and place one container in the top-left corner of the screen, and the other in the top-right corner.

The options are endless as div elements allow you to style and display in almost any way you can think possible.

The HTML span Tag

Unlike div tags, span tags are inline containers used to mark up a part of a text within a document. This could include highlighting text, changing text color, etc., and can look something like this:

This is my first line.
<span style="color: red;">This line is red.</span>
This line is back to the normal color.

HTML Tables

Tables allow page authors to arrange data into rows and columns. In its simplest form, your table structure could look like this:

<table>
<caption>My Table</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$300</td>
</tr>
</tfoot>
</table>

Each table is created using, you guessed it, the table tag! Within the table tag, you can add additional elements that help organize your data as you need it:

  • caption: The table caption will appear at the top of the table, displaying in a larger font size by default, and spanning all columns of the table.
  • thead, tbody, and tfoot: These are table group heading, body, and footer separators. They provide no display differences, but work great for separating and organizing your table contents.
  • tr: This stands for table row and should be used when creating a new row within your table.
  • th: This stands for table header and should be nested within table row tags, tr, to display column title names.
  • td: This stands for table data and should also be nested within table row tags, td, after your table header row, to display table cell data.

Displaying Images

Almost every website serves up images in some way, whether they be photographs, icons, or even vector images in browsers that support them.

Some of the major file formats supported with the img tag include .jpg, .jpeg, .png, and .gif. And .svg format for vector images.

The following example shows how you can load images internally from different paths, or externally with a URL:

// load image from current directory:
<img src="my_image.jpg" />

// load image from project's root directory:
<img src="/my_image.jpg" />

// load image from local machine's file location:
<img src="file:\\\C:\images/my_image.jpg" />

// load image from URL:
<img src="https://orangeable.com/assets/img/logo.png" />
Note that the HTML img tag is also self-closing and should contain a forward slash, / at the end of the tag to follow best practices.

The HTML script Tag

Finally, the HTML script tag, which can be used in a few ways, including adding JavaScript code internally in the HTML document, or externally in a JavaScript .js file.

To include JavaScript internally, you can do the following:

<script>
window.onload = function() {
alert("Hello There!");
};
</script>

This code will display a native alert box with the text "Hello There!" in the body.

Generally, you would include script code like this for third-party services like Google Analytics, Google AdSense, etc.

The second method, which I use for my own JavaScript code, includes a JavaScript .js script file into your HTML document:

<script src="/js/main.js"></script>

Again, it's a much cleaner method, and it keeps your HTML document content separate from your JavaScript code.

Oddly, this looks like it could be a self-closing tag, but you have to include the closing tag after the opening tag, despite there being no contents in between.

Note: The reason why I've included the script tag last in this article is because I always include JavaScript code or includes at the bottom of the HTML document, right before the closing tag. I've done this so that the page contents can load and render output to the screen before the script files are loaded. This is also a recommendation from Google to get a higher score when using Google PageSpeed Insights, a tool created by Google to help test page load speeds against several factors like render-blocking scripts, in this case.

Conclusion

These basic HTML tags and practices are some of the most commonly used elements and will help you get started creating your very first web site.