Use div tag in HTML: A Beginner’s Guide
Div tag in HTML
The <div> tag is very important for creating a web page. It is very easy to use, and once you understand how to use a <div>, you can easily create any type of website.
A <div> is a box that helps organize and group content on a web page. It doesn’t have any special meaning, but it is used to divide sections and apply styles.
Why Use <div>?
- It helps group elements together.
- It makes it easier to style with CSS.
- It helps with layout and structure of a webpage.
<div>
<h2>Welcome to My Website</h2>
<p>This is a simple example of using a div.</p>
</div>
A web page is divided into three parts:
- Header
- Main
- Footer
These three parts are mostly used to help divide and manage all the content effectively.
Header
The header is the top section of a web page. It usually contains:
- A logo or website name
- A navigation menu (links to other pages)
- A search bar
- Other important elements like a login/signup button
- For example, on most websites, you see the search bar and a list of pages in the header.
Main
The main section is where the primary content of the page appears. It can include:
- Text, images, and videos
- Articles or blog posts
- Forms and interactive elements
- Product listings (on e-commerce websites)
Footer
The footer is the bottom section of a web page. It usually contains:
- Copyright information
- Privacy policy and terms of service
- Contact details
- Links to social media
- Using these three sections helps to structure and organize a web page effectively.
Ordered List (<ol>) and Unordered List (<ul>)
An ordered list (<ol>) displays items in a specific order, like numbers or letters.
The <li> (list item) tag is used to add items inside the list.
Example of an Ordered List(<ol>)
<ol>
<li>Kuldip</li>
<li>BharatVibrant</li>
</ol>
This will display:
- Kuldip
- BharatVibrant
Unordered List (<ul>)
A <ul> (unordered list) does not use numbers or letters.
Instead, it displays bullets (dots) or icons before each item.
The <li> tag is used to add items to the list.
<ul>
<li>Kuldip</li>
<li>BharatVibrant</li>
</ul>
This will display:
- Kuldip
- BharatVibrant
<nav>
The <nav> tag is used to create a navigation menu on a webpage. It contains links to different sections or pages
- It helps organize website navigation.
- It improves SEO and accessibility.
- It makes navigation clear for users.
<nav>
<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”about.html”>about</a></li>
<li><a href=”contact.html”>contact</a></li>
</ul>
</nav>
Post Comment