HTML block elements
What is block element?
You can imagine a block level element as a box and you will put your web page elements inside the box. It is
not a actual box but you can say it acts like a box.
Browser by default always add some space before and after the element. So we can say that a block level
element always stars with a new line.
It always tries to take maximum available width.
Most used block level element list:
1. <p>
2.<div>
3. <h2>-<h6>
4. <table>
5. <nav>
6. <form>
7. <header>
8. <hr>
9. <ul>
10. <footer>
11. <section>
12. <video> 13.<article>
14.<aside>
15.<canvas>
16. <fieldset>
17. <figcaption>
18. <figure>
19. <main>
20. <noscript>
21. <pre>
22. <tfoot>
23.<address>
Heading tag
We use heading tag for give heading of text. This tag makes our text bold and increase it's height compare to
normal text.There are 6 types of heading tag h1-h6
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>First Heading</h1>
<h2>Second Heading</h2>
<h3> Third Heading</h3>
<h4> Fourth Heading</h4>
<h5> fifth Heading</h5>
<h6> Sixth Heading</h6>
</body>
</html>
p tag
We use p tag to write paragraph.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>
Hi, I'm a paragraph.I'm form p tag.In p tag we write paragraph.So if you want to write
paragraph then write it in p tag.
</p>
</body>
</html>
Div tag
div tag is used to create sections.
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<div>Hi,welcome to this website</div>
<div>Do you want to learn programming</div>
<div>You can also get resources from here for practice </div>
</body>
</html>
Nav tag
nav tag is used to create navigation bar or create link text.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<nav>
<a href="/home">Home</a>
<a href="/Details">Details</a>
<a href="/Contact_us">Contact us</a>
</nav>
</body>
</html>
article tag
We write articles inside article tag
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<article>
<h2>this website</h2>
<p>this website is a free learning website.Here you can
learn coding and get free certificate.You can also get lot of Resources
from here </p>
</article>
</body>
</html>
hr tag
hr tag is used to create a horizontal line. This tag has no closing tag . Write this tag there, where you want
a horizontal line.
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<p>this website is a free learning website. <hr>Here you can learn coding and get free
certificate. <hr>You can also get lot of Resources from here </p>
</body>
</html>
caption tag
caption tag is used to give a caption. We write the caption text inside caption tag.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<caption>Something about this website</caption>
<p>this website is a free learning website.<hr>Here you can
learn coding and get free certificate.<hr>You can also get lot of Resources
from here </p>
</body>
</html>
This tag is used to create buttons . Button tag has two attributes, type and value. In type attribute write
button type like what kind of button is this and in value attribute write the text which you want to display
on the button like submit, reset, etc.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="submit" value="Python"></button>
<button type="reset" value="javascript"></button>
</body>
</html>
Datalist tag
With datalist tag we can create a drop down list .
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<datalist>
<option value="Javascript"></option>
<option value="Html"></option>
<option value="CSS"></option>
</datalist>
</body>
</html>
Textarea tag
With textarea tag we can create a text area where we can show text or user can write some text.
It's has four attributes:
1.warp: value is hard
2.rows:value is row number
3.cols: value is column number
4.disabled.
Disabled means user can't write anything in the text area.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<textarea rows="10" cols="6" warp="hard">
</textarea>
<textarea>
</textarea>
<textarea disabled>
</textarea>
</body>
</html>
header tag is used to create header.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header> this website </header>
</body>
</html>
Section tag
section tag is used to create sections.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<section> this website </section>
<section> Hi, welcome to this website. </section>
</body>
</html>
pre tag
If we normally give too many spaces or line break without using br tag then it will not work.But if we do all
this things inside pre tag then it will work and we will see every thing how we wrote.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<pre>
Hi everyone welcome to
selftaught.com
Learn with fun for
free.
</pre>
</body>
</html>
article tag
We write article inside article tag
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<article>
Hi everyone welcome to this website. Learn with fun for free.
</article>
</body>
</html>
Details tag
Details tag is used create a drop down button for details.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<details>
Hi everyone welcome to this website. Learn with fun for free.
</details>
</body>
</html>
Summary tag
We write summary inside summary tag.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<summary> Hi everyone welcome to this website. Learn with fun for free. </summary>
We write footer inside footer tag.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<footer>
Gmail:dfkldfgd@gmail.com
Contact us:215155
Details
</footer>
</body>
</html>
Dialog tag
dialog tag is used to create a dialog box.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<dialog>
<p>this website is a free learning website.Here you can learn coding and get free certificate.You can
also get lot of Resources from here </p>
</dialog>
</body>
</html>
fieldset tag
This tag is used to group related elements in a form.
This tag draws a box around the related elements.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="/action_page.php">
<fieldset>
<legend>Personal:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<input type="submit" value="Submit">
</fieldset>
</form> </body>
</html>