Scribd
Upload
188 views

HTML Block and Inline Elements

There are two types of HTML elements: block-level and inline. Block-level elements like <p> and <div> always start on a new line and take up the full width of the page, while inline elements like <span> only take up as much width as needed and do not start a new line. The <div> element is commonly used as a container for other elements and the <span> element is used to mark up text.

Uploaded by

ابراهيم العبودي
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
188 views

HTML Block and Inline Elements

There are two types of HTML elements: block-level and inline. Block-level elements like <p> and <div> always start on a new line and take up the full width of the page, while inline elements like <span> only take up as much width as needed and do not start a new line. The <div> element is commonly used as a container for other elements and the <span> element is used to mark up text.

Uploaded by

ابراهيم العبودي
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

30/08/2022 23:58 HTML Block and Inline Elements

HTML Block and Inline Elements


❮ Previous Next ❯
Every HTML element has a default display value, depending on
what type of element it is.

There are two display values: block and inline.

Block-level Elements
A block-level element always starts on a new line, and the browsers automatically add some
space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and
right as far as it can).

Two commonly used block elements are:  <p>  and  <div> .

The  <p>  element defines a paragraph in an HTML document.

The  <div>  element defines a division or a section in an HTML document.

The <p> element is a block-level element.

The <div> element is a block-level element.

Example
<p>Hello World</p>

<div>Hello World</div>

Try it Yourself »

Here are the block-level elements in HTML:

<address> <article> <aside> <blockquote> <canvas>


<dd> <div> <dl> <dt> <fieldset>

Inline
<figcaption> <figure> <footer> <form> <h1>-<h6>
<header> <hr> <li> <main> <nav>
<noscript> <ol> <p> <pre> <section>

Elements
<table> <tfoot> <ul> <video>

An inline element does not start on a new line.

https://www.w3schools.com/html/html_blocks.asp 1/3
30/08/2022 23:58 HTML Block and Inline Elements

An inline element only takes up as much width as necessary.

This is  a <span> element inside  a paragraph.

Example
<span>Hello World</span>

Try it Yourself »

Here are the inline elements in HTML:

<a> <abbr> <acronym> <b> <bdo>


<big> <br> <button> <cite> <code>
<dfn> <em> <i> <img> <input>
Note: An
<kbd> <label> <map> <object> <output> inline element
<q> <samp> <script> <select> <small> cannot contain
a block-level
<span> <strong> <sub> <sup> <textarea>
element!
<time> <tt> <var>

The <div> Element


The  <div>  element is often used as a container for other HTML elements.

The  <div>  element has no required attributes, but  style ,  class  and  id  are common.

When used together with CSS, the  <div>  element can be used to style blocks of content:

Example
<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

Try it Yourself »

https://www.w3schools.com/html/html_blocks.asp 2/3
30/08/2022 23:58 HTML Block and Inline Elements

The <span> Element


The  <span>  element is an inline container used to mark up a part of a text, or a part of a
document.

The  <span>  element has no required attributes, but  style ,  class  and  id  are common.

When used together with CSS, the  <span>  element can be used to style parts of the text:

Example
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my
father has <span style="color:darkolivegreen;font-weight:bold;">dark
green</span> eyes.</p>

Try it Yourself »

Chapter Summary
There are two display values: block and inline
A block-level element always starts on a new line and takes up the full width available
An inline element does not start on a new line and it only takes up as much width as
necessary
The  <div>  element is a block-level and is often used as a container for other HTML
elements
The  <span>  element is an inline container used to mark up a part of a text, or a part of a
document

HTML Tags
Tag Description

<div> Defines a section in a document (block-level)

<span> Defines a section in a document (inline)

For a complete list of all available HTML tags, visit our HTML Tag Reference.

https://www.w3schools.com/html/html_blocks.asp 3/3

You might also like