Best Practices for HTML Tags

Knowledge from the creators of Mozilla Firefox (Mozilla Developer Network)

Apr 09, 2021

HTML TAGS

HTML tags define the HTML elements with angled brackets wrapped around the tag name and usually comes in pairs. <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 declaration
<html lang="en"> - The root element with with lang attribute
<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 whole document’s usual skeleton of tags to begin a .html file:
This contains some data about the page like the page title, the meta tag, link tags, text tags, div tags with classes and ids, button tags, forms, footers, a body tag, and closing html tag.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">   
<title>FrontEnd Development Zero to Hero</title>   
<link rel="stylesheet" href="css/styles.css"> 
</head>
<body>
<div>
<h1>
</h1>
</div>
</body>
</html>

The title
The name says it all, this is used to define the page title which appears on the browser tabs

<title>Front End 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 is 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 it in your browser.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Front End 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, which 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 out Mozilla Developer Network, developer.mozilla.org

Hope you got some help from this email. Appreciate you and wishing you a well week ahead.

Regards,
Tech Kaya

Front End Snippets

Discussion about this post