HTML Elements and Tags

Habdul Hazeez - Oct 19 '19 - - Dev Community

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:

  1. The root element
  2. The meta tag
  3. The head element
  4. The title
  5. The body
  6. Headers
  7. Paragraphs
  8. Lists
  9. Images
  10. Horizontal Ruler
  11. A divider
  12. A span
  13. 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>
Enter fullscreen mode Exit fullscreen mode

Here is a brief explanation of the skeleton page:

  • <!DOCTYPE html> - The doctype declration
  • <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>
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

The body element

This encompasses the entire content of HTML content. You can only have one body tag in a document

<body>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

Horizontal Ruler

This is used to separate block of texts

<hr>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

If you try the code above, your expected output should be similar to the image below, showing the span elements in one line

Span Element in HTML

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

You should get an output similar to the image below:

HTML Elements

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:

H1 element in Chrome devtools

From the image above, you will notice the browser default styles applied to the h1 element, is 2em.

h1 font size in Chrome DevTools

If you are on Firefox, you should get an output similar to the image below:

DevTools in Chrome

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:

Header default styles in Firefox

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.

Image
Ten Things You Shouldn't Post On Twitter
Image
20 Fun Informational Facts About Bifold Doors Repair
Image
🌟 Let’s Grow Together on GitHub! Fork, Star, and Watch Each Other’s Repos 🚀
Image
L Shaped Bunk Beds For Small Rooms: It's Not As Difficult As You Think
Image
website judi slots online dengan jenis keunggulan
Image
Here's An Interesting Fact Concerning Exercise Bikes
Image
How To Safely Open MP4 Files with FileMagic
Image
20 Up And Coming Mental Health Stars To Watch The Mental Health Industry
Image
The 12 Most Popular Cycle Workout Bike Accounts To Follow On Twitter
Image
The FileMagic MP4 Advantage: A Simple Solution
Image
Schema Validation in Amazon DynamoDB

dynamodb, aws, security, node
Image
Intro Post: How AI is Transforming the Testing Landscape

aiintesting, qa, softwaretesting, austintech
Image
Day 60. Markdown

mobile, kotlin, 100daysofcode, android
Image
Cat Flap Fitting Near Me
Image
A Step-By-Step Guide To Microwave Oven Built-In From Start To Finish
Image
teknik pilih perjudian slots online
Image
How to Go About Acquiring On the web Online video Net sites
Image
Ten Easy Steps To Launch Your Own Ghost Vehicle Immobiliser Business
Image
<h1>Soccer Accessories</h1>
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .