HTML Blocks
HTML is the language used to build web pages using different blocks into it. Those elements are styling, divided into two different types as HTML Blocks level elements and inline elements. All these kinds of elements are enclosed into the
tag of HTML blocks. Block-level elements are structured to design the main layout of your web page.If we are talking about the structure view, it creates a bigger structure view than the inline elements view. Every block-level elements start with a new line occupying the full width of the screen. They must be written within opening < > and closing tag < />.
Grouping of elements is an important method to divide layout in the forms of sections or sub-sections. It’s possible to put any block elements into another block element, as well as we are also able to put inline elements into the HTML Blocks elements, but it is not possible to put block-level elements into the inline elements rather than element tag.
Syntax for different HTML Blocks
Let’s see the syntax for different HTML Block-level elements are as follows:
1. div element: It works as a block element, which takes the full width of the screen and always starts on a new line.
<div>
{ ……Lines of code…...}
</div>2. table: table is used to show data in a tabular format including table header, table body having table row and a table column.
<table> <tr> <th></th> <th></th> </tr> <tr> <td></td> <td></td> </tr> </table>
3. Listing elements: Ordered List & Unordered List.
<h6>An Unordered list </h6> <ul> <li></li> <li></li> <li></li> </ul> <h4>An Ordered list</h4> <ol> <li></li> <li></li> <li></li> </ol>
4. Putting form elements: Putting form elements to create an HTML form as follows.
<form> <input type=”text” name=” ” /> <textarea rows=” 3” col=”5” name=””></textarea> <input type=”submit” name=”” /> </form>
Elements of HTML Blocks
There are different elements used as HTML Block-level elements are as follows:
- : Address tag is used to specify the author’s contact information in the HTML article.
-
: The article is used to specify the content which is self-contained. - This is a kind of elements located aside from the main content; usually, it is treated as a sidebar.
-
:
Whenever we are taking content from another source, blockquote is used. - Canvas is an element is used in web documents for providing graphic space.
-
: It is the most important element in all over web development which is used to divide HTML documents into sections or division.
- Whatever group related labels or elements are used in web forms that are clubbed together into the fieldset.
- HTML forms are defined using this block-level element. It is most commonly used in the web development process.
- It is used to indicates the footer section of a web page.
-
These are the headings used in HTML language defining level 1 to 6.:
: This element is used to indicates the header section of the web page.- This is the latest element introduced in HTML 5, which is used to indicates the section of the page, including navigation links into it.
: Section element is used to represents a generic section to its document.: Whenever we want to show data in the tabular format, a table is a perfect solution. It will create a table to your HTML document.
- If you want to include video content in your HTML document, then it’s also possible by using simple video elements in your code.
- : If a user wants to show a list of items, then it’s possible using the
- element.
- :
- :
this element used to describe different terms in the format of the description list.Examples of HTML Blocks
Here are some examples of HTML blocks which are given below:
Example #1
In the below example, we are going to use some basic Html block elements like div, p, headings, lists element with the ordered and unordered list, etc.
Code:
<html> <head> <title>HTML Block Level Elements </title> </head> <body> <h1>HTML Block Level Elements </h1> <p>This is the example of HTML block elements showing multiple block level elements enclosed within it .Here we can also use inline elements too </p> <div> <h3>Example including div , p , headings elements, list elements</h3> <p>This example shows different kind of HTML block elements like div, p , headings in between h1 to h6 </p> </div> <h2>Example of Lists</h2> <h4>An Unordered HTML List showing Countries </h4> <ul> <li>Mumbai</li> <li>Pune</li> <li>Nagpur</li> </ul> <h4>An Ordered HTML List showing Countries</h4> <ol> <li>Mumbai</li> <li>Pune</li> <li>Nagpur</li> </ol> </body> </html>
Copy after loginOutput:
Example #2
Here we will see another example in which we are creating a table.
Code:
<style> table { border-collapse: collapse; } th, td { border: 1px solid black; padding: 10px; text-align: left; } </style> <table> <tr> <th>Sr No</th> <th>Emp ID</th> <th>Emp Name</th> <th>Designation</th> </tr> <tr> <td>1</td> <td>111</td> <td>John</td> <td>Developer</td> </tr> <tr> <td>2</td> <td>112</td> <td>Alebela</td> <td>Tester</td> </tr> <tr> <td>3</td> <td>113</td> <td>Rakesh</td> <td>Project Manager</td> </tr> <tr> <td>4</td> <td>114</td> <td>Siya</td> <td>UX Designer</td> </tr> <tr> <td>5</td> <td>115</td> <td>Kuldeep</td> <td>Web Developer</td> </tr> </table>Copy after loginOutput:
Example #3
Now by using HTML blocks elements, we are going to create an HTML form as follows:
Code:
<!DOCTYPE html> <html> <head> <title>Password Input Control</title> </head> <body > <form > <h2>Welcome to HTMl Block Demo</h2> <h4>Please login here</h4> User ID : <input type = "text" name = "user_id" /> <br><br> Password: <input type = "password" name = "password" /> <br><br> <input type = "checkbox" name = "remember" value = "on"> Remember Me <br><br> <input type = "submit" name = "Login" value = "Submit" /> </form> </body> </html>
Copy after loginOutput:
Example #4
Here we are trying to Address the element in HTML blocks.
Code:
<address> Presented BY <a href="mailto:[email protected]">Narendra Modi</a>.<br> Visit us at:Delhi<br> primeminister.com<br> Box 104, Red Fort<br> Delhi </address>
Copy after loginOutput:
Conclusion
The above information concluded that the HTML blocks level element included in the HTML document’s body. It will create some large HTML blocks of sections like paragraphs or pages with the division. One can include another block-level element into the block-level elements. It’s also possible to include inline elements into the block-level element but including block-level elements into the inline elements is not possible.
The above is the detailed content of HTML Blocks. For more information, please follow other related articles on the PHP Chinese website!
Statement of this WebsiteThe content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Assassin's Creed Shadows: Seashell Riddle Solution1 months ago By DDDWhat's New in Windows 11 KB5054979 & How to Fix Update Issues3 weeks ago By DDDWhere to find the Crane Control Keycard in Atomfall1 months ago By DDDHow to fix KB5055523 fails to install in Windows 11?2 weeks ago By DDDInZoi: How To Apply To School And University3 weeks ago By DDD
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
See all articles
Table Border in HTML
Sep 04, 2024 pm 04:49 PM
Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.
Nested Table in HTML
Sep 04, 2024 pm 04:49 PM
This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.
HTML margin-left
Sep 04, 2024 pm 04:48 PM
Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.
HTML Table Layout
Sep 04, 2024 pm 04:54 PM
Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.
HTML Input Placeholder
Sep 04, 2024 pm 04:54 PM
Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.
HTML Ordered List
Sep 04, 2024 pm 04:43 PM
Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively
Moving Text in HTML
Sep 04, 2024 pm 04:45 PM
Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.
HTML onclick Button
Sep 04, 2024 pm 04:49 PM
Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
