Scribd
Upload
19 views

HTML Block and Inline Element

Uploaded by

zezearik
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
19 views

HTML Block and Inline Element

Uploaded by

zezearik
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

HTML Block and Inline Elements

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

The two most common display values are 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.

Here are the block-level elements in HTML:

<address <dd> <figcapti <header> <ol> <ul>


> on>
<div> <hr> <p> <video>
<article> <figure>
<dl> <li> <pre>
<aside> <footer>
<dt> <main> <section
<blockqu <form> >
ote> <fieldset <nav>
> <h1>- <table>
<canvas> <h6> <noscrip
t> <tfoot>
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>

Here are the inline elements in HTML:

<a> <big> <em> <map> <select> <textare


a>
<abbr> <br> <i> <object> <small>
<time>
<acrony <button> <img> <output> <span>
m> <tt>
<cite> <input> <q> <strong>
<b> <var>
<code> <kbd> <samp> <sub>
<bdo>
<dfn> <label> <script> <sup>
Note: An inline element cannot contain a block-level element!

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>
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>

You might also like