Elementos semánticos HTML5
Una de las principales ventajas de HTML5 es la inclusión de elementos semánticos, o marcados semánticos, que nos ayudan a definir las distintas divisiones de una página web. En las versiones anteriores se solía utilizar la etiqueta <div>, pero actualmente es recomendado utilizar los elementos semánticos ya que describen claramente su propósito. Veamos los elementos semánticos de HTML5.
Estructura básica de un documento HTML5
Las páginas web tienen una misma estructura general que se muestra a continuación:
EJEMPLO N°1
Elementos raíz
| Elemento | Descripción |
|---|---|
| <!DOCTYPE html> | Indica que el documento está bajo el estándar de HTML5 |
<html> | Representa la raíz de un documento HTML o XHTML. |
Metadatos
| Elemento | Descripción |
|---|---|
<head> | Colección de metadatos sobre el documento, incluyendo enlaces a scripts y hojas de estilo. |
<title> | Título del documento. Se muestra en la barra superior del navegador o en las pestañas de página. |
<link> | Usada para enlazar JavaScript y CSS externos con el documento HTML actual. |
<meta> | Define los metadatos que no pueden ser definidos usando otro elemento HTML. |
<style> | Etiqueta de estilo usada para escribir CSS interno. |
Scripting
| Elemento | Descripción |
|---|---|
<script> | Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript |
<noscript> | Define un contenido alternativo a mostrar cuando el navegador no soporta scripting. |
Secciones
| Elemento | Descripción |
|---|---|
<body> | Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento. |
<section> | Define secciones de una web. |
<nav> | Define una sección que contiene un menú de navegación. |
<article> | Define unidades de contenido que podrían existir independientemente del resto del contenido. |
<aside> | Define a barra lateral de una página web. Puede contener todo tipo de contenido. Sin embargo, se suele utilizar para mostrar enlaces. |
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> | Los elemento de cabecera implementan seis niveles de cabeceras de documentos; <h1> es la de mayor importancia y <h6> es la de menor impotancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce. |
<header> | Define la cabecera de una web o de un elemento. |
<footer> | Define el pie de página. También se puede utilizar para definir el pie otros elementos. |
<address> | Define una sección que contiene información de contacto. |
<main> | Define el contenido principal del documento. Solamente existe un elemento <main> en el documento. |
No hay comentarios.:
Publicar un comentario