Escribir HTML, al estilo HTML (no al estilo XHTML) | consejos CSS

Puede que ya no uses XHTML (más), pero cuando escribes HTML puedes estar más influenciado por XHTML de lo que piensas. Lo más probable es que escriba HTML, como XHTML.

¿Cuál es la forma XHTML de escribir HTML y cuál es la forma HTML de escribir HTML? Miremos.

HTML, XHTML, HTML

En la década de 1990, había HTML. En la década de 2000, existía XHTML. Luego, en la década de 2010, volvimos a HTML. Es la historia simple.

También puede saberlo por las fechas de especificación aproximadas: HTML "1" 1992, HTML 2.0 1995, HTML 3.2 1997, HTML 4.01 1999; XHTML 1.0 2000, XHTML 1.1 2001; "HTML5" 2007.

XHTML se hizo popular cuando todos creían que XML y sus derivados eran el futuro. "XML todas las cosas". Para HTML, esto tuvo un efecto profundo: el efecto de que aprendimos a escribirlo de forma XHTML.

La forma XHTML de escribir HTML

El método XHTML está bien documentado, como XHTML 1.0 describe en detalle en su sección sobre "Diferencias con HTML 4":

  • Los documentos deben estar bien formados.
  • Los nombres de elementos y atributos deben estar en minúsculas.
  • Para elementos no vacíos, se requieren etiquetas finales.
  • Los valores de los atributos siempre deben estar entrecomillados.
  • No se admite la minimización de atributos.
  • Los elementos vacíos deben estar cerrados.
  • El manejo de los espacios en blanco en los valores de los atributos se realiza de acuerdo a XML.
  • Los elementos de script y estilo requieren secciones CDATA.
  • Las exclusiones de SGML no son posibles.
  • artículos con id y name atributos, como a, applet, form, frame, iframe, imgy mapsolo debe usar id.
  • Los atributos con conjuntos de valores predefinidos distinguen entre mayúsculas y minúsculas.
  • Las referencias a entidades como valores hexadecimales deben estar en minúsculas.

¿Suena familiar? Con la excepción de marcar el contenido de CDATA, así como manejar las exclusiones de SGML, probablemente siga todas estas reglas. Todos.

Aunque XHTML está muerto, muchas de estas reglas nunca han sido desafiadas nuevamente. Algunos incluso han sido elevados a "mejores prácticas" para HTML.

Es la forma XHTML de escribir HTML y su impacto duradero en el campo.

La forma HTML de escribir HTML

Una forma de retrasarnos es negar las reglas impuestas por XHTML. Hagamos esto (sin la parte SGML, porque HTML ya no se basa en SGML):

  • Es posible que los documentos no estén bien formados.
  • Los nombres de elementos y atributos no deben estar en minúsculas.
  • Para elementos no vacíos, no siempre se requieren etiquetas finales.
  • Es posible que los valores de los atributos no siempre se cite.
  • Se admite la minimización de atributos.
  • Los elementos vacíos no necesitan estar cerrados.
  • El manejo de los espacios en blanco en los valores de los atributos no se realiza según XML.
  • Los elementos de script y estilo no necesitan secciones CDATA.
  • artículos con id y name los atributos no solo pueden usar id.
  • Los atributos con conjuntos de valores predefinidos no distinguen entre mayúsculas y minúsculas.
  • Las referencias a entidades como valores hexadecimales pueden no estar todas en minúsculas.

Quitemos las cosas esotéricas; cosas que no parecen relevantes. Esto incluye el manejo de espacios en blanco XML, secciones CDATA, duplicación de name valores de atributos, caso de conjuntos de valores predefinidos y referencias de entidades hexadecimales:

  • Es posible que los documentos no estén bien formados.
  • Los nombres de elementos y atributos no deben estar en minúsculas.
  • Para elementos no vacíos, no siempre se requieren etiquetas finales.
  • Es posible que los valores de los atributos no siempre se cite.
  • Se admite la minimización de atributos.
  • Los elementos vacíos no necesitan estar cerrados.

Partiendo de estas reglas, se parece mucho menos a XML que a HTML. Pero aún no hemos terminado.

"Es posible que los documentos no estén bien formados" sugiere que estaba bien si el HTML no era válido. Era bueno que XHTML apuntara a la formación correcta debido al estricto manejo de errores de XML. Pero si bien los documentos HTML funcionan incluso cuando contienen problemas serios de sintaxis y de formato correcto, no es útil para el profesional, ni para nuestro campo, usar y abusar de esta capacidad de recuperación. (Ya he discutido este caso en mi artículo, "En Defensa Crítica del Desarrollo Frontend").

