  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.