Skip to Content
JavaScriptCSSHTMLPHPReactVueNodeJSMySQLWordPress

Learn HTML in 10 Minutes: HTML Basics for Beginners

HTML iconHTML

In this guide, you'll learn the basics of HTML and how to create a simple website in ten minutes or less.

We'll cover the most commonly used HTML tags and how to structure your page correctly so you can move around in clean, robust environment.

Advertising Disclosure: I am compensated for purchases made through affiliate links. Click here for details.

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 start learning HTML and 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, telling 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.

You can view more information about DOCTYPE declarations here.

The html tag

The html tag is used to wrap 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 pages.

The head tag

The head tag is the first section of the code that contains all of the information about a web page's properties, links, 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 in hopes of Google using your snippet, or leave it as is and let fate decide.

Notice how the meta tag has a forward slash at the end of it instead of a closing /meta 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 opening tag like in the example above.

Adding CSS to the head block

There are two ways to add CSS to your head block: 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 open and closing 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 body tag

The 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>

Heading Tags

Heading tags are essential for page organization and SEO (Search Engine Optimization) purposes. There are six heading tags in total, h1 defining the most important heading, and h6 defining the least important heading.

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 heading 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.

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 headings 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 div tag

The 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 position styling 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 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.

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 img tag is also self-closing and should contain a forward slash, / at the end of the tag to follow best practices.

The script tag

Finally, the 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 HTML basics and best practices are some of the most commonly used elements and will help you get started creating your very first web site.

You can learn HTML further by checking out additional HTML posts on Orangeable.

Posted by: Josh Rowe
Last Updated: September 27, 2022
Created: May 21, 2020

Comments

There are no comments yet. Start the conversation!

Add A Comment

Comment Etiquette: Wrap code in a <code> and </code>. Please keep comments on-topic, do not post spam, keep the conversation constructive, and be nice to each other.