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