Por lo tanto, el método HTML no sugeriría que "los documentos pueden no estar bien formados". También estaría claro que no solo las etiquetas finales, sino también las etiquetas iniciales no siempre son necesarias. Reformulando y reorganizando, aquí está la esencia:

  • Las etiquetas de inicio y final no siempre son necesarias.
  • Los elementos vacíos no necesitan estar cerrados.
  • Los nombres de elementos y atributos pueden estar en minúsculas o en mayúsculas.
  • Es posible que los valores de los atributos no siempre se cite.
  • Se admite la minimización de atributos.

Ejemplos

¿Cómo se ve esto en la práctica? Para las etiquetas de inicio y finalización, tenga en cuenta que muchas etiquetas son opcionales. Un párrafo y una lista, por ejemplo, se escriben en XHTML de la siguiente manera:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul>
  <li>Praesent augue nisl</li>
  <li>Lobortis nec bibendum ut</li>
  <li>Dictum ac quam</li>
</ul>

En HTML, sin embargo, puedes escribirlos usando solo este código (que es válido):

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul>
  <li>Praesent augue nisl
  <li>Lobortis nec bibendum ut
  <li>Dictum ac quam
</ul>

Los desarrolladores también aprendieron a escribir elementos vacíos, como este:

<br />

Esto es algo que XHTML trajo a HTML, pero dado que la barra no tiene efecto en los elementos vacíos, solo necesitas esto:

<br>

En HTML, también puedes escribir todo en mayúsculas:

<A HREF="https://css-tricks.com/">CSS-Tricks</A>

Suena como si estuvieras gritando y tal vez no te guste, pero está bien escribirlo así.

Cuando desee condensar este enlace, HTML le da la opción de omitir ciertas comillas:

<A HREF=https://css-tricks.com/>CSS-Tricks</A>

Como regla general, cuando el valor del atributo no contiene un espacio o un signo igual, generalmente es aceptable eliminar las comillas.

Finalmente, HTML–HTML, no XHTML–HTML, también permite minimizar los atributos. Es decir, en lugar de marcar un input elemento requerido y de solo lectura, como este:

<input type="text" required="required" readonly="readonly">

Puede contraer atributos:

<input type="text" required readonly>

Si no sólo aprovechas que las comillas no son necesarias, sino que text es el valor predeterminado para el type atributo aquí (hay otras combinaciones inútiles de atributo-valor), obtienes un ejemplo que muestra HTML en toda su mínima belleza:

<input required readonly>

Escribe HTML, al estilo HTML

Lo anterior no es una representación del estado de HTML en los años 90. HTML, en ese entonces, era responsable de <table> elementos para el diseño, llenos de código de presentación, en gran medida inválidos (como sigue siendo el caso hoy), con soporte de agente de usuario muy variable. Sin embargo, es el gasolina de lo que nos hubiera gustado conservar si XML y XHTML no hubieran visto la luz.

Si está abierto a una sugerencia de cómo sería una forma más completa y contemporánea de escribir HTML, tengo una. (HTML es mi principal área de interés, por lo que estoy agregando enlaces a algunos de mis artículos).

  1. Respetar la sintaxis y la semántica.
  2. Use cualquier opción que HTML le brinde, siempre que lo haga de manera consistente.
    • Recuerde que los nombres de elementos y atributos pueden estar en minúsculas o en mayúsculas.
  3. Mantenga el uso de HTML al mínimo absoluto
    • Recuerde que el marcado de presentación y comportamiento debe ser manejado por CSS y JavaScript en su lugar.
    • Recuerde que las etiquetas de inicio y finalización no siempre son necesarias.
    • Recuerde que los elementos vacíos no necesitan estar cerrados.
    • Recuerda que algunos atributos tienen valores por defecto que permiten omitir estos pares atributo-valor.
    • Recuerde que los valores de los atributos no siempre se citan.
    • Recuerde que se admite la minimización de atributos.

No es casualidad que se parezca a las tres reglas básicas de HTML, funciona con la premisa de que una carga útil más pequeña también conduce a sitios más rápidos, y sigue la escuela de desarrollo web mínimo. Nada de esto es nuevo: nuestro campo podría decidir redescubrirlo. Las herramientas también están disponibles: html-minifier es probablemente el más establecido y capaz de manejar todas las optimizaciones de HTML.

Aprendiste HTML como lo hizo XHTML. HTML no es XHTML. Redescubra HTML y ayude a dar forma a una forma nueva y moderna de escribir HTML, que reconoce, pero no necesariamente se basa en XML.

Si quieres conocer otros artículos parecidos a Escribir HTML, al estilo HTML (no al estilo XHTML) | consejos CSS puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas