Updated June 21, 2023
Introduction to HTML Block Elements
Html comprises various elements that will act as a building block of every web page. Different viewpoints exist for each web page, and both the front and back ends will implement logic. Html will have user-defined or customized requirements highlighting web pages like CSS, bootstrap frameworks, etc. In general, CSS style divides HTML elements into two categories for its purpose: 1. block-level elements and 2. inline elements. We already discussed previous articles like span and div <span> element is used for inline elements in HTML and <div> tag is used for block-level elements in HTML.
Syntax:
<html>
<body>
<div>
----------codes------
----------------------
</div>
</body>
</html>In general, every HTML tag has its predefined structures and features. Block elements in HTML have different tags we will use in the documents. Some of the tags are listed below.
Tags:
<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>
The mentioned tags are predefined block elements in HTML. Each tag serves a different functionality when invoked in HTML documents. Most probably, we use <div> tags in block-level elements. Codes are general syntax for the block-level elements in HTML, and also we will use the predefined tags mentioned above when needed; each tag will have independent and self-contained contents in HTML.
How does Block Element work in HTML?
It will use the CSS styles with the formatting model and cover both the inline and block elements. Most probably, it will take care of formatting block elements. Formatting block elements is one of the block-level elements in HTML. Every CSS element looks like a form; it contains a box with some components like content, padding, and border; these are the different components in CSS styles.
- Content: It denotes the general content of the HTML elements such as text, pictures, and videos, etc.
- Padding: It denotes any padding covered into any contents by the format, like padding-top,padding-left,padding-right,padding-bottom, etc. These are the properties.
- Border: It denotes any borders in HTML contents and padding; we set borders using border-top, border-bottom, etc.
Block elements want to set the margins and padding in HTML documents. Because web pages need proper alignments to view the users more attractive in nature. In something, the block-elements section contains margins outside an element; padding inside elements will surround the contents. If you require background color or images for the elements, you can assign them, and they will be displayed in both the content and padding areas. In general, margin areas are transparent and display the background of the parent elements. However, an exception occurs if the parent element, such as the body section, has not been assigned any display properties. In such cases, both margin and padding areas display colors or images. Margin refers to the distance between the outer edge of HTML elements, including both content and padding.
We also set the borders to highlight the web pages, including border colors, styles, width, and margin. We control the border’s appearance around an element and can specify various border types. CSS’s border-style property enables users to set their own customized border styles specified with values like none, solid, double, hidden, dotted, dashed, groove, ridge, inset, and outset. If we have aligned the documents with borders, we don’t specify any values means the default value is none; it means no border is allotted for your page. All these border styles are included in the css1 version except hidden values, which were added in the css2 version.
Starting from HTML 4, the div element is a block-level element for designing documents with specified divisions. Div elements lack specific formatting characteristics by default. However, you can still use the deprecated Align attributes in HTML to the center or align content to the right side; it’s a default in deprecated elements in HTML. In <div> tag was intended to take any format in CSS styles, and div has the options like nested div tags and other elements nested with div elements whatever styles, borders, and alignments we specified it would affect for those nested elements. Some basic codes for div tags with border, background image, and other user-defined format styles.
Code:
div.sample {width:150px;background:#FF0002;border:2px dotted black;padding:7px;}
div.sample ul {color:green;}The above codes are samples to understand the CSS attributes and functionalities implemented with the div tag. We will discuss some basic examples in the below sections.
Examples of HTML Block Elements
Given below are the following examples:
Example #1
Code:
<html>
<head>
<style>
div.sample {width:150px;border:2px dotted black;padding:7px;}
div.sample ul {color:green;}
</style>
</head>
<body>
<div class="sample" style="color:black">
<p>Samples</p>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Pineapple</li>
</ul>
</div>
</body>
</html>Output:
Example #2
Code:
<html>
<head>
<style>
div.sample {width:150px;border:2px dotted black;padding:7px;}
div.sample ul {color:green;}
</style>
</head>
<body>
<p>Sample <span style = "color:green">green</span>
<span style = "color:black">black</span></p>
</body>
</html>Output:
Example #3
Code:
<html>
<head>
<style>
.first {
background-color: green;
list-style-type: none;
text-align: center;
margin: 2;
padding: 2;
}
.second {
display: inline-block;
font-size: 30px;
padding: 23px;
}
</style>
</head>
<body>
<ul class="first">
<li><a href="#home">Home</a></li>
<li><a href="#aboutus">AboutUs</a></li>
<li><a href="#contactus">Contact Us</a></li>
</ul>
</body>
</html>Output:
In the above example, we see the different scenarios for the block-level elements first two examples, we use and align the menus or tabs or text values in the <div> and <span> tags.<span> is used for inline elements, but <p> paragraph tag will use for blocking the text or values which is to be specified in the user-level areas. A final example will be used for the <nav> element in HTML for navigating the web pages with some block-level contents. We already discussed the working of block-level elements area; block-level attributes enable the activation of specific CSS properties such as background color, text styles with list options, text alignments, padding and margins, and font styles; these attributes have values specified with the navigation web pages.
Conclusion
In the conclusion part, the HTML block elements will occupy the entire space for its parent elements (containers) to create the blocks. Browsers will generally display the block-level elements with the new line and full width before and after the HTML elements. We can visualize the elements with boxes like a stack.
Recommended Articles
This is a guide to HTML Block Elements. Here we discuss the introduction, how Block Element works in HTML, and respective examples. You can also go through our other related articles to learn more –
