DIV TAG :
is one of the most widely used in HTML elements, helping divide a webpage into clear, structured sections.
It acts as a flexible container for text, images, and links, easily styled and customized with CSS.
SYNTAX:
<div>
<!-- Content goes here -->
</div>
EXAMPLE:
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
ATTRIBUTE:
Attributes are special words used within the opening tag of an HTML element.
They provide additional information about HTML elements.
EXAMPLE:
<a href="https://www.resume.com">Visit resume</a>
DIFFERENCE BETWEEN SECTION TAG AND DIVISION TAG :
- The
<div>tag are commonly used to structure content.It is block-level but can act inline with display: inline-block. - It can be easily styled with CSS for color, spacing, size, and layout.
- The
<section>tag is semantic and indicates that the enclosed content relates to a specific theme or topic, making it more meaningful for search engines and accessibility tools.
DIVISION TAG:
- It represents its child elements and doesn’t have a special meaning.
- Use element for style purposes in webpage.
- It is a generic container and global attributes.
SECTION TAG:
- It represents its child elements and has a special meaning.
- It describes its meaning in the web page.
- use during requirements of headers or footers.
- It is not a generic container.
DISPLAY GRID:
- is a powerful two-dimensional layout system that enables the creation of complex and responsive designs.
- It allows precise control over rows, columns, and the positioning of elements.
- Grid layouts work with both rows and columns simultaneously.
- It helps create structured and responsive page layouts.
- Elements can be positioned precisely using grid lines and areas.
GRID TEMPLATE: is a shorthand property for defining grid columns, rows, and areas.
SYNTAX:
grid-template: none
EXAMPLE:
.grid-container {
display: grid;
grid-template: 150px / auto auto auto;
}
VIEW-POINT HEIGHT:
- When designing responsive websites, it's important to create layouts that adapt to different screen sizes and orientations.
- Use it effectively to create flexible, dynamic layouts.
SYNTAX:
height: 50vh;
EXAMPLE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Viewport Height Example</title>
<style>
.responsive-height {
height: 50vh;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="responsive-height">
This div is 50% of the viewport height.
</div>
</body>
</html>
VIEW-POINT WIDTH:
It's used for responsive design, scaling elements dynamically based on the width of the user's viewport.
vw Frequently used for responsive designs where elements scale with the width of the viewport.
SYNTAX:
width: 50vw;
EXAMPLE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Viewport Height Example</title>
<style>
.responsive-height {
height: 50vh;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="responsive-height">
This div is 50% of the viewport height.
</div>
</body>
</html>
Top comments (0)