Full width home advertisement

How To

Science

Post Page Advertisement [Top]


What is an HTML Element?

An HTML element is an individual component of an HTML document or web page once this has been parsed into the Document Object Model. 

An HTML element is usually defined by a starting tag with content and ends with a closing tag, where the element name comes before a forward slash /.

Example


Start Tag
Content
End Tag
<p>
This is a paragraph
</p>
<h1>
This is a heading
</h1>
<div>
This is a division
</div>
<br />


<img>
This an image
</img>


Types Of HTML Element

1. Inline Element

2. Block Element

Inline Elements: An Inline element appears within sentences and do not have to appear on a new line on their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.

Block Elements: Block elements appear on the screen as if they have a line break before and after them. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line.


Grouping HTML Elements

There are two essential tags which we use very often to group various other HTML tags (i) <div> tag and (ii) <span> tag

The <div> tag

The <div> tag can be used to create webpage layout where we define different parts (Left, Right, Top etc.) of the page. This tag does not provide any visual change on the block but has more meaning and function when it is used with CSS.

Example

<!DOCTYPE html>

<html>

<head>

<title>Scholars HTML div Tag</title>

</head>

<body>

<!-- First group of tags -->

<div style="color:red">

<h4>This is the first group</h4>

<p>Below is a list of education field</p>

<ul>

<li>Art</li>

<li>Science</li>

<li>Commercial</li>

<li>Technology</li>

</ul>

</div>

<!-- Second group of tags -->

<div style="color:green">

<h4>This is the second group</h4>

<p>Below is a list of course</p>

<ul>

<li>Law</li>

<li>Medicine</li>

<li>Accounting</li>

<li>Computer Engineering</li>

</ul>

</div>

</body>

</html>

Result:

This is the first group

Below is a list of education field

· Art

· Science

· Commercial

· Technology

This is the second group

Below is a list of course

· Law

· Medicine

· Accounting

· Computer Engineering



The <span> tag

The HTML <span> tag is an inline element and can be used to group inline-elements in an HTML document. 

Example


<!DOCTYPE html>

<html>

<head>

<title>HTML span Tag</title>

</head>

<body>

<p>This is <span style="color:red">red</span> and this is <span style="color:green">green</span></p>

</body>

</html>

Result:

This is red, and this is green

Nested HTML Elements
Nested element is the method of putting one html element inside another html element. It is permitted to keep one HTML element inside another HTML element:

Example

<!DOCTYPE html>

<html>

<head>

<title>Nested Elements Example</title>

</head>

<body>

<h1>This is <i>italic</i> heading</h1>

<p>This is <u>underlined</u> paragraph</p>

</body>

</html>

This will display the following result:

This is italic heading

This is underlined paragraph


--

No comments:

Post a Comment

Bottom Ad [Post Page]

| Designed by Colorlib