HTML CSS
Menu
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.
A block-level element always takes up the full width available (stretches out
to the left and right as far as it can).
A block level element has a top and a bottom margin, whereas an inline
element does not.
The <div> element is a block-level element.
Example
<div>Hello World</div>
Try
it Yourself
HTML » CSS
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>
Note: An inline element cannot contain a block-level element!
HTML CSS
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.
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
HTMLhas CSS
<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.
❮ Previous Next ❯
HTML CSS NEW
We just launched
W3Schools videos
Explore now
COLOR PICKER
Get certified
by completing
a course today!
school
w3 s
2
CE
02
TI 2
R
FI .
ED
Get started
CODE GAME
HTML CSS
Play Game
Report Error
Forum
About
Shop
Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
HTML CSS PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples
Web Courses
HTML Course
CSS Course
JavaScript Course
Front End Course
SQL Course
Python Course
PHP Course
jQuery Course
Java Course
C++ Course
C# Course
XML Course
Get Certified »
W3Schools is optimized for learning and training. Examples might be simplified to improve
reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid
errors, but we cannot warrant full correctness of all content.
While using W3Schools, you agree
to have read and accepted our terms of use, cookie and privacy policy.
Copyright 1999-2022 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.
