Learn How Does Block Element Work In HTML? - EduCBA

Trang chủ » Html Block Element Span » Learn How Does Block Element Work In HTML? - EduCBA

Có thể bạn quan tâm

Updated June 21, 2023

HTML Block Elements

 

 

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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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:

BLOCK elements

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:

BLOCK elements

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:

Home

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 –

  1. HTML Inline-Style
  2. HTML Align Center
  3. Fieldset Tag in HTML
  4. HTML Border Style

Từ khóa » Html Block Element Span