HTML Block Elements
By AnkitIn this tutorial, we will learn about HTML block elements. By default, Block-level takes up the full width available. It always starts on a new line. It also takes up as much horizontal space as possible.
Syntax of HTML Block Elements:
<html> <body> <div> ......codes...... ................. </div> </body> </html>
Here are some examples of Block-level Elements:
- <section>,<div>,<article>
- <p>
- <ol>, <ul>, <dl>
How does it work?
As we know, In web pages, Block elements need proper alignments to see the users more attractive in nature. Therefore, Block elements want to set margins in HTML. To highlight the web pages including width, margin and styles, we set the borders. There are many components in CSS styles:
- Border: It represents Border in HTML documents.
- Padding: It represents format like padding- padding-bottom, padding-left, padding-right, padding-top.
- Content– It represents content of HTML. for examples: videos, photos, text.
HTML Block elements uses the formatting model of CSS. In most cases, it automatically take care of Block Elements. If some elements need images or background color, that would be assigned to them. Margin areas shows the parent elements exception will occur if parent element does not possess the display properties that has been assigned to body section.
Example:
<html>
<head>
<style>
div.codespeedy {width:2000px;border:3px dotted black;padding:8px;}
div.codespeedy ul {color:blue;}
</style>
</head>
<body>
<div class="codespeedy" style="color:black">
<p>Codespeedy Limited</p>
<ul>
<li>Mumbai</li>
<li>Bangalore</li>
<li>Pune</li>
</ul>
</div>
</body>
</html>Output:
Codespeedy Limited . Mumbai . Bangalore . Pune
Leave a Reply