HTML-Booklet

Square Elements 

Square components show up on the screen as though they have a line break when them. For instance, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr/>, <blockquote>, and <address> components are all square level components. They all begin on their own new line, and anything that tails them shows up on its own new line. 

Inline Elements 

Inline components, then again, can show up inside sentences and don’t need to show up on another line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> components are all inline components. 

Gathering HTML Elements 

There are two significant labels which we utilize often to assemble different other HTML labels (I) <div> tag and (ii) <span> tag 

The <div> tag 

This is the significant square level label which assumes a major job in gathering different other HTML labels and applying CSS on gathering of components. Indeed, even now <div> tag can be utilized to make site page design where we characterize various parts (Left, Right, Top and so forth.) of the page utilizing <div> tag. This tag doesn’t give any visual change on the square however this has all the more significance when it is utilized with CSS. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!– First group of tags –>
<div style=”color:blue”>
<h4>Heading of first group</h4>
<p>list of Animals</p>
<ul>
<li>Lion</li>
<li>Tiger</li>
<li>Wolf</li>
<li>Elephant</li>
</ul>
</div>
<!– Second group of tags –>
<div style=”color:orange”>
<h4>Heading of second group</h4>
<p>list of  Flowers</p>
<ul>
<li>Jasmine</li>
<li>lily</li>
<li>Rose</li>
<li>Hibiscus</li>
</ul>
</div>   
</body>
</html>

Output:

Heading of first group

list of Animals

  • Lion
  • Tiger
  • Wolf
  • Elephant

Heading of second group

list of  Flowers

  • Jasmine
  • lily
  • Rose
  • Hibiscus

 

Following is a straightforward case of <div> tag. We will get the hang of Cascading Style Sheet (CSS) in a different part yet we utilized it here to show the utilization of <div> tag. 

The <span> tag 

The HTML <span> is an inline component and it very well may be utilized to amass inline-components in a HTML record. This tag additionally doesn’t give any visual change on the square however has all the more importance when it is utilized with CSS. 

The distinction between the <span> tag and the <div> tag is that the <span> tag is utilized with inline components though the <div> tag is utilized with square level components. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>I like <span style=”color:orange”>Blue</span>And I don’t like
<span style=”color:orange”>Orange</span></p>   
</body>
</html>

Output:

I like Blue And I don’t like Orange

Following is a straightforward case of <span> tag. We will get the hang of Cascading Style Sheet (CSS) in a different part yet we utilized it here to show the utilization of <span> tag.

 

Share