Div, Margin, Padding and HTML Semantic Elemens
The <div> tag defines a division or a section in an HTML document. Margins are used to create space around elements, outside of any defined borders. Padding is used to create space around an element’s content, inside of any defined borders. Finally, HTML Semantic Elements make the web page more understandable, organized, readable and accessible while coding.
Div
In HTML, div is a tag used to create the page layout. It comes from the word “Division” and is used to create different regions by dividing the page.
The div tag is used with the opening and closing tags as “<div>” and “</div>”. You can add any content in it such as text, images, other HTML tags or text.
The div tag is also used to format the content to be displayed on the page using CSS.
For example, the following code block creates two different regions on the page using a div tag:
<!DOCTYPE html>
<html>
<head>
<title>Div Example</title>
<style>
.left {
float: left;
width: 48%;
background-color: red;
padding: 10px;
}
.right {
float: right;
width: 48%;
background-color: gray;
padding: 10px;
}
</style>
</head>
<body>
<div class="left">
<h2>Left side div element</h2>
<p>You can put content here</p>
</div>
<div class="right">
<h2>Right side div element</h2>
<p>You can put content here</p>
</div>
</body>
</html>In this example, the page is divided into two parts, one on the left and one on the right. The right side has a gray background while the right side has a red background. Both div regions can contain headers and paragraphs of text. CSS defines the size and background color of the sections, giving them a nicer look.
After writing this code, the website looks like this:
Margin
Margin is a CSS property that expresses the amount of space around an HTML element. Margin is used to control the spacing between the content of an element and other elements.
The margin property can be defined primarily for four different aspects of an element: top, bottom, right and left. Different margin values can be assigned for these directions. Margin values can be specified in pixels, percentages, or em units.
For example, the following code block creates a div element and sets a 20px margin for all aspects of that div element:
<!DOCTYPE html>
<html>
<head>
<title>Margin Example</title>
<style>
div {
margin: 20px;
background-color: gray;
padding: 10px;
}
</style>
</head>
<body>
<div>
<h2>This is a div example</h2>
<p>This is a paragraph inside the div tag</p>
<img src="https://picsum.photos/200/200" alt="Picture Example">
</div>
</body>
</html>In this example, all content inside the div element will have a margin of 20 pixels. This leaves a 20px gap between the content of the div element and the other elements. The padding property controls the size of the box containing the content inside the div element, while the margin property controls the space around the box.
After writing this code, the website looks like this:
Padding
Padding is a CSS property that expresses the amount of space between the content of an HTML element and its surroundings. Padding is used to control the spacing around the content of an element.
The padding property, like the margin property, can be defined for four different aspects of an element: top, right, bottom, and left. Different padding values can be assigned for these directions. Padding values can be specified in pixels, percentages, or em units.
For example, the following code block creates a div element and sets a 30px padding for all aspects of that div element:
<!DOCTYPE html>
<html>
<head>
<title>Padding Example</title>
<style>
div {
padding: 20px;
background-color: #f2f2f2;
margin: 20px;
}
</style>
</head>
<body>
<div>
<h2>This is a div example</h2>
<p>Some Content</p>
<img src="https://picsum.photos/200/200" alt="Picture Example">
</div>
</body>
</html>In this example, all content inside the div element will have a padding value of 30px. This leaves a 30px gap between the div element and the content. Unlike with the margin property, the padding property controls the spacing between the content and its surroundings, while the margin property controls the spacing between the element itself and other elements.
After writing this code, the website looks like this:
HTML Semantic Elements
HTML Semantic elements are standard HTML elements used to create content on a web page. Semantic HTML elements make the web page more understandable, organized, readable and accessible while coding.
The main semantic HTML elements are:
<header>: Specifies the title or header of the page.<nav>: Specifies the page’s navigation menu.<main>: Specifies the main content of the page.<section>: Specifies parts of the page.<article>: Specifies an individual unit of content, for example a blog post or a news article.<aside>: Specifies the content on the side of the page, for example, something like an ad, a search box.<footer>: Specifies the footer of the page.
