Scribd
Upload
12 views

Block-and-Inline-Elements

The document explains the differences between block and inline elements in HTML, detailing their characteristics and providing examples for each type. Block elements occupy the full width and start on a new line, while inline elements only take up necessary width and do not start on a new line. Additionally, it introduces inline-block elements, which combine features of both inline and block elements, allowing for modifiable height and width.

Uploaded by

brin26september
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Block-and-Inline-Elements

The document explains the differences between block and inline elements in HTML, detailing their characteristics and providing examples for each type. Block elements occupy the full width and start on a new line, while inline elements only take up necessary width and do not start on a new line. Additionally, it introduces inline-block elements, which combine features of both inline and block elements, allowing for modifiable height and width.

Uploaded by

brin26september
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML

Topperworld.in

Block and Inline Elements

The inline and block elements of HTML are one of the important areas where
web developers often get confused because they were unable to know which
are inline and block elements which may cause clumsiness in a webpage in
case he assumes some element to be a block but it is an inline element which
causes next element comes next to it.

 Block elements
They consume the entire width available irrespective of their sufficiency.
They always start in a new line and have top and bottom margins.
It does not contain any other elements next to it.

Examples of Block elements:


1) <h1>-<h6> : This element is used for including headings of different
sizes ranging from 1 to 6.

2) <div>: This is a container tag and is used to make separate divisions of


content on the web page.

3) <hr>: This is an empty tag and is used for separating content by


horizontal lines.

4) <li>: This tag is used for including list items of an ordered or


unordered list.

5) <ul>: This tag is used to make an unordered list.

6) <ol>: This tag is used to make an ordered list.

7) <p>: This tag is used to include paragraphs of content in the webpage.

©Topperworld
HTML

8) <table>: This tag is used for including the tables in the webpage when
there is a need for tabular data.

HTML Semantic block elements:


1. <header>: This tag is used for including all the main things of the
webpage like navbar, logos, and heading of the webpage.

2. <nav>: This tag helps to navigate through different sections by


including different blocks of hyperlinks in the webpage.

3. <footer>: This contains all information about the authorization,


contact, and copyright details of the webpage.

4. <main>: The main content of the webpage resides in this tag.

5. <section> : This is used separate different sections in the webpage.

6. <article>: This tag is used to include different independent articles on


the webpage.

7. <aside>: This tag is used to mention details of the main content aside.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
p { background-color: #8A55; }
</style> </head>
<body>
<p>This paragraph is a block
level element; its background has been colored to display the
paragraph's parent element.</p>
</body>
</html>

©Topperworld
HTML

Output:

 Inline elements
Inline elements occupy only enough width that is sufficient to it and
allows other elements next to it which are inline. Inline elements don’t
start from a new line and don’t have top and bottom margins as block
elements have.

Examples of Inline elements:

 <a>: This tag is used for including hyperlinks in the webpage.

 <br>: This tag is used for mentioning line breaks in the webpage
wherever needed.

 <script> : This tag is used for including external and internal JavaScript
codes.

 <input>: This tag is used for taking input from the users and is mainly
used in forms.

 <img>: This tag is used for including different images in the webpage
to add beauty to the webpage.

 <span>: This is an inline container that takes necessary space only.

 <b>: This tag is used in places where bold text is needed.

 <label>: The tag in HTML is used to provide a usability improvement


for mouse users i.e, if a user clicks on the text within the <label>
element, it toggles the control.

©Topperworld
HTML

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.highlight{
background-color:#efefef}
</style>
</head>
<body>
<div>It is a demo span <span class="highlight">inline
element</span>;
whose span is an highlighted with a grey color indicatin
g that it is an inline tag
</div>
</body>
</html>

Output:

 Inline Block Elements


The display value of inline-block works similarly to inline with one exception:
the height and width of that element become modifiable.

©Topperworld
HTML

Example:

<!DOCTYPE html>
<html>
<head>
<style>
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
color:white;
border: 1px solid blue;
background-color: blue;
}
</style>
</head>
<body>
<div>This is an example of inline-
block element with a span colored as blue <span class="b">I
nline-Block</span> </div>
</body>
</html>

Output:

©Topperworld
HTML

 Difference between Inline and Block elements

Inline Elements Block Elements

Inline elements occupy only Block Elements occupy the full width
sufficient width required. irrespective of their sufficiency.

Inline elements don’t start in a


Block elements always start in a line.
new line.

Inline elements allow other Block elements doesn’t allow


inline elements to sit behind. other elements to sit behind

Inline elements don’t have top Block elements have top and bottom
and bottom margin margin.

©Topperworld

You might also like