An HTML elements is defined by a start tag, some content, and an end tag.

In this tutorial, you will learn-

HTML Elements

An HTML file is made of elements. These elements are responsible for creating website pages and characterize content around there. Elements in HTML typically comprise of a start tag <tag name>, close tag </tag name> and content inserted between them. Technically, an element is an assortment of a start tag, attributes, end tag, content between them.

If you prefer, you can also watch the tutorial video below:

Note: Some elements doesn’t have end tag and substance, these elements are termed as unfilled elements or self-closing element or void elements.

For example,

<p> Hello world!!! </p>   

Example

<!DOCTYPE html>  
<html>  
<head>  
    <title>WebPage</title>  
</head>  
<body>  
   <h1>This is my first web page</h1>  
    <h2> How it looks?</h2>  
     <p>It looks Nice!!!!!</p>  
</body>  
</html>  

The HTML element is everything from the start tag to the end tag:

<tagname> Content goes here… </tagname>

Instances of some HTML_elements:

<h1> My First Heading</h1>

<p>My first paragraph.</p>

Start tagElement contentEnd tag
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<br>nonenone

Note: Some HTML elements have no substance (like the <br> element). These elements are called empty elements. empty elements don’t have an end tag!


Nested HTML Elements

HTML_elements can be nested (this means that elements can contain different elements).

All HTML_documents comprise of nested HTML elements.

The accompanying example contains four HTML_elements ( <html>, <body> , <h1> and <p>):

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Example Explained

The <html> element is the root element and it characterizes the entire HTML document.

It has a start tag <html> and an end tag </html>

At that point, inside the <html> element there is a <body> element:

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

The <body> element characterizes the document’s body.

It has a start tag <body> and an end tag </body>

At that point, inside the <body> element there are two different elements: <h1> and <p>:

<h1>My First Heading</h1>
<p>My first paragraph.</p>

The <h1> element characterizes a heading.

It has a start tag <h1> and an end tag </h1>:

<h1>My First Heading</h1>

The <p> element characterizes a paragraph.

It has a start tag <p> and an end tag </p>:

<p>My first paragraph.</p>

Never Skip the End Tag

Some HTML_elements will display correctly, even if you fail to remember the end tag:

Example

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

In any case, never replay on this! Unforeseen outcomes and errors may happen in the event that you fail to remember the end tag!


Empty HTML Elements

HTML elements with no substance are called empty elements.

the <br> tag characterizes a line break, and is a vacant element without an end tag:

Example

<p>This is a <br> paragraph with a line break.</p>

HTML is Not Case Sensitive

HTML tags are not sensitive: <p> means equivalent to <p>

The HTML standard doesn’t need lowercase tags, but W3C suggests lowercase in HTML and demands lowercase for stricter document types like XHTML.



Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.


0 Comments

Leave a Reply

Avatar placeholder