Welcome to Day 03 of our 10-day HTML learning series! Over the past two days,
we’ve explored the foundational aspects of HTML and the Head section.
What is the
Today we going to learn the body section
If you miss the Day 01, Day 02 Check out the link
Introduction to html
Head Section
What is the body
Section in HTML?
The
body
section of an HTML document is where you place
all the content that you want to display on your webpage. Unlike the
<head>
section, which contains metadata and links to
resources, the body
section is where your text, images,
and interactive elements go.
Heading Tag
HTML heading are titles or subtitles that you want to display on webpage.
HTML provides six levels of headings, from
<h1>
to
<h6>
, with <h1>
being the most
important and <h6>
the least.
<body>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
</body>
In this example,
<h1>
defines the main heading, while
<h2>
and <h3>
are subheadings,
creating a clear hierarchy in your content.
Don't use h1 multiple times in your webpage
2. Paragraphs Tag
The
<p>
tag is used to define paragraphs in your HTML
document. Each paragraph is automatically separated by a space, making your
text easier to read.
<body>
<p>This is a paragraph of text. It is used to provide
detailed information to the reader.</p>
<p>Another paragraph can follow, adding more content to the
page.</p>
</body>
Using
<p>
tags helps break up your text into manageable
sections, enhancing readability.
Break Tag
The
<br>
tag in HTML is used to insert a line break
within text. It's an empty tag, meaning it doesn't require a closing tag.
<body>
<p>This is the first line.<br>This is the second
line after a line break.</p>
</body>
The hr Tag
The
<hr>
tag in HTML is used to create a horizontal line
(or horizontal rule) across the page. This tag is typically used to visually
separate content sections.
<body>
<h1>Heading 1</h1>
<p>This is the first section of content.</p>
<hr>
<h2>Heading 2</h2>
<p>This is the second section of content, separated by
a horizontal line.</p>
</body>
Image Tag
Images are a powerful way to make your webpage more engaging. Use the
<img>
tag to include images in your HTML. Don’t forget to
use the alt
attribute to provide a description of the image,
which is important for accessibility and SEO.
<body>
<img src="example.jpg" alt="A description of the image">
</body>
Link Tag
The
<a>
tag creates hyperlinks, allowing users to
navigate to other pages or websites. Use the href
attribute to
specify the link’s destination.
<body>
<a href="https://uvaiscodes.blogspot.com">Visit My
Website</a>
</body>
Conclusion:
Today’s lesson covered the core elements of the
<body>
section in HTML. Understanding how to
effectively use headings, paragraphs, images, and links will help you
create well-structured and engaging web pages.
Stay tuned for Day 04, where we’ll explore lists in HTML
Thanks for reading