Code Conquest

  • Home
  • What is Coding?
  • Tutorials
  • Training
  • Reviews
  • Knowledge Center
  • Versus
  • Blog
You are here: Home / Free Code Tutorials / Free HTML Tutorial

Free HTML Tutorial

HTML5HTML stands for Hyper Text Markup Language, and is the code that all web pages are written in. The best way to think of HTML is that it’s a way of annotating a mass of plain text to turn it into a web page. By doing this, it can describe each and every part of the page’s structure.

HTML adds structure to text by annotating it with tags. A tag is made up of a word or abbreviation surrounded by angled brackets. In HTML, tags are placed at the beginning and at the end of the text they are structuring. These tag-content-tag combinations form HTML elements, or nodes. Here’s what an element looks like:

<tag>Element</tag>

Note that the closing tag includes a forward slash immediately inside of the opening bracket. Closing tags are very important, since they mark where an element ends.

OK, enough of the theory! Here are some real-world HTML tags.

HTML Tags

To make text bold, websites use the <strong> tag. Here’s an example:

Closing tags are <strong>very</strong> important.

Here’s the result:

Closing tags are very important.

The word ‘very’ has been bolded because it is surrounded by the <strong> tag.

Italics are much the same, but the <em> tag is used. Example:

In HTML, <strong>bold</strong> is for <strong>making text stand out</strong>, and <em>italics</em> are for <em>emphasis</em>.

Result:

In HTML, bold is for making text stand out, and italics are for emphasis.

Another important tag is the <h1> tag. This is used to indicate the heading of a web page. Example:

<h1>Free HTML Tutorial</h1>

Each web page has one pair of <h1> tags. This page’s <h1> is the heading at the top of the page that reads ‘Free HTML Tutorial’.

For subheadings, there is a similar tag <h2>. In fact, there’s an <h2> coming up on this page right now…

HTML Structure

Moving on, every web page written in HTML shares a common structure, an example of which is below:

<!DOCTYPE html>
<html>
<head>
<title>A Web Page</title>
</head>
<body>
<h1>A Web Page</h1>
</body>
</html>

<!DOCTYPE html> is the first and most important line of an HTML document. It ensures that web browsers will correctly read the HTML that follows. If you visit a page that doesn’t include it, the page might not display as the owner intended.

Next, there is an <html> tag that contains the entire contents of the page. There are only two tags immediately inside of <html>, and they are <head> and <body>.

<head> is the place for information about the web page – the title, a description, its correct URL, keywords to describe the page etc.

<body> is where you’ll find everything that shows up on the page itself. This includes headers, main content, sidebars and footers.

Title Tag

You probably noticed the <title> tag and that it has the same contents as the <h1> tag. What’s the difference?

While <h1> is what appears on the page itself, <title> is used as the title of the browser window or tab. <title> is also used in search engine results. The contents of these two tags don’t need to be identical, but sometimes they are.

Nesting Tags

When considering HTML structure, it’s very important to understand that you can have tags inside tags (nesting), but you can’t have them overlap. So this is fine:

<strong><em>Bold and italic</em></strong>

But this isn’t fine:

<strong><em>Bold and italic</strong></em>

Note the different order that the tags are closed.

Learn More HTML

That’s all the basic HTML we’re going to be covering here. But if you’re finding HTML interesting, you should check out the wide world of HTML and CSS training.

There are some great providers of online HTML training and tutorials, like Treehouse and Codecademy. There are also plenty of great books on HTML, from HTML5 Foundations to HTML for Babies.

See all HTML and CSS training recommendations…

Meanwhile in the next three tutorials, you’ll find out how to enhance HTML by adding CSS, JavaScript and PHP.



Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.

Popular Series

  • What is Coding?
  • How to Make Your First Website
  • Understanding Hex Color Codes
  • How to Become a Coder in 6 Months: a Step-by-Step Action Plan
  • How to Start a Coding Project

Get Our Newsletter

Enter your email address and we'll notify you whenever we add something new to the site.

Popular Blog Posts

  • The 50 Best Websites to Learn Python
  • The 50 Best Websites to Learn JavaScript
  • The 50 Best Websites to Learn PHP
  • Want to Switch Careers? Coding May Be the Perfect Solution!
  • 9 of the Hottest Tech Skills Hiring Managers Look for on LinkedIn

Latest Blog Posts

  • PySpark vs Pandas: Performance, Memory Consumption and Use Cases
  • Spark vs Hadoop: MapReduce, Performance, and Resource Management
  • Pyston vs PyPy: Similarities and Differences
  • CPython vs Python: Are They The Same or Different?
  • Python vs R For Data Science and Machine Learning

Explore Code Conquest

  • What is Coding?
  • Free Code Tutorials
  • Coding Training Recommendations
  • Coding Training Reviews
  • Knowledge Center
  • Cheat Sheets
  • Coding Quizzes
  • Versus

Deals, Discounts and Coupons

Deals

Code Conquest

  • Home
  • About
  • Privacy Policy
  • Contact Us
  • Terms of Use
  • Write for Us
  • Featured Review

Copyright © 2023 Code Conquest · About · Terms · Privacy · Contact Us · Write For Us