Ticker

20/recent/ticker-posts

Advertisement

Elements of HTML

Elements of HTML with Examples

The file of HTML is created using elements. The elements are the one which is responsible to make web pages as well as create content in that particular webpage. The HTML element comprises of start tag <name of the tag> and close tag </name of the tag>. The content is kept among these two tags. So, an element can be defined as the gathering of a start tag, attributes, end tag, and content among them. It is best to keep in mind that few elements have content and end tags. They are called to be void elements or empty elements.

Example:

<!DOCTYPE HTML>

<html>

<head>

<title>Hello</title>  

</head>  

<body>  

 <h1>My first web page</h1>  

<h2>Looking good? </h2> 

 <p>Looks Nice! </p>  

</body>  

</html>  

Output –

Hello

My first web page

Looking good

Looks Nice!

The content you write between the elements of the body are visible to you on web page.

Void elements-

The elements which are empty and do not have a start tag and end tag. Few of the elements do not have content and end tags. They are also called unpaired tags or empty elements.

Example of void elements are –

<br> - represents a line break

<hr> - represents a horizontal line

Nested elements of HTML –

Here you can nest HTML which is meant as that one element can contain another element in it.

Based on the styling purpose and default display there are two types of elements.

Inline elements –

These are the elements that compare the given text part and offer it a specific operation. Inline elements do not begin with a fresh line and take width based on need. These are the elements that are mostly utilized with other elements. They are like

·       <a>,

·       <acronym>,

·       <b>,

·       <br>,

·       <code>,

·       <select>,

·       <textarea>,

·       <var> etc.

Example

<!DOCTYPE html>

<html>  

<head>  

</head>  

<body>  

 <a href="https://www.w3schools.com">Link</a>  

<span style="background-color: red">Inline Element</span>  

 <p>HELLO</p>  

</body>  

</html>   

Output –

Link Inline Element

HELLO

Block level elements –

The block level elements are the one whose structure is the major web page part which divides the page into the blocks that are coherent. This begins with new lines and acquires the entire web page width from left to right. The block level elements comprise of block level to be the inline elements.

Let’s see some block level elements

·       <article>,

·       <blockquote>,

·       <canvas>,

·       <dt>,

·       <form>,

·       <h1>-<h6>

·       <nav> etc.

Example

<!DOCTYPE html>  

<html>  

<head>  

</head>  

<body>  

    <div style="background-color: green">This is the first division</div>  

    <div style="background-color: blue">This is the second division</div>  

    <p style="background-color: red">This is a block level element</p>  

</body>  

</html>  

 Output – 

This is the first division

This is the second division

This is a block-level element

Here in the example the section of a web page is divided and takes the page full width. The style attribute is used which styles the content present in the body. Here the background colors are showing that it is an element of the block level.

Thus, these are some of the best elements of HTML that we discuss here and read some more interesting articles.

 

 

 

 

 

 

Post a Comment

0 Comments