Elementos HTML semánticos:
estos elementos simplemente significan elementos con significado. La razón es que la definición en el código le dice al navegador y al desarrollador lo que se supone que deben hacer. Enmarcando en palabras más simples, estos elementos describen el tipo de contenido que se supone que contienen.
La siguiente es la lista de algunos elementos semánticos:
- artículo
- aparte
- detalles
- figcaption
- figura
- pie de página
- forma
- encabezamiento
- principal
- Marcos
- navegación
- mesa
- sección
Ejemplo: El siguiente programa contiene algunos elementos semánticos para explicar mejor el contexto:
<!DOCTYPE html>
<html>
<head>
<title>my web page</title>
<style type="text/css">
h1{
color: green;
font-weight: bold;
}
table, tr, td{
border: 1px solid black;
}
th{
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<article>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal for Geeks</p>
</article>
<table>
<tr>
<th>head1</th>
<th>head2</th>
</tr>
<tr>
<td>A</td>
<td>0</td>
</tr>
<tr>
<td>B</td>
<td>1</td>
</tr>
</table>
</body>
</html>
Producción:
Elementos no semánticos: a diferencia de los elementos semánticos, no tienen ningún significado. No dicen nada sobre el contenido que contienen. Se pueden usar con diferentes atributos para marcar la semántica común a un grupo.
La siguiente es la lista de algunos elementos no semánticos:
- división
- lapso
Ejemplo:
El siguiente código muestra cómo funcionan los elementos no semánticos:
<!DOCTYPE html>
<html>
<head>
<title>my web page</title>
<style type="text/css">
span{
color: green;
font-size: 40px ;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<span>GeeksForGeeks</span> <br>
A computer science portal for geeks
</div>
</body>
</html>
Producción:
Diferencia entre elementos semánticos y no semánticos:
| Elementos semánticos | Elementos no semánticos |
|---|---|
| tienen significado | no tienen significado |
| describen cómo se supone que debe comportarse el contenido dentro de ellos | pueden contener cualquier cosa |
| tienen atributos específicos para su estructura | El atributo ‘clase’ se puede usar para trabajar con su estructura |
Publicación traducida automáticamente
Artículo escrito por vanshikagoyal43 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA