HTML Block Elements
Types of HTML Elements
Any HTML page created can be categorized into Block-level elements and In-Line Elements. The names in themselves are self-explanatory.
Let's just learn one thing at a time. So,
Block Level Elements:
The block-level elements occupy the entire horizontal space. That’s the one-sentence definition of Block level elements.
Breaking it down further.
They conquer the entire width of the content. They start with a new line, i.e., they place a line break before and after the element.
The block element tags that are commonly used are:
Here is a video that helps you understand Block elements.
Let's look at a few block-level elements.
1) <br> tag:
The <br> tag in HTML gives the single line break. It is an empty tag, so it does not contain an end tag.
Syntax:
<br>
Let’s look at an example to make it more clear.
Example:
<!DOCTYPE html>
<html>
<head>
<title>br Tag</title>
</head>
<body>
<!-- br tag is used here -->
<p>Kalvi: <br> Be a Kalvian</p>
</body>
</html>
Output:
< output image should be added >
Practise Time:
<Insert code editor here>
Expected Output:
< output image should be added >
Replace Mr. John with your name and try to get a similar output.
Now let’s learn about header tags.
They are pretty important, and we get to choose the size of our headings.
<h1></h1> to <h6></h6> - Header tags
The heading tags <h1>, ... <h6> allow us to place additional importance on the text within such tags. <h1> has the largest size, and <h6> is the smallest. Many search engines put additional weight on the texts within the heading tags.
Let’s look at an example to make it more clear.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Top 6 CEO's</title>
</head>
<body>
<h1>Mr Sundar Pichai</h1>
<h2>Mr Elon Musk</h2>
<h3>Mr Satya Nadella</h3>
<h4>Mr Jeff Bezos</h4>
<h5>Mr Bill Gates</h5>
<h6>Mr Daniel Zhang</h6>
</body>
</html>
Practice Time:
It’s time for you to share the name of the top 6 people who inspired you.
Use H1 to H6 tags to showcase their names in the upcoming exercise.
Keep one thing in your mind.
The font size of their name tells how important they are to you.
Sample output:
<Insert code editor here>