Scribd
Upload
24 views

HTML Block and Inline Elements

Uploaded by

RamanKumarJha
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
24 views

HTML Block and Inline Elements

Uploaded by

RamanKumarJha
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/ 4

Dark code

  HTML CSS   
 Menu  Log in

Ads by
Stop seeing this ad Why this ad?

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
Dark mode
D k d
Dark code
 <p>Hello
 World</p> CSS
HTML   
<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>
<figcaption> <figure> <footer> <form> <h1>-<h6>
<header> <hr> <li> <main> <nav>
<noscript> <ol> <p> <pre> <section>
<table> <tfoot> <ul> <video>

Inline Elements
An inline element does not start on a new line.

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>
<kbd> <label> <map> <object> <output>
<q> <samp> <script> <select> <small>
<span> <strong> <sub> <sup> <textarea>
<time> <tt> <var> Dark mode
D k d
Dark code
  HTML CSS   
Note: An inline element cannot contain a block-level element!

ADVERTISEMENT

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 »

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.

Dark mode
D k d
The <span> element has no required attributes, but style , class and id are
Dark code
  HTML CSS   
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.

Dark mode
D k d

You might also like