HTML Elements

When you land on a website, all the items you see in front of you - the paragraph texts, the page banners, and the navigation links are all elements of the web page.

HTML element usually consists of a start tag and end tag, with the content inserted in between:

Ex:- <tagname> content goes here... </tagname>

Start Tag Content End Tag
<h1> This is heading content. </h1>
<p> This is paragraph content. </p>
<span> This is in-line content. </span>
<div> This is division content. </div>
<br />
<hr />

So here <h1> , <p> , <span> , <div> is an HTML elements , that needs to be closed . There are some HTML elements which doesn't needs to be closed, such as <img />, <hr /> and <br /> elements. Thus they are known as void elements.

There are four main elements to every web page: <html> , <head> , <title> , <body>

The <html> element encapsulates all page content and elements, including two special elements: the <head> and <body> elements. The <head> element is a smaller container for elements that work behind the scenes of web pages, while the <body> element houses content elements such as web forms, text, images, and web video.<body>.

Nested HTML Elements

HTML tags should be “nested” in a proper order, meaning that the tag opened most recently is always the next tag to close. In the following example, the HTML code is nested correctly.

<!DOCTYPE html>
<html>
<head>
<title>This is website title</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Welcome to world of web development.</p>
</body>
</html>
Try it with the Editor

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>

Closing tags

you'll notice that all of these HTML elements have opening and closing tags, and that the content of the element is placed in between them. There are a few exceptions to this rule.

You'll also notice that the closing tag is slightly different to the opening tag - the closing tag contains a forward slash (/) after the <.

Tags in uppercase or lowercase?

Most browsers might not care if you type your tags in upper, lower or mixed cases. You can use uppercase or lowercase when coding HTML, however, most developers use lowercase. This helps the readability of your code, and it also saves you from constantly switching between upper and lower case.

<HTML>, <html> or <HtmL> will normally give the same result. However, the correct way is to type tags in lowercase. So get into the habit of writing your tags in lowercase.

The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.