HTML Elements

HTML Elements – HTML Tutorials – Web Development

Hey everyone! In the previous article, we learned and talked about the basics of HTML. If you didn’t read the previous article, click here! As, because you need to clear the basics before we move further ahead! In this article, we are gonna dive in HTML Elements.

HTML Elements are made up of tags and content. In the previous article, we talked about HTML Tags if you remember. In this article, we are gonna take a closer look at it.

All HTML Elements are made up of Start Tag, Some Content and End Tag.

<tagname>Your Content goes here…</tagname>

For Example:

<h1>This is a Heading</h1>

Over here <tagname> is the Start tag. “Your Content goes here…” is the content in between the Start tag & End tag. And </tagname> is the end tag.

<p>This is a Paragraph</p>
Start TagContentEnd Tag
<h1>This is a Heading</h1>
<p>This is a Paragraph</p>
<hr>
<br>

To Note: HTML Elements like <hr> and <br> only contain start tag. They don’t have any content and end tag. These kind of elements are also known as Empty Elements.

Points To Remember:

  • Elements are made up of Tags (Start Tag and End Tag) and Content.
  • Tags are part of HTML Elements.
  • Some elements are only made up of Start Tag e.g., <br> and <hr>.

Nested Elements

Going just by the name, “Nested” basically means “one inside other”.

Each and Every HTML Document consists of Nested HTML Elements.

For Example: The following HTML Document includes 6 HTML Elements (<html>, <head>, <title>, <body>, <h2>, <p>).

<!DOCTYPE html>
<html>
<head>
<title>A Title</title>
</head>
<body>
<h2>This is a Heading</h2>
<p>This is a paragraph</p>
</body>
</html>

Web-browser view given below:

Explanation

<html> element is the root element and it defines the whole HTML Document.The start tag is <html> and it’s corresponding end tag is </html>.Now inside the HTML element is the <head> and <body> element.

<head>
<title>A Title</title>
</head>

The <head> element contains the <title> element. Inside the <head> element is <title> element.
Now the <title> element defines the title of the Web-Page.
The start tag is <title> and it’s corresponding end tag is </title>.

<body>
<h2>This is a Heading</h2>
<p>This is a paragraph</p>
</body>

The <body> elements defines the body of the whole HTML Document.
It has a start tag <body> and an end tag </body>.
Now inside the <body> element are two more elements: <h2> and <p>.

<h2>This is a Heading</h2>

<h2> element defines a heading.
It has a start tag <h2> and an end tag </h2>.

<p>This is a paragraph</p>

<p> element defines a paragraph.
It has a start tag <p> and an end tag </p>.

Key Note:

There are a few HTML Elements which will display correctly, even if you forget the end tag.

<!DOCTYPE html>
<html>
<body>
<p>This is paragraph 1
<p>This is paragraph 2
</body>
</html>

Web-browser view given below:

Output of above html code

But, I would suggest never to use this method. There may be a scenario where unexpected results or maybe errors occur if you forget the end tag.

Empty Elements

Elements with no content are known as Empty Elements.

For example: <br> defines a line break and <hr> defines a horizontal line.

<!DOCTYPE html>
<html>
<body>
<p>A paragraph <br> with a line break</p>
</body>
</html>

Web-browser view given below:

Output for html tutorial code

HTML is Not Case Sensitive

HTML tags are not case sensitive, as in: <P> means the same as <p>.

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

See yaa, in next one 😉!

2 thoughts on “HTML Elements – HTML Tutorials – Web Development”

Leave a Comment

Your email address will not be published. Required fields are marked *