Blocks in HTML
In this tutorial, we will learn about the blocks.
Each element of HTML has a default display value and this value depends on what type of element it is. The default display value for most of the elements is inline or block.
Block-level Elements
A block-level element always starts with a new line and occupy the full width available on the screen (stretches out to the left and rightmost position).
For example, the <div> element is a block-level element.
|
1 |
<div>Thanks For</div> |
List of Block level elements in HTML:
| <figure><footer><form><h1><h6><header><hr><li><main><nav><article><aside><blockquote><canvas><dd><div><dl><output><p><pre><noscript><ol><dt><fieldset><figcaption><section><table><tfoot><ul><video><address> |
Inline Elements
These kind of HTML elements does not start on a new line and only occupies as much width as required.
|
1 |
<span>Thanks For Your Love For</span> |
| <html> <body><h1>Welcome To T4-Tutorials</h1> <h2>Inline-Element:</h2> <span>Thanks For Your Love For</span> <span>T4-Tutorials….</span> </body> |
List of Inline elements in HTML:
| <acronym><b><small><span><strong><sub><sup>
<textarea><time><code><dfn><em><i><img><bdo><big><br> <button><cite><kbd><input><tt><var><label><map><object> <q><samp><script><select><a><abbr> |
The <div> Element
The <div> element is used to divide the body of web page into divisions and used as a container to occupt the other HTML elements.
The <div> element has no required attributes, but some attributes are common, just like id, class and style attribute.
When the div element is used with CSS, the <div> element can be used to style blocks of content.
|
1 2 3 4 |
<div style="background-color:lightgrey;color:red;margin:30px;padding:40px;">
<h2>Welcome To T4-Tutorials</h2> <p>Thanks For Your Love For T4-Tutorials..........</p> </div> |
The <span> Element
The <span> element is can be used as a container for text.
The <span> element has no required attributes, but some attributes are common, just like id, class and style attribute.
When used with CSS, the <span> element can be used to style different parts of the text.
|
1 2 |
<h1><span style="color:hotpink">Welcome To</span> T4-Tutorials</h1> <h2><span style="color:purple">Thanks For Your Love For </span> T4-Tutorials</h2> |
HTML Grouping Tags
span:
Defines a section in a document (inline).
Div :
Defines a section in a document (block-level).