CSS

Escribir HTML, modo HTML (no modo XHTML) trucos CSS

Puede que ya no uses XHTML, pero cuando escribes HTML, puedes estar más influenciado por XHTML de lo que crees. Probablemente escribas HTML a la manera de XHTML.

¿Cuál es la forma XHTML de escribir HTML y cuál es la forma HTML de escribir HTML? Vamos a ver.

HTML, XHTML, HTML

Había HTML en los años 90. En la década de 2000, existía XHTML. Luego, en 2010, volvimos a HTML. Esta es una historia sencilla.

También puede averiguarlo por las fechas aproximadas de las especificaciones: 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 es todo». Para HTML, esto tuvo un efecto profundo: el efecto de que aprendimos a escribirlo de la manera XHTML.

Manera XHTML de escribir HTML

La forma en que XHTML está bien documentada, como XHTML 1.0 describe con gran detalle en su sección sobre «Diferencias con HTML 4»:

  • Los documentos deben estar bien formateados.
  • Los nombres de elementos y atributos deben estar en minúsculas.
  • Los elementos no vacíos requieren etiquetas finales.
  • Los valores de los atributos deben citarse siempre.
  • Minimizar atributos No soportado.
  • Los artículos vacíos deben estar cerrados.
  • El procesamiento de espacios en blanco en los valores de los atributos se realiza de acuerdo con XML.
  • Los elementos de script y estilo necesitan secciones CDATA.
  • Las excepciones SGML no son posibles.
  • Los elementos con id y name atributos tales como a, applet, form, frame, iframe, imgy mapsolo debe usarse id.
  • Los atributos con conjuntos de valores predefinidos distinguen entre mayúsculas y minúsculas.
  • Las referencias a objetos como valores hexadecimales deben estar en minúsculas.

¿Esto te parece familiar? Con la excepción de etiquetar el contenido de CDATA, así como tratar con las excepciones de SGML, probablemente siga todas estas reglas. Todos ellos.

Aunque XHTML está muerto, muchas de estas reglas nunca han sido cuestionadas. Algunos incluso han sido promovidos a «mejores prácticas» para HTML.

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

HTML es la forma de escribir HTML

Una forma de llevarnos de vuelta es negar las reglas impuestas por XHTML. De hecho, hagamos esto (sin la parte SGML, porque HTML ya no se basa en SGML):

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

Quitemos las cosas esotéricas; cosas que no parecen relevantes. Esto incluye procesar espacios vacíos en XML, secciones CDATA, duplicar name valores de atributo, caso de conjuntos predefinidos de valores y referencias a objetos hexadecimales:

  • Es posible que los documentos no estén bien formateados.
  • Los nombres de elementos y atributos no pueden estar en minúsculas.
  • Los elementos no vacíos no siempre requieren etiquetas finales.
  • Los valores de los atributos no siempre se pueden citar.
  • Se admite la minimización de atributos.
  • Los artículos vacíos no deben estar cerrados.

Rompiendo con estas reglas, esto se parece mucho menos a trabajar con XML y más a trabajar con HTML. Pero aún no estamos listos.

«Es posible que los documentos no estén bien formateados» sugiere que es bueno si el código HTML no es válido. Es bueno que XHTML apunte a un buen formato debido al manejo estricto de los errores XML. Pero aunque los documentos HTML funcionan, incluso cuando tienen serios problemas de sintaxis y formato, no es útil para los profesionales, ni para nuestro campo, usar y abusar de esta capacidad de recuperación. (He argumentado este caso antes en mi artículo, «En defensa crítica del desarrollo de Frontend».)

Por lo tanto, HTML no implicaría que «los documentos pueden no estar bien formateados». Parafraseando y reorganizando, esta es la esencia:

  • Las etiquetas de inicio y final no siempre son necesarias.
  • Los artículos vacíos no deben estar cerrados.
  • Los nombres de elementos y atributos pueden estar en minúsculas o en mayúsculas.
  • Los valores de los atributos no siempre se pueden citar.
  • 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 esto en cuenta muchas etiquetas son mas elección. Un párrafo y una lista, por ejemplo, se escriben así en XHTML:

<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>

Sin embargo, puedes escribirlos en HTML 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 han aprendido a escribir elementos vacíos, como:

<br />

Esto es algo que XHTML condujo a HTML, pero como la barra no tiene efecto en los elementos vacíostodo lo que necesitas es esto:

<br>

En HTML, simplemente puede poner todo en mayúsculas:

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

Parece que estás gritando y puede que no te guste, pero es bueno escribirlo de esa manera.

Cuando desee sellar este enlace, HTML le ofrece la opción de saltar ciertas citas:

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

Por regla general, cuando el valor del atributo no contiene un espacio o un signo igual, suele ser bueno eliminar las comillas.

Finalmente, HTML-HTML, no XHTML-HTML, también le permite minimizar los atributos. input elemento según sea necesario y de solo lectura de la siguiente manera:

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

Puede minimizar los atributos:

<input type="text" required readonly>

Si no solo aprovechas que no se necesitan comillas, sino que así sea text es el predeterminado para type atributo aquí (hay más combinaciones innecesarias de atributo-valor), obtienes un ejemplo que muestra HTML en toda su mínima belleza:

<input required readonly>

Escribe HTML de la forma en que se hace HTML

Lo anterior no es una representación de dónde estaba HTML en la década de 1990. A continuación, se cargó HTML con <table> elementos de diseño, completos con código de presentación, en gran medida inválidos (como es hoy), con soporte de agente de usuario extremadamente diferente. y sin embargo es esencia de lo que nos gustaría conservar si no hubiera aparecido XML y XHTML.

Si está abierto a sugerencias sobre cómo sería una forma más completa y moderna de escribir HTML, tengo una. (HTML es mi principal área de enfoque, por lo que lo complemento con enlaces a algunos de mis artículos).

  1. Observa la sintaxis y la semántica.
  2. Usa las opciones que te da HTML, siempre y cuando lo hagas consistentemente.
    • 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, en cambio, la presentación y el etiquetado de comportamiento deben ser manejados por CSS y JavaScript.
    • Recuerde que las etiquetas de inicio y finalización son no siempre obligatorio.
    • Recuerde que los artículos vacíos no deben estar cerrados.
    • Recuerde que algunos atributos tienen configuraciones predeterminadas que permiten estos pares atributo-valor deben omitirse.
    • Recuerde que los valores de los atributos pueden no siempre Ser citado.
    • Recuerde que se admite la minimización de atributos.

No es casualidad que esto sea similar. las tres reglas básicas de HTMLque funciona con la promesa de menos carga útil también conduce a sitios más rápidosy que esto sigue escuela de desarrollo web mínimo. Nada de esto es nuevo, nuestra región simplemente puede decidir redescubrirlo. Las herramientas también están disponibles: minificador de html es probablemente el más establecido y capaz de manejar todas las optimizaciones de HTML.

Aprendiste HTML de la misma manera que XHTML. HTML no es XHTML. Redescubra HTML y ayude a crear una forma nueva y moderna de escribir HTML, que reconoce pero no necesariamente se basa en XML.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Botón volver arriba