Reglas y normas HTML5

Las reglas y normas de HTML5 nos ayudan a crear código más limpio, más legible y más confiable, lo que facilita la colaboración y el mantenimiento de proyectos web.

Contenidos del artículo

Reglas y normas HTML5

Estructura Básica: Todo documento HTML5 debe tener una estructura básica que incluya las etiquetas <!DOCTYPE html> <html>, <head>, y <body>. La etiqueta <html> es el elemento raíz y debe contener todas las demás etiquetas.
Etiquetas en mayúsculas o minúsculas: Las etiquetas HTML no distinguen entre mayúsculas y minúsculas. Por lo tanto, <HTML> y <html> son equivalentes. Se recomienda seguir siempre la misma sintaxis, preferiblemente letras en minúsculas.
Caracteres especiales: Algunos caracteres especiales, como <, >, &, ", y ', tienen significados especiales en HTML. Para incluir estos caracteres en tu código, puedes usar entidades HTML (< representa el símbolo <), su código decimal (< representa el símbolo <) o hexadecimal. Ver cómo representar caracteres especiales
Código con tabulados y sangrías: El código HTML indentado con tabulados facilita la lectura y su comprensión. Además, puede ayudar a evitar errores, ya que facilita la identificación de los elementos HTML. Por ello, cuando escribimos código HTML utilizamos la tabulación para entender mejor la estructura de etiquetas. Sin embargo, hay que tener en cuenta también que la velocidad de carga es uno de los factores más influyentes en la experiencia que reciben los usuarios. Por ello, para reducir el tamaño de los ficheros HTML hay que evitar los tabulados, los espacios en blanco y los comentarios innecesarios. Una vez implementado nuestro código, se puede minificar mediante herramientas específicas.
Los saltos de línea y los espacios no tienen ningún efecto en el código HTML: Los navegadores web ignoran los saltos de línea y los tabuladores en el código HTML contenido entre las etiquetas <body></body>. Para escribir espacios en blanco podemos usar   y para escribir saltos de línea la etiqueta  .
Uso de Comillas: Aunque HTML5 permite el uso de comillas simples (') alrededor de los valores de los atributos, es una buena práctica utilizar comillas dobles (") para que el código sea más consistente. <a href="pagina.html">Enlace</a>
Validación del Código: Utiliza herramientas de validación HTML para garantizar que tu código cumpla con las especificaciones y estándares HTML. Un código HTML válido es más compatible y menos propenso a errores.
Pruebas Cruzadas de Navegadores: Prueba tu sitio web en diferentes navegadores y dispositivos para garantizar que se vea y funcione correctamente en todas partes.

Ver factores HTML clave para el SEO

Reglas y normas XHTML

XHTML (Extensible Hypertext Markup Language) es una versión de HTML que sigue reglas y normas específicas para asegurar que los documentos web sean bien formados y cumplan con los estándares web.

En concreto, HTML5 es más permisivo en términos de sintaxis que XHTML. Es una buena práctica seguir las convenciones de HTML5 en lugar de mezclarlas con las de XHTML. El uso consistente de la sintaxis de HTML5 asegura la compatibilidad y facilita la lectura y el mantenimiento del código. Además, algunas características específicas de XHTML, como el uso de XML namespaces, no son compatibles con HTML5.

Veamos algunas reglas y normas clave para XHTML para que sepas diferenciarlas con respecto a HTML5:

Document Type Declaration (DTD): Debes incluir una declaración de tipo de documento (DOCTYPE) al comienzo de tu documento XHTML. Esto especifica la versión de XHTML que estás utilizando y establece el estándar para el documento.

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Etiquetas en minúsculas: XHTML requiere que todas las etiquetas y atributos se escriban en minúsculas. Aunque HTML no es tan estricto, XHTML lo exige.

   <p>Este es un párrafo de ejemplo en XHTML.</p>

Elementos anidados y cerrados: Debes asegurarte de que todos los elementos se abran y cierren correctamente y que estén anidados de manera adecuada. No se permiten elementos mal anidados en XHTML.

   <ul>
     <li>Elemento 1</li>
     <li>Elemento 2</li>
   </ul>

Atributos con comillas: Las comillas pueden ser dobles o simples (pero siempre formando parejas con las mismas).

   <img src="imagen.jpg" alt="Imagen de ejemplo" />

Elementos vacíos: Los elementos que no tienen contenido deben cerrarse con una barra diagonal antes del corchete de cierre (por ejemplo, <img />,  ).

   <br />

Uso de entidades: Debes utilizar entidades HTML para representar caracteres especiales, como < para < y > para >.

   &lt;p&gt;Este es un ejemplo de &lt;em&gt;texto enfatizado&lt;/em&gt; en XHTML.&lt;/p&gt;

Atributos: No se pueden minimizar los atributos de los elementos. Por ejemplo, en HTML es válido <OPTION VALUE=»Mi valor» SELECTED> , en XHTML debe escribirse: <option value=»Mi valor» selected=»selected» />
Uso de etiquetas de cierre: Todas las etiquetas que requieren cierre, como , <li>, <div>, deben cerrarse correctamente. En HTML5, algunas etiquetas que requieren un cierre en XHTML, como  o <li>, pueden no cerrarse explícitamente, y el navegador las interpretará correctamente.
- XHTML: Este es un párrafo.
- HTML5: Este es un párrafo.

Veamos un ejemplo de código HTML y su equivalente en XHTML:

documento.html

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo HTML</title>
</head>
<body>
  <h1>Título del artículo</h1>
  <p>Este es un párrafo de ejemplo.</p>
  <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
  </ul>
  <br>
</body>
</html>

documento.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Ejemplo XHTML</title>
</head>
<body>
  <h1>Título del artículo</h1>
  <p>Este es un párrafo de ejemplo.</p>
  <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
  </ul>
  <br />
</body>
</html>

Diferencias notables:

Declaración DOCTYPE: En XHTML, debes especificar una declaración DOCTYPE que apunte a la versión de XHTML que estás utilizando. En el ejemplo, estamos utilizando la versión «XHTML 1.0 Strict».
Namespace XML: En XHTML, debes agregar un atributo xmlns al elemento <html> para especificar el espacio de nombres XML. Esto no es necesario en HTML.
Etiquetas en minúsculas: XHTML requiere que todas las etiquetas y atributos se escriban en minúsculas, como se muestra en el ejemplo.
Elementos vacíos: Debes cerrar los elementos vacíos con una barra diagonal antes del corchete de cierre en XHTML, como  .

Como podemos ver XHTML es más estricto en cuanto a la estructura y la sintaxis que HTML, por lo que debes seguir estas normas y reglas para asegurarte de que tu documento sea bien formado y cumpla con los estándares.

¿Se usa XHTML en la actualidad?

XHTML no se utiliza ampliamente en la actualidad para el desarrollo web. XHTML fue una especificación del World Wide Web Consortium (W3C) que combinaba la sintaxis de XML con la de HTML. Se introdujo como una evolución de HTML para que los documentos web fueran más estrictos y estuvieran bien formados según las reglas de XML.

Sin embargo, a medida que la web evolucionó, HTML5 se convirtió en la especificación dominante para el desarrollo web. HTML5 ofrece muchas características nuevas y mejoradas, y ha sido ampliamente adoptado por los desarrolladores web y los navegadores.

Las principales razones por las que XHTML ha dejado de utilizarse ampliamente son:

Menos estricto: Aunque XHTML se diseñó para ser más estricto que HTML, en la práctica, los navegadores no eran tan rigurosos en la validación de XHTML. Esto llevó a que los desarrolladores continuaran utilizando HTML más tradicional y menos estricto.
Mayor complejidad: La sintaxis más estricta de XHTML a menudo resultaba en documentos más complejos y difíciles de mantener, lo que no era práctico en muchos casos.
HTML5 es más flexible: HTML5 ofrece muchas de las mismas ventajas que se buscaban con XHTML, como soporte para XML, pero sin la complejidad y las restricciones de XHTML.

¿Por qué es importante conocer las diferencias entre HTML5 y XHTML?

Conocer XHTML y sus diferencias con HTML5 puede ser importante por varias razones:

Legado y Mantenimiento: Aunque HTML5 es la especificación predominante en la actualidad, aún existen sitios web más antiguos que utilizan XHTML o versiones anteriores de HTML. Si trabajas en el mantenimiento de sitios web existentes, es posible que te encuentres con código XHTML y debas comprender sus diferencias con HTML5 para realizar actualizaciones y correcciones.
Compatibilidad: Aunque XHTML no es ampliamente utilizado en nuevos proyectos, algunas aplicaciones y sistemas heredados pueden requerir o producir documentos en formato XHTML. Comprender estas diferencias puede ser fundamental para garantizar la compatibilidad con sistemas heredados.
Conocimiento Profundo: Para ser un desarrollador web versátil y comprender completamente el ecosistema web, es útil tener un conocimiento profundo de las diferentes especificaciones y estándares que han existido. Esto te permite adaptarte a una variedad de situaciones y requisitos.
Estándares Web: Comprender las diferencias entre las diversas versiones de HTML y XHTML puede ayudarte a apreciar la evolución de los estándares web. Esto es importante si trabajas en la industria de la tecnología web y deseas mantener tus habilidades actualizadas.
Validación y Corrección: Comprender las reglas de validación específicas de XHTML y sus diferencias con HTML5 es importante si necesitas validar y corregir documentos web. Esto es especialmente relevante si trabajas en áreas relacionadas con la calidad y la conformidad web.
Educación Continua: Aprender XHTML junto con HTML5 puede ser parte de una educación continua en el desarrollo web. Las diferencias entre las versiones de HTML a menudo se enseñan en cursos y programas de desarrollo web.