
Prácticas recomendadas de HTML para la creación de sitios web extensibles y mantenibles
Las mejores prácticas de HTML pueden ayudar a los programadores a sugerir sitios web y apps web innovadores y altamente entretenidos. Con estas mejores prácticas, puede desarrollar las aplicaciones comerciales mucho más versátiles. Además de esto, las empresas tienen la posibilidad de explotar estas mejores prácticas para ofrecer una experiencia de usuario perfecta.
Cuando charlamos de HTML el día de hoy, solemos charlar de HTML5 (y no de sus precursores inmediatos). HTML5 es un poderoso lenguaje de marcado que los desarrolladores web tienen la posibilidad de utilizar para crear documentos web. Es simple de emplear y entender, y funciona con prácticamente todos los navegadores, y es la base de casi cualquier sistema de administración de contenido (CMS).
Por ejemplo, como creador web con menos experiencia, «¿Cómo escribo mejor HTML?» Aparece habitualmente. Este producto está diseñado para asistirlo a comenzar desde la visión adecuada.
Procedimiento de codificación HTML común
Posiblemente ya esté familiarizado con este lenguaje de marcado, pero aquí hay algunas prácticas recomendadas de HTML5 que tienen la posibilidad de asistirlo a escribir código mejor.
Indique siempre el tipo de documento
Cuando crea un documento HTML, DOCTYPE
Se necesita una explicación para señalarle al navegador qué estándar está usando. El propósito es reflejar con precisión su marca.
Por poner un ejemplo:
implementación | Declaración de género de archivo |
---|---|
HTML 4.01 |
|
XHTML 1.1 |
|
HTML5 |
|
Esta
La notificación ha de estar en la primera línea del documento HTML. La próxima es una comparación de implementaciones adecuadas e incorrectas:
Curso de acción sugerido | Mala práctica |
---|---|
|
|
O puede utilizar un género de archivo que coincida con la versión HTML / XHTML que desee. Consulte la lista de mensajes de género de archivo recomendados para elegir el preciso.
Colocación de etiquetas HTML
Los desarrolladores saben que las etiquetas están diseñadas para contribuir a los navegadores de internet a distinguir entre contenido HTML y contenido normal. Las etiquetas HTML tienen dentro etiquetas de comienzo, contenido y final. Sin embargo, de manera frecuente se sienten confundidos sobre la localización adecuada de las etiquetas, la caducidad de sus elementos o la omisión de las etiquetas.
Por poner un ejemplo, ¿dónde se encuentra el mejor sitio? ¿Etiqueta?
Las etiquetas de secuencia de comandos por norma general se guardan Sin embargo, un factor de la política HTML moderna es ponerlo en el final del documento y cerrarlo.
Marque para retrasar la descarga. El sitio web primero carga una plantilla de objeto de documento (DOM), la exhibe al usuario y luego solicita una secuencia de comandos, que acorta el tiempo al primer byte (TTFB).
El navegador interpreta su archivo HTML línea por línea de arriba abajo. Por ende, cuando lee el encabezado y halla un ID de secuencia de comandos, le solicita al servidor que consiga el fichero. No hay nada de malo en este proceso, pero si una página carga un archivo colosal, llevará bastante tiempo y afectará de manera significativa la experiencia del usuario.
Elemento raíz
Bajo el elemento raíz está
o Idioma, Peculiaridades. Esta función asiste para traducir documentos HTML al idioma correcto. Es preferible sostener el valor de este atributo lo más corto posible.
Por servirnos de un ejemplo, El país nipón se utiliza primordialmente en El país nipón. Por ende, el código de país no es obligación cuando se orienta a Japón.
Curso de acción sugerido | Mala práctica |
---|---|
|
|
Notas en formato HTML
Una de las mejores prácticas HTML más habituales es la validación. hecha con No quieroCiertos son conocidos aquí No quiero Con codificación HTML:
describir | Buen ejercicio | Mala práctica |
---|---|---|
Utilice códigos HTML adecuados para letras y números Unicode en el texto en vez de caracteres. |
|
|
Elimine el espacio en blanco cerca de las etiquetas y los valores de los atributos. |
|
|
Practique la coherencia y evite combinar letras mayúsculas y minúsculas. | Status |
Status |
No separe atributos con 2 o mucho más espacios. |
|
|
Mantén las cosas simples
De la misma con todas y cada una de las prácticas de codificación, el principio de "sostenerlo fácil" se aplica realmente bien a los formatos HTML y HTML5. Por norma general, HTML5 funciona con ediciones anteriores de HTML y XHTML. Por ende, le aconsejamos que evite el uso de afirmaciones o atributos XML.
Por servirnos de un ejemplo:
Si no quiere escribir documentos XHTML, no necesita entrar el código así. Tampoco precisa atributos XML, por servirnos de un ejemplo:
...
Programa con SEO en cabeza
Los desarrolladores deberían considerar la codificación SEO. El contenido web que es imposible conseguir tampoco se indexa. Por ende, aquí hay ciertas mejores prácticas de SEO a considerar:
Agrega metadatos significativos
Esta
La etiqueta es una etiqueta práctica, pero su mal uso puede conducir a un comportamiento intuitivo. Por lo tanto, cuando indica una etiqueta base, cada vínculo del documento es relativo, salvo que se indique lo contrario:
Esta sintaxis cambia el accionar predeterminado de ciertos links. Por servirnos de un ejemplo, un enlace a un sitio web de afuera con solo el nombre y la extensión de la página:
href="https://kinsta.com/blog/html-best-practices/coding.org"
O el navegador lo interpreta de la próxima manera:
href="https://kinsta.com/blog/html-best-practices/http://www.kinsta.com/coding.org"
Esta interpretación es confusa, por lo que es mucho más seguro utilizar siempre y en todo momento sendas absolutas a los links.
Por otro lado, redactar descripciones de metaetiquetas puede no ser una de las mejores prácticas en HTML, pero es igual de esencial Los atributos son el contenido al que se refieren los rastreadores de buscadores cuando rastrean su página y, por consiguiente, son vitales para la optimización de su motor de búsqueda.
Detallar la etiqueta de título adecuada
Esta
Las etiquetas hacen que un motor de búsqueda web sea accesible, por otra parte, su artículo
Las etiquetas se muestran en la página de resultados de la búsqueda de Google+ (SERP), tal como en las pestañitas y la barra del navegador web del usuario.
Por servirnos de un ejemplo, en el momento en que busca la palabra clave "HTML5". El título de este resultado de búsqueda representa un atributo concreto y el autor del título. Esto es primordial en la optimización de motores de búsqueda y la generación de tráfico en el sitio.
La imagen debe tener un atributo alt
Utilice atributos alt significativos
Los elementos son un requisito previo para redactar código semántico y eficiente.
La siguiente tabla muestra la columna de malas prácticas
Elementos sin atributo alt. Aunque el segundo ejemplo tiene un atributo alt en exactamente la misma columna, su valor es sin importancia.
Buen ejercicio | Mala práctica |
---|---|
|
|
Describe los meta atributos
La meta descripción es un elemento HTML que se emplea para detallar y sintetizar el contenido de una página web. Su propósito es permitir a los individuos hallar el contexto de la página. A pesar de que los metadatos ya no son útiles para las clasificaciones de SEO, los metadatos prosiguen desempeñando un papel importante en el SEO de la página.
Este es un código de exhibe que incluye keywords, descripción, nombre del autor y juego de letras y números. Este conjunto de letras y números se utiliza para aceptar letras y números y símbolos en casi todos los lenguajes distintas. Por otra parte, puede modificar una cookie, añadir una fecha de revisión y permitir que la página se actualice.
HTML Best Practices in Website Design
Let's learn how to code HTML5!
Atributo de título y enlace
Aconsejamos emplear un atributo de encabezado en los elementos de anclaje para mejorar la disponibilidad. El atributo de encabezado aumenta el concepto de las etiquetas de anclaje; esta La etiqueta (o elemento de anclaje) está emparejada con ella.
href
Funcionalidades para crear hipervínculos a páginas, direcciones de correo electrónico y archivos. Se utiliza para vincular áreas o direcciones ajenas en la misma página.
Consulte el ejemplo en la columna de malas prácticas; allí es innecesario. Esta clase de política es evidente en el momento en que un usuario usa un lector de pantalla para leer la etiqueta de anclaje y leer el mismo artículo a la audiencia dos veces. Un lector de pantalla es una tecnología de asistencia desarrollada para personas con discapacidad visual o con discapacidades de estudio. Si solo está repitiendo el texto del punto de anclaje, es preferible no emplear el título en absoluto.
Buen ejercicio | Mala práctica |
---|---|
Click here |
Click here |
Diseño de mejores prácticas HTML
El desarrollo de sitios web es más que sencillamente crear texto y títulos, vincular páginas. Hay algunas prácticas recomendadas de HTML que debe tomar en consideración para explotar al máximo su página web.
Especifique la estructura del archivo correcta
Los documentos HTML pueden marchar sin los puntos claves: ,
, con
Sin embargo, si faltan estos elementos, posiblemente la página no se muestre adecuadamente. Por tal razón, es esencial usar estructura de archivo consistentemente correcta.
Partes similares con grupos
El elemento de sección le permite agrupar contenido por tema; Según la especificación W3C a
Buen ejercicio | Mala práctica |
---|---|
|
|
Mejores prácticas de contenido integrado
Esta La etiqueta actúa como un repositorio de elementos externos. Esto incluye sitios web, imágenes, videos o extensiones. Sin embargo, tenga presente que la mayor parte de los navegadores ya no admiten subprogramas y extensiones de Java. Más esencial aún, los navegadores por el momento no aceptan componentes ActiveX y los navegadores modernos también eliminaron la compatibilidad con Shockwave Flash.
Aconsejamos lo siguiente:
- Usar en imágenes
Etiqueta. - Utilice código HTML extraído de otro ubicación
Etiqueta.
- Utilizar para vídeo o audio
con
Etiqueta.
Atributo alt
El elemento da especificaciones que son útiles para buscadores y leyentes de pantalla. Es singularmente conveniente para los individuos en el momento en que no puede procesar imágenes:
Buen ejercicio | Mala práctica |
---|---|
|
|
Si hay artículo adicional para explicar la imagen, deje el atributo Alt en blanco. A continuación, le señalamos cómo eludir redundancias:
Buen ejercicio | Mala práctica |
---|---|
|
|
Parada Si el contenido del elemento está restringido, el elemento está vacío. Un iframe vacío siempre es seguro:
Buen ejercicio | Mala práctica |
---|---|
|
|
Los desarrolladores deben proveer contenido de respaldo o links de respaldo a todo el contenido. o
Elementos, como imágenes. El contenido debe restituirse, singularmente para los nuevos elementos HTML:
Buen ejercicio | Mala práctica |
---|---|
|
|
Achicar la proporción de elementos
Los documentos HTML se vuelven complejos, en especial en websites con bastante contenido. La opción mejor es achicar la cantidad de elementos de la página para dirigir, estudiar a utilizar los títulos de manera inteligente y efectuar un seguimiento de ellos.
llegar
Los elementos representan una jerarquía de contenido HTML. Esto causa que su contenido sea más significativo para los lectores, leyentes de pantalla y buscadores.
Ejemplo:
The topmost heading
This is a subheading that follows the topmost heading.
This is a subheading that follows the h2 heading.
This is a subheading that follows the h3 heading.
This is a subheading that follows the h4 heading.
This is a subheading that follows the h5 heading.
Si usa programadores y productores de contenido de WordPress, utilice
El título de la publicación del blog, no el nombre del lugar. Esto ayuda a los buscadores a rastrear y este método funciona con SEO.
Asimismo use los elementos HTML adecuados para transmitir la información que contienen para poder una estructura de contenido semántica y importante; utilizar, p. ej. El énfasis está en y
Enfatizar en vez de sus predecesores
o
, Ahora está obsoleto.
Ejemplo:
emphasized text
strongly emphasized text
También es esencial utilizar
Evite utilizar en canciones
Añade nuevas líneas entre párrafos. En su sitio, use márgenes CSS y / o funcionalidades de relleno para ubicar mejor el contenido; en ocasiones puede estar ansioso por emplearlo
Carácter empleado para la sangría. Evite esta trampa, solo úsela en el momento en que cite texto.
Inconvenientes de diseño
De las mejores prácticas de HTML es utilizar elementos semánticamente apropiados en el diseño de la página. Varios elementos asisten a organizar el diseño en partes.
Ya que existen muchos temas distintas en un diseño HTML, es mejor resaltar velozmente los aspectos del diseño; Por servirnos de un ejemplo, HTML da un concepto semántico a los encabezados y pies de página, por poner un ejemplo, no olvide utilizarlos.
Marque pues se emplea en una sección o producto específico. Aparte de supervisar con
Subtítulos y otros elementos de estilo del documento empleados para el título de la página o sección, la fecha de publicación y otro contenido introductorio. De la misma forma, puede descartar la idea de que un pie de página es solo parte de los derechos de autor; en este momento puede usarlo en prácticamente cualquier sitio.
para