HTML Elements and Tags
Tags: html, beginners
Published: 2019-10-19 20:38:51

---
title: HTML Elements and Tags
published: true
description: Beginners introduction to HTML Elements and Tags
tags: html, beginner
series: FrontEnd Development Zero to Hero
---
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]( https://www.w3.org/QA/2002/04/valid-dtd-list.html ) 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>`

<hr>

##__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`.

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

```html
<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

```html
<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

```html
<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

```html
<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.

```html
<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>`

```html
<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.

```html
<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

```html
<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.

```html
<!-- <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

```html
<hr>
```

####__Divider__
Dividers are used as a container for flow content on a web page

```html
<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.

```html
<!-- 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

![Span Element in HTML](https://thepracticaldev.s3.amazonaws.com/i/9i98bdcrfomjzh5trdfc.png)


####__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.

```html
<a href="https://google.com">Google</a>
```

Here is the entire code for this explanation, save it and load in your browser.

```html
<!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:

![HTML Elements](https://thepracticaldev.s3.amazonaws.com/i/vsrpnxmbcr4hfjb3iua4.png)

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](https://thepracticaldev.s3.amazonaws.com/i/dw6rh4soc2qgea5yo6ef.PNG)

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

![h1 font size in Chrome DevTools](https://thepracticaldev.s3.amazonaws.com/i/ya6x6xc4hu3xjwe9lg6y.PNG)

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

![DevTools in Chrome](https://thepracticaldev.s3.amazonaws.com/i/xelyll3kd86yuyk593m4.PNG)

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](https://thepracticaldev.s3.amazonaws.com/i/wgl9ajd3zf5sxjsbal5l.PNG)


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 ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) and if you want you can get [the ultimate html reference](https://www.sitepoint.com/premium/books/the-ultimate-html-reference) available at Sitepoint.

_Edit (May 17th, 2020) : Update heading tags_.