HTML5: sintaxis
El lenguaje HTML 5 tiene una sintaxis HTML "personalizada" que es compatible con documentos HTML 4 y XHTML1 publicados en la Web, pero no es compatible con las características SGML más esotéricas de HTML 4.
HTML 5 no tiene las mismas reglas de sintaxis que XHTML donde necesitábamos nombres de etiquetas en minúsculas, citando nuestros atributos, un atributo tenía que tener un valor y cerrar todos los elementos vacíos.
HTML5 viene con mucha flexibilidad y es compatible con las siguientes características:
- Nombres de etiquetas en mayúsculas.
- Las cotizaciones son opcionales para los atributos.
- Los valores de los atributos son opcionales.
- El cierre de elementos vacíos es opcional.
El DOCTYPE
Los DOCTYPE en versiones anteriores de HTML eran más largos porque el lenguaje HTML estaba basado en SGML y, por lo tanto, requería una referencia a una DTD.
Los autores de HTML 5 usarían una sintaxis simple para especificar DOCTYPE de la siguiente manera:
<!DOCTYPE html>La sintaxis anterior no distingue entre mayúsculas y minúsculas.
Codificación de caracteres
Los autores de HTML 5 pueden usar una sintaxis simple para especificar la codificación de caracteres de la siguiente manera:
<meta charset = "UTF-8">La sintaxis anterior no distingue entre mayúsculas y minúsculas.
La etiqueta <script>
Es una práctica común agregar un atributo de tipo con un valor de "texto / javascript" a los elementos del script de la siguiente manera:
<script type = "text/javascript" src = "scriptfile.js"></script>HTML 5 elimina la información adicional requerida y puede usar simplemente la siguiente sintaxis:
<script src = "scriptfile.js"></script>La etiqueta <link>
Hasta ahora estabas escribiendo <link> de la siguiente manera:
<link rel = "stylesheet" type = "text/css" href = "stylefile.css">HTML 5 elimina la información adicional requerida y simplemente puede usar la siguiente sintaxis:
<link rel = "stylesheet" href = "stylefile.css">Elementos HTML5
Los elementos HTML5 se marcan mediante etiquetas de inicio y de finalización. Las etiquetas se delimitan mediante corchetes angulares con el nombre de la etiqueta en el medio.
La diferencia entre las etiquetas de inicio y las etiquetas de fin es que las últimas incluyen una barra antes del nombre de la etiqueta.
A continuación se muestra el ejemplo de un elemento HTML5:
<p>...</p>Los nombres de las etiquetas HTML5 no distinguen entre mayúsculas y minúsculas y pueden escribirse en mayúsculas o en mayúsculas, aunque la convención más común es utilizar minúsculas.
La mayoría de los elementos contienen algún contenido como <p> ... </p> contiene un párrafo. Sin embargo, se prohíbe que algunos elementos contengan cualquier contenido y se conocen como elementos nulos. Por ejemplo,br, hr, link, metaetc.
Aquí hay una lista completa de elementos HTML5 .
Atributos HTML5
Los elementos pueden contener atributos que se utilizan para establecer varias propiedades de un elemento.
Algunos atributos se definen globalmente y se pueden usar en cualquier elemento, mientras que otros se definen solo para elementos específicos. Todos los atributos tienen un nombre y un valor y se ven como se muestra a continuación en el ejemplo.
A continuación se muestra el ejemplo de un atributo HTML5 que ilustra cómo marcar un elemento div con un atributo llamado clase usando un valor de "ejemplo" -
<div class = "example">...</div>Los atributos solo pueden especificarse dentro de las etiquetas de inicio y nunca deben usarse en las etiquetas de finalización.
Los atributos HTML5 no distinguen entre mayúsculas y minúsculas y pueden escribirse en mayúsculas o en mayúsculas, aunque la convención más común es utilizar minúsculas.
Aquí hay una lista completa de atributos HTML5 .
Documento HTML5
Se han introducido las siguientes etiquetas para una mejor estructura:
section- Esta etiqueta representa un documento genérico o una sección de aplicación. Se puede utilizar junto con h1-h6 para indicar la estructura del documento.
article - Esta etiqueta representa un contenido independiente de un documento, como una entrada de blog o un artículo de periódico.
aside - Esta etiqueta representa un fragmento de contenido que está ligeramente relacionado con el resto de la página.
header - Esta etiqueta representa el encabezado de una sección.
footer - Esta etiqueta representa un pie de página para una sección y puede contener información sobre el autor, información de derechos de autor, etc.
nav - Esta etiqueta representa una sección del documento destinada a la navegación.
dialog - Esta etiqueta se puede utilizar para marcar una conversación.
figure - Esta etiqueta se puede utilizar para asociar un título junto con algún contenido incrustado, como un gráfico o un video.
El marcado de un documento HTML 5 se vería así:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>...</title>
</head>
<body>
<header role = "banner">
<h1>HTML5 Document Structure Example</h1>
<p>This page should be tried in safari, chrome or Mozila.</p>
</header>
<nav>
<ul>
<li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li>
<li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li>
<li><a href = "https://www.tutorialspoint.com/javascript">
JavaScript Tutorial</a></li>
</ul>
</nav>
<article>
<section>
<p>Once article can have multiple sections</p>
</section>
</article>
<aside>
<p>This is aside part of the web page</p>
</aside>
<footer>
<p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p>
</footer>
</body>
</html>Producirá el siguiente resultado: