La agrupación juega un papel vital en nuestra página web porque ayuda al desarrollador a apuntar a clases e id específicas, lo que facilita la posición, el estilo o la manipulación de la página web con la ayuda de HTML , CSS o JavaScript .
La agrupación se puede realizar con la ayuda de varias etiquetas, como <div> , <header> , <footer> y < section> .
HTML <div> : es una etiqueta a nivel de bloque que agrupa varias etiquetas HTML en un solo bloque. Tiene estilo con CSS o se puede manipular con JavaScript.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
background: yellow;
}
.div2 {
background: blue;
}
</style>
</head>
<body>
<div class="div1">
<h1>In Div1</h1>
</div>
<div class="div2">
<h1>In Div2</h1>
</div>
</body>
</html>
Producción:
HTML <header> : esta etiqueta contiene el eslogan o podemos decir que contiene el encabezado principal o los enlaces de navegación de nuestra página web y se coloca en la parte superior de nuestra página web.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
background: yellow;
}
.div2 {
background: blue;
}
</style>
</head>
<body>
<header>
<h1>This is Heading..</h1>
<p>This is paragraph in the header group</p>
</header>
<div class="div1">
<h1>In Div1</h1>
</div>
<div class="div2">
<h1>In Div2</h1>
</div>
</body>
</html>
Producción:
HTML <pie de página> : esta etiqueta contiene información de derechos de autor, información de contacto, enlace de regreso al principio y varios otros documentos relacionados y se coloca en la parte inferior de nuestra página web.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
background: yellow;
}
.div2 {
background: blue;
}
</style>
</head>
<body>
<header>
<h1>This is heading</h1>
<p>This is paragraph in header group</p>
</header>
<div class="div1">
<h1>In Div1</h1>
</div>
<div class="div2">
<h1>In Div2</h1>
</div>
<footer>
<p>This is footer information</p>
<p><a href="mailto:xyz@gmail.com">Email</a></p>
</footer>
</body>
</html>
Producción:
HTML <sección> : esta etiqueta se utiliza para definir la sección en el documento.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
background: yellow;
}
.div2 {
background: blue;
}
#sectionID {
background: grey;
}
</style>
</head>
<body>
<header>
<h1>This is heading</h1>
<p>This is paragraph in header group</p>
</header>
<section id="sectionID">
<b>
<p>This content belongs to section group.</p>
<p>
HTML is a hypertext markup language
which is used to design the web pages
</p>
<p>CSS is used to design the web pages.</p>
<p>
Javascript helps us to manipulate our data
on a webpage.
</p>
<p>Section group ends here..</p>
</b>
</section>
<footer>
<p>This is footer information.</p>
<p><a href="mailto:xyz@gmail.com">Email</a></p>
</footer>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por kashyapsingh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA