En este artículo, vamos a aprender sobre los elementos semánticos en HTML5. Los elementos semánticos son los elementos que describen su significado tanto para el desarrollador como para el navegador. HTML5 nos proporciona muchos elementos semánticos que se enumeran a continuación:
- Etiqueta <article> : una etiqueta de artículo se usa para especificar un bloque o espacio particular en la página web que es independiente y tiene contenido autónomo. Podemos usar <article> para las publicaciones del blog, los artículos de los periódicos y más entidades similares.
- Etiqueta <header> : El encabezado es la etiqueta semántica que especifica el encabezado o título de la página que se mostrará en la parte superior de la página.
- Etiqueta <nav> : Nav es el elemento o etiqueta que se usa para construir la barra de navegación de la página. Es el elemento dentro del cual definimos los enlaces de navegación que realizan algunas acciones al hacer clic en ellos.
- Etiqueta <section> : el elemento de sección se usa para definir la parte media de la página, que puede contener información sobre los próximos eventos, contenido de texto o lo que un desarrollador quiera que muestre.
- Etiqueta <main> : El elemento principal también se utiliza para definir el contenido central de la página web. Puede contener texto u otros elementos para mostrar el contenido de la página web.
- Etiqueta <aside> : El elemento aparte define el contenido en el lateral de la página web.
- Etiqueta <footer> : El pie de página es el elemento que se utiliza principalmente para proporcionar los derechos de autor o algunos enlaces adicionales que están disponibles en la página web.
- Etiqueta <table> : La etiqueta table es uno de los elementos más importantes disponibles en HTML. Nos permite crear una tabla con filas, columnas y los datos dentro de ellas, como se muestra a continuación.
- Etiqueta <form> : La etiqueta de formulario también es una etiqueta muy útil e importante. Se utiliza para crear un formulario de página web que puede ser un formulario de inicio de sesión o de envío . Utiliza etiquetas de entrada en su interior que se utilizan para obtener entradas del usuario.
- Etiquetas <figure> y <figcaption> : la etiqueta de figura contiene el contenido independiente, como imágenes, gráficos, contenido de código, etc., mientras que la etiqueta figcaption especifica el título o la descripción del contenido incluido en la etiqueta de figura. podemos colocar el título encima o debajo del contenido de la figura usando la etiqueta figcaption en la posición correspondiente.
- Etiquetas <detalles> y <resumen> : la etiqueta de detalles contiene la información que será visible en la página cuando el usuario solicite que se muestre. De forma predeterminada, el texto no está visible en la página. mientras que la etiqueta de resumen se usa para mostrar el encabezado principal de la etiqueta de detalles y el texto que se encuentra dentro de los detalles que no sean el texto de resumen será visible cuando el usuario haga clic en el contenido de la etiqueta de resumen.
- Etiqueta <hora> : etiqueta de tiempo la hora o la fecha y hora. Usamos un atributo llamado datetime dentro de él que traduce la hora a un lenguaje legible por máquina que da como resultado una respuesta de búsqueda más inteligente de los motores de búsqueda.
- Etiqueta <mark> : La etiqueta de marca contiene el contenido que está marcado o resaltado para mostrar la importancia del texto.
Veamos el uso de los elementos anteriores a través de algunos ejemplos.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML5 semantic elements</title>
<style>
body {
background-color: black;
}
.center {
display: flex;
color: white;
align-items: center;
justify-content: center;
}
nav {
display: flex;
align-items: center;
background-color: rgb(41, 40, 40);
height: 8vh;
}
ol {
display: flex;
}
ol li {
list-style: none;
padding: 15px;
}
ol li a {
text-decoration: none;
color: white;
}
.container {
width: 65vw;
height: 65vh;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
border-bottom: 1px solid grey;
}
section img {
position: absolute;
left: 3vw;
top: 8vh;
height: 40vh;
width: 60vw;
border-radius: 15px;
}
main {
position: absolute;
top: 50vh;
left: 3vw;
right: 7vw;
}
.mid {
display: flex;
flex-direction: row;
}
aside img {
height: 65vh;
width: 30vw;
margin-left: 2vw;
}
footer {
margin-top: 6vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
</style>
</head>
<body>
<header class="center">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220510093811/GFGLogo2.png"
alt="GFG logo" height="50px" width="50px">
<h2>GeeksforGeek</h2>
</header>
<nav>
<ol>
<li><a href="#">Contribute</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Events</a></li>
</ol>
</nav>
<div class="mid">
<div class="container">
<section>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220509230929/article-300x106.png"
alt="section image">
</section>
<main>
<h2>12 pip Commands For Python Developers</h2>
<p>
Python has been preferred over all
programming languages for technological
advancement. It is one of the most
lucrative programming languages that
is used as the… Read More
</p>
</main>
</div>
<aside>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220509230937/whatnew-300x258.png"
alt="aside image">
</aside>
</div>
<footer>
All copyrights reserved
</footer>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML 5 semantic elements</title>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
table,
th,
td {
border: 2px solid black;
}
</style>
</head>
<body>
<div class="container">
<table width="50%">
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>
GeeksforGeeks
</td>
<td>
A computer science portal for all geeks.
</td>
</tr>
<tr>
<td>
Apple
</td>
<td>
Manufacture smartphones with their own
processor and other properties.
</td>
</tr>
<tr>
<td>
Toyota
</td>
<td>
A car manufacturing company with a lot of
customers around the globe.
</td>
</tr>
</table>
</div>
</body>
</html>
Producción:
Ejemplo 3:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML 5 semantic elements</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 30vw;
height: 30vh;
}
form input {
margin: 10px 0;
border: none;
border-bottom: 2px solid grey;
background-color: transparent;
width: 20vw;
}
</style>
</head>
<body>
<div class="container">
<h2>It is the form tag</h2>
<form>
<input type="text" placeholder="Enter Username">
<input type="email" placeholder="Enter your email">
<input type="password" placeholder="Enter password">
<button>Submit</button>
</form>
</div>
</body>
</html>
Producción:
Ejemplo 4:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML semantic elements</title>
<style>
.container {
display: flex;
/* flex-direction: row; */
align-items: center;
justify-content: center;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Hey Geek, Welcome to GFG!</h1>
</div>
<div class="container">
<figure>
<figcaption>
caption: GeeksforGeeks is a computer
science portal for geeks.
</figcaption>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220428080551/gfglogo.png"
alt="">
</figure>
<figure>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220428080551/gfglogo.png"
alt="">
<figcaption>
caption: This is the logo of GFG.
</figcaption>
</figure>
</div>
</body>
</html>
Producción:
Ejemplo 5:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML semantic elements</title>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<details>
<summary>Hey Geek, Welcome to GFG!</summary>
<p>
A computer science portal and online
learning platform all for geeks.
</p>
</details>
</div>
</body>
</html>
Producción:
Ejemplo 6:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML semantic elements</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h2>Hey Geek, Welcome to GFG!</h2>
</div>
<div class="container">
<h3>
<mark>GeeksforGeeks</mark> is a
<mark>computer science portal</mark> as well
as the <mark>online learning platform</mark>
for all geeks.
</h3>
<p>
Enroll yourself on 15 May, 2022 for the
50% discount on GFG courses between
<time datetime="2022-05-15">10:00</time> AM to
<time datetime="2022-05-15">12:00</time> PM
</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhisheksainiaggarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA