Before we dive into HTML Elements and Tags, we need to know a particular term called the doctype declaration. The doctype declaration is sort of an instruction that tells the browser the version of HTML the page is written in.
Over the years, the doctype has evolved, from a really long set of characters that's quite difficult to memorize to a shorter one.
EVOLUTION OF THE DOCTYPES
The Recommended Doctype Declarations to use in your web document are listed below. Please note: only that of HTML5 should be used today, the rest is just for historical and reference purposes only
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 3
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">
HTML 2
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN">
NOTE: The doctype declaration of HTML5 is case insensitive, that means <!DOCTYPE html> is the same as <!doctype html>
HTML ELEMENTS AND TAGS
Understanding HTML Elements and Tags can be quite tricky at first, but it's quite easy. The explanation below should clear things up.
HTML ELEMENTS
Elements are components that define page objects such as paragraphs(p), links(a), headers(h1, h2, h3, h4, h5, h6) e.t.c.
HTML TAGS
HTML tags define the HTML elements with angled brackets wrapped around the tag name and usually comes in pairs . e.g <p></p> <body></body>
Listed below are HTML elements that you'll find in almost all web pages:
- The root element
- The meta tag
- The head element
- The title
- The body
- Headers
- Paragraphs
- Lists
- Images
- Horizontal Ruler
- A divider
- A span
- Links
Let's give a brief explanation of these elements, to follow along, create a skeleton page with the following code. Copy and paste the code in your code editor, save with any name you like but make sure it ends with .html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<!-- put your code here-->
</body>
</html>
Here is a brief explanation of the skeleton page:
-
<!DOCTYPE html>- The doctype declration -
<html lang="en">- The root element with withlangattribute -
<head>- The head tag -
<meta charset="utf-8">- The meta tag -
</head>-The closing head element -
<body>- The opening body element- -
</body>-The closing body tag- -
</html>-The closing html tag
The root element
This represents the root of the HTML document, it comes after the doctype declaration and all other elements are its descendant
<html>
The meta tag
Metadata is data about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page.
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="author" content="ziizium"/>
<meta name="keywords" content="HTML, CSS, JavaScript"/>
The head element
This contains some data about the page like the page title, the meta tag and link tags
<head>
<meta charset="utf-8">
<title>FrontEnd Development Zero to Hero</title>
<link rel="stylesheet" href="css/styles.css">
</head>
The title
The name says it all, this is used to define the page title which appears on the browser tabs
<title>FrontEnd Development Zero to Hero</title>
The body element
This encompasses the entire content of HTML content. You can only have one body tag in a document
<body>
Headers
Headers in html range from h1 to h6. By default in this range (h1-h6), h1 is rendered with the biggest font size and h6 is rendered with the least. These font sizes can be changed with CSS.
<h1>HEADER 1</h1>
<h2>HEADER 2</h2>
<h3>HEADER 3</h3>
<h4>HEADER 4</h4>
<h5>HEADER 5</h5>
<h6>HEADER 6</h6>
Paragraphs
Paragraphs are denoted on a page using starting and closing p tags <p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
Lists
Lists are everywhere from your grocery list to the likes, in HTML lists are created using two tags:
-
ul- for an unordered list, this means the list, by default, does not contain lettering nor are they numbered.
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Last Item</li>
</ul>
-
ol- For creating an ordered list, the list are numbered from one upwards and can be changed with CSS
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Last Item</li>
</ol>
Images
Images are everywhere and HTML is no exclusion. To create images in HTML you use the img tag, you supply two attributes which are
-
src- for linking to the file location -
alt- the alt attribute should contain a brief description of the image. This text is shown to your user if the image fails to load, and screen readers read it when navigating your page.
<!-- <img src="image location" alt="a brief descripton" title="image title"> -->
<img src="images/viewsource.png" alt="viewsource" title="viewsource">
Horizontal Ruler
This is used to separate block of texts
<hr>
Divider
Dividers are used as a container for flow content on a web page
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Span element
In HTML span are inline elements, this means they are rendered one after the other on the horizontal axis and CSS can easily change their behavior by making them behave like block-level elements.
<!-- inline styles added to show the elements are rendered on one line -->
<span style="outline: 3px solid red">Lorem ipsum dolor sit amet</span>
<span style="outline: 3px solid blue">Lorem ipsum dolor sit amet</span>
<span style="outline: 3px solid brown">Lorem ipsum dolor sit amet</span>
If you try the code above, your expected output should be similar to the image below, showing the span elements in one line
Links
links make navigating from one page to the other quite easy and you will find them in most web pages. Their color is blue by default, but changes to purple when clicked. These behaviors can be changed with CSS.
<a href="https://google.com">Google</a>
Here is the entire code for this explanation, save it and load in your browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FrontEnd Development Zero to Hero</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>HEADER 1</h1>
<h2>HEADER 2</h2>
<h3>HEADER 3</h3>
<h4>HEADER 4</h4>
<h5>HEADER 5</h5>
<h6>HEADER 6</h6>
<!-- <img src="image location" alt="a brief descripton" title="image title"> -->
<img src="images/viewsource.png" alt="viewsource" title="viewsource">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Last Item</li>
</ul>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Last Item</li>
</ol>
<hr>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<span style="outline: 3px solid red">Lorem ipsum dolor sit amet</span>
<span style="outline: 3px solid blue">Lorem ipsum dolor sit amet</span>
<span style="outline: 3px solid brown">Lorem ipsum dolor sit amet</span>
<a href="https://google.com">Google</a>
<a href="https://google.com">Google</a>
<a href="https://google.com">Google</a>
</body>
</html>
You should get an output similar to the image below:
If you take a closer look, I mentioned in the "headers" section that h1 is rendered with the biggest font size and h6 the least (which is evident from the image above), the question is where did they get their font size from?
Please perform the following actions:
- Right-click on any element ( e.g the
h1) - Click on inspect element, this will open the Browser developer tools
If you are on chrome your output should be similar to the image below:
From the image above, you will notice the browser default styles applied to the h1 element, is 2em.
If you are on Firefox, you should get an output similar to the image below:
This is different from the chrome output and we need to perform some extra steps to show the browser default styles.
In the bottom pane, where we have Rules, Layout, Computed, Changes , Fonts, Animation. Perform the following actions:
- Click on the computed tab, you will notice a checkbox that says Browser styles
- Click on it, the browser styles will be shown
This shows you the default browser styles applied to this element until they are changed with CSS.
Scroll down and locate the font-size property, if you've highlighted the h1 as I did, and you performed the previous action ( when you clicked the checkbox to show the browser default styles), you will notice that h1 has a default font-size of 32px:
Now you might be wondering, h1 has a 32px in Firefox and 2em in Chrome, why? In browsers a font-size of 1em = 16px and doing a bit of math 2em = 32px.
That's the reason we have 32px in Firefox and 2em in Chrome, they are the same but expressed in different units. You will learn about the units when we get to CSS.
The elements discussed are by no means conclusive, you should check Mozilla Developer Network Html elements reference and if you want you can get the ultimate html reference available at Sitepoint.
Edit (May 17th, 2020) : Update heading tags.
Top comments (0)