Home »
HTML
HTML Blocks
By IncludeHelp Last updated : October 13, 2024
In HTML, the elements have some default displays and according to their values. The display of the element also depends on what type of element it is.
In HTML, there two kinds of display values which are as block and inline.
HTML Blocks Elements
In HTML, the block elements, when they appear on the screen a line break are present before and after the element. This line break is present with them by default. The block level elements start with their new line in the given block, their own block. Some example for the block level elements are as the paragraph tag (<p>), the heading tags ( <h1>, <h2>, <h3>, <h4>, <h5>, <h6>), the lists ( <ul>, <ol>, <dl>), the preformatted text (<pre>), the horizontal rule (<hr/>), the blockqoute (<blockquote>), and the address tag <address>.
In the block-level elements, they not only start with a new line but also takes the full width of the screen available to them. That means they stretch up to the width of the web browser.
The <div> element
<div> is a commonly used block element. It has been used in most of the webpages created. The <div> element is easy to use and manage the content presented on the overall webpage.
Example
A simple example to illustrate the <div> element.
<html>
<body>
<div style="background-color: #efefef; height: 170px; width: 230px;">
Hello From div 1
</div>
<div style="background-color: #54f314; height: 170px; width: 230px;">
hello form div 2
</div>
</body>
</html>
Output
The <hr/> tag
The <hr/> tag gives a break-in on the HTML webpage, this break is a shift of the next topic on the page. The <hr/> element can also be used to separate content in on HTML page.
Example
<html>
<body>
Content with some text
<hr/>
Content after line division.
</body>
</html>
Output
3. The heading tags (h1, h2, h3, h4, h5, h6)
The <h1> to <h6> tags are the heading tags in HTML and are used to define headings.
<h1> defines the most important heading and it gives the largest heading while the <h6> is the smallest heading and thus defines the least important headings in HTML.
Example
<html>
<body>
<h1>Include Help</h1>
<h2>Include Help</h2>
<h3>Include Help</h3>
<h4>Include Help</h4>
<h5>Include Help</h5>
<h6>Include Help</h6>
</body>
</html>
Output
Note that the next line of the heading begins as a new line. It because the heading tags are block elements thus it is represented this way.
List of All HTML Block-level Elements
The block-level elements are:
| Tag |
Description |
| <address> |
Defines contact information. |
| <article> |
Represents a blog post or news story. |
| <aside> |
Defines content that is tangentially related to the main content. |
| <blockquote> |
Represents a section that is quoted. |
| <canvas> |
Used to draw graphics via scripting. |
| <dd> |
Defines the description or value of a term in a description list. |
| <div> |
It is used for grouping elements. |
| <dl> |
Defines a description list. |
| <dt> |
Defines a term in a description list. |
| <fieldset> |
Groups related elements in a form. |
| <figcaption> |
Provides a caption for the <figure> element. |
| <figure> |
Represents self-contained content. |
| <footer> |
Represents a footer for a section or document. |
| <form> |
Defines a form for user input. |
| <h1> - <h6> |
Defines HTML headings. |
| <header> |
Defines a header for a section or document. |
| <hr> |
Represents a horizontal rule. |
| <li> |
Defines a list item in ordered or unordered lists. |
| <main> |
Represents the main content of a document. |
| <nav> |
Defines a set of navigation links. |
| <noscript> |
Defines content that is shown if the browser does not support scripting. |
| <ol> |
Defines an ordered list. |
| <p> |
Represents a paragraph of text. |
| <pre> |
Represents preformatted text (preserves spaces and line breaks). |
| <section> |
Defines a section in a document. |
| <table> |
Defines a table. |
| <tfoot> |
Defines the footer of a table. |
| <ul> |
Defines an unordered list. |
| <video> |
Embeds a video player into the webpage. |