Como conclusión al usar HTML

Algunas de las cosas que es necesario recordar al trabajar la estructura o funcionamiento de una página web con HTML son:

1. Lo ideal es confiar en HTML para el contenido tanto como sea posible.

2. Una buena práctica es tomarse el tiempo de pensar y definir la estructura que tendrá la página: desde cómo se estructurará y conectará, por cuántas páginas estará compuesta, qué contenido albergará y cómo se quiere que se vea, entre otros aspectos (siempre es bueno dibujar o plasmar las ideas en borradores o referencias visuales).

3. Lo mejor para una página es incluir contenido de terceros solo cuando es necesario, ya sea por temas de derechos de autor, licencias o vulnerabilidades aprovechables por terceros malintencionados.

4. Si es posible, utilizar un servicio HTTPS para nuestra página; tener presente la seguridad siempre debe ser primordial.

5. El anidamiento de las etiquetas debe hacerse de forma correcta para evitar el mal funcionamiento de los elementos; es decir, el primer elemento en abrirse es el último en cerrarse, y viceversa. Por lo tanto, nunca hay que mezclar el inicio y final de las etiquetas; deben estar claramente dentro o fuera unas de otras.

   

6. Los atributos booleanos son aquellos que únicamente tienen un valor, generalmente el mismo que el nombre del atributo, por lo que se implementan sin valor alguno.

   

7. Se pueden usar libremente ya sea comillas dobles o simples, ya que estas son equivalentes. Lo que nunca debe pasar es que se mezclen en un mismo elemento.

   

   También se puede usar un tipo de comillas para los valores de los atributos y otro en el contenido.

   

   Si se necesita incluir el mismo tipo de comillas en el contenido, es necesario utilizar entidades HTML para estas.

8. Dentro del elemento "head" no solo se definen los metadatos, también se puede encontrar la descripción de la página para los motores de búsqueda.

9. Los comentarios dentro de HTML se abren con "<!--" y se cierran con "-->".

10. El elemento "nav" de la barra de navegación se puede incluir como parte del encabezado o se puede manejar como un elemento independiente.

11. El elemento "main" solo debería ser usado una vez por página, ya que representa el contenido exclusivo de esta. Tampoco debería estar anidado dentro de otros elementos.

12. No utilizar demasiados contenedores "div", ya que al no poseer un significado semántico pueden ocasionar un código difícil de actualizar y mantener. Lo recomendable es que solo se use si no existe una mejor opción para ese caso de uso.

13. Solo aplicar un único "h1" por página.

14. No usar más de tres niveles de títulos en un documento; si es necesario usar más, lo recomendable es separar el contenido en diferentes páginas.

15. Actualmente no es muy recomendable usar los elementos "b", "i" y "u" ya que no aportan semántica, a menos que se dé el caso de que se necesite transmitir el significado tradicional de las negritas; en este caso, si no hay otro elemento mejor, sería correcto su uso.

    Recordemos sus usos tradicionales:

    • <i> se usa para transmitir el significado que tradicionalmente transmite la itálica: extranjerismos, clasificaciones taxonómicas, conceptos técnicos, un pensamiento...
    • <b> se usa para transmitir el significado que tradicionalmente transmite la negrita: palabras clave, nombres de productos, frases principales...
    • <u> se usa para transmitir el significado que conlleva el subrayado: nombres propios, errores ortográficos...

    Nota: Normalmente el subrayado se asocia con los hipervínculos, por lo que se recomienda puntualizar su uso o cambiar los estilos con CSS.

16. Incluso los nombres de las imágenes son tomados en cuenta para el SEO (posicionamiento en buscadores), por eso lo mejor es aplicar nombres descriptivos.

17. Se puede incluir una imagen usando una URL absoluta o relativa; sin embargo, aplicar la URL absoluta es desperdiciar recursos ya que el navegador hace un recorrido más largo. La solución más eficiente es usar rutas relativas.

18. Si se adjunta una imagen de la que no se sea el propietario, recordar:

    • Tener un permiso escrito explícito del dueño.
    • Tener pruebas de que la imagen es de dominio público.

19. Recordar el uso del atributo "alt" (texto alternativo) en los elementos "img", ya que se mostrará si la imagen no carga o si se usa un lector de pantalla.

20. También podemos dirigir los enlaces a una sección específica de la página haciendo referencia al atributo "id", como se ve en el ejemplo.

    

    También podemos hacer esto desde otra página incluyendo el "id" al final de la ruta:

    

21. Si se define una carpeta pero no un archivo en la URL, la mayoría de los servidores buscan por defecto el archivo "index".

22. Los motores de búsqueda se fijan en el texto de los enlaces, por lo que es bueno usar palabras clave descriptivas.

23. No escribir "enlace a" o "link", porque los lectores de pantalla ya lo anuncian y es redundante.

24. Incluir contenido de reserva en los elementos de video.

25. Es recomendable incluir más de un formato de video para asegurar la compatibilidad con diversos navegadores.

26. Al usar un elemento "iframe", es recomendable establecer el atributo "src" con JavaScript para mejorar los tiempos de carga.

27. Siempre que se embeba contenido en un iframe, hacerlo desde un protocolo HTTPS para evitar ataques.

28. Es esencial usar el atributo "sandbox" en los iframe para limitar opciones de ataque. Nota: nunca agregue "allow-scripts" y "allow-same-origin" al mismo tiempo.

29. El atributo "name" es indispensable en los formularios para enviar los datos en cadenas de "clave/valor".

30. No es recomendable anidar un formulario dentro de otro. Se pueden usar elementos de formulario fuera de este mediante el atributo "form".

31. Es una práctica común usar listas o "div" para delimitar elementos de formularios y aplicar estilos CSS fácilmente.