Hello, world!

Block level elements HTML

The block-level elements or inline elements are demonstrated in the HTML Tutorial in which the major of the elements in HTML are defined by either of this elements.



HTML Block Elements

Most HTML elements are identified as either block-level elements or inline elements.
Block-level elements normally contain inline elements and other block-level elements.
Browsers present the block-level elements usually the begin and ends on a new line.
Inline elements are usually appeared within the body with no line breaks.


Example of Block-level Elements:
The following are defined as block-level elements in HTML 4:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<hr>, <p>, <pre>, <table>, <ul>, <address>
<blockquote>, <div>, <dd>, <dt>, <li>, <tbody>
<td>, <tfoot>, <th>, <form>, <tr>, <ol>
<fieldset>, <noscript>, <dl>, <thead>


Example of Inline Elements:
<b>, <i>, <u>, <em>, <strong>, <sup>
<sub>, <big>, <small>, <li>, <tt>, <abbr>
<acronym>, <ins>, <del>, <code>, <cite>, <dfn>
<kbd>, <var>, <strong>, < samp>, <a>, <bdo>,  <br>
<img>, <map>, <object>, <q>, <script>, <span>
<sub>, <sup>, <button>, <input>, <label>, <select>
<textarea>


Example of either block-level elements or inline elements. If used as inline elements these elements should not have any block-level elements:
<button>, <del>, <ins>, <map>
<object>, <script>, <applet>, <iframe>


Block Level Elements

HTML code example block level elements:

<!DOCTYPE html>
<html>
<head>
<style>
.Block {
    background-color:yellow;
    color:blue;
    margin:20px;
    padding:20px;
}              
</style>
</head>
<body>
<div class="Block">
<h2>HTML Block Elements</h2>
<p>Most HTML elements allowed within the body are categorized as either block-level elements or inline elements.</p>
</div>
<div class="Block">
<h2>Block-level Elements</h2>
<p>Block-level elements normally contain inline elements and other block-level elements. Browsers display the block-level elements usually both the beginning and ending on a new line.</p>
 </div>
 <div class="Block">
<h2>Inline Elements</h2>
<p>Inline elements are usually appear within the body without line breaks..</p>
</div>
 </body>
</html>

HTML output block level elements:

HTML Block Elements

Most HTML elements allowed within the body are categorized as either block-level elements or inline elements.

Block-level Elements

Block-level elements normally contain inline elements and other block-level elements. Browsers display the block-level elements usually both the beginning and ending on a new line.

Inline Elements

Inline elements are usually appear within the body without line breaks..

Inline Elements

HTML code example inline elements:

<!DOCTYPE html>
<html>
<head>
<style>
span.blue{
    color:blue;
}
</style>
</head>
<body>
<h1>HTML<span class="blue">Inline</span> Elements</h1>
</body>
</html>

HTML output inline elements:

HTMLInline Elements