HTML elements

HTML elements begin with an opening tag as <atag>, followed by contents inside, and end with closing tags as </atag> as follows.

Here is an example how start tag and end tag make a full element with content inside.

<atag>Here is contents inside element.</atag>

Syntax HTML element

Elements start with an opening or start tag, i.e. <h2>.
Followed by HTML elements contents. i.e. “Heading 2 contents”.
Elements end with a closing or end tag, i.e. </h2>.

<h2>Heading 2 element with contents inside</h2>

The name of the opening tag and the closing tag are the same, except for the additional / slash in the end tag.

Case-insensitive

HTML is not case-sensitive, which means <H1> tag and <h1> tags are processed as the same tag. Even the same element may contain either case, e.g. <h1> and </H1> will be a valid HTML5 document.

Let’s look at an example before we further discuss it.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML title element</title>
	</head>
	<body>
		<h1>Header 1 h1 element</h1>
		<p>Content of paragraph element.</p>		
		<H2>This is heading2 element using uppercase.</H2>
		<P>This is another example using paragraph element using uppercase and lowercase mix.</p>		
	</body>
</html>

Output

Try Online

Tip

Use lowercase elements where possible, for many reasons.

It is recommended by the World Wide Web Consortium (W3C).
Switching between cases will slow down your code writing.
Using the same pattern will be easy to follow up and maintain.

Types of HTML elements

Container Elements

Most of the above discussion is related to this type of element. The container elements have contents inside the start tag and end tag.

<p>A paragraph element contents.</p>

Empty Elements

Some HTML elements are referred to as empty elements or self-closing elements, they don’t contain contents inside opening and closing tags. They are used to performing certain actions e.g. line breaks, reference to a file in the current web page, or input data.

A few common HTML empty elements are <img>, <br>, and <input>.

Note:

In XHTML, self-closing elements are required to have a / at the end of the tag i.e. <br/>.
HTML5, which has replaced XHTML, does not require /. But if you are still using XHTML, it is advised to use / at the end of the element.

Nested elements

HTML elements can be nested within each other to create more complex HTML document pages. Most of the time this is the case with all large websites and pages.

<div>
	<h2>Header2 inside div containter</h2>
	<p>This is a paragraph nested inside div, and similarly list and it's items given below.</p>
	<ul>
		<li>List 1</li>
		<li>List 2</li>
	</ul>
</div>

HTML elements levels

HTML elements cover a rectangular area in the document, regardless of its full-width block or inline inside contents. Here are two types of element levels.

Block elements

This type of element covers the full-width area as a block of a container element or full document. By default, feature, most of the block-level elements are always stacked on top of each other, unless it’s styled with CSS to a limited width or shape.

Elements such as <p></p> and <h2></h2> are examples of block elements.

Inline elements

Inline elements don’t cover the whole width of the container, but only take space between its start and end tags. These elements are used to format a part of content within its surrounding contents.

Example of such elements are <b></b> and <i></i>.

Header displayed as block

A quick brown fox jumps over the lazy dog.

Another paragraph containing inline elements inside text.

In the above example, “Block elements” are stacked on top of each other, and “Inline elements” are surrounded by text.

<!DOCTYPE html>
<html>
	<head>
		<title>Web page Title element</title>
	</head>
	<body>
		<h3>Page main heading goes in between h3 element.</h3>
		<p>This is a <b>paragraph</b> in web page.<br>This is the second line of the paragraph, separated by `< b >` element.</p>		
		<h4>This is heading4</h4>
		<p>This is another <i>paragraph</i>, and here is a hyperlink element, click to visit <a href="https://www.w3scoop.com/">Visit W3Scoop</a>.</p>		
		<p>Make some text <b>bold</b> with `< b >` element.</p>
	</body>
</html>

Output

Try Online

Bad Practice:

Never miss the closing tag, as it may lead to content and components disorder problems. You will face more problems if elements have JavaScript interactivity or CSS styling targetting those elements.

Frequently asked questions about this topic

Can I define a custom element?

Interestingly, you can define your custom element for design purposes only, it will not be up to HTML5-compliant specifications. The custom element should be properly styled with CSS so that it doesn’t interfere with other elements of your HTML document page.

Here is an example of a custom tags element.

<xtag style="css-style"> Content of the custom element. </xtag>

Can I omit the DOCTYPE element in an HTML document?

The DOCTYPE element is required for HTML document. Different browsers have predefined settings and standards. If DOCTYPE is omitted, each browser will apply its own standards and specifications to the web page, and the rendering mode will be inconsistent across all browsers.
The DOCTYPE element prevent browsers switching to incompatible mode. It makes sure that all browsers give you the best possible, consistent and uniform result.

Warning:

I only mentioned custom elements for educational purposes. But keep in mind, elements created by custom tags may not be supported by all browsers. It may also not be supported by all Search engines, and will not be considered as SEO-friendly.