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.

📑 Aquí podrás encontrar 👇

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ónDeclaració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 sugeridoMala 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?

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

describirBuen ejercicioMala práctica
Utilice códigos HTML adecuados para letras y números Unicode en el texto en vez de caracteres.

Copyright © 2021 W3C®

Copyright © 2021 W3C®

Elimine el espacio en blanco cerca de las etiquetas y los valores de los atributos.

HTML5 Best Practices

HTML5 Best Practices

Practique la coherencia y evite combinar letras mayúsculas y minúsculas.StatusStatus
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 </code> Las etiquetas hacen que un motor de búsqueda web sea accesible, por otra parte, su artículo <code><title></code> 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.</p><p>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.</p><h3>La imagen debe tener un atributo alt</h3><p>Utilice atributos alt significativos <code><img loading="lazy"></code> Los elementos son un requisito previo para redactar código semántico y eficiente.</p><p>La siguiente tabla muestra la columna de malas prácticas <code><img loading="lazy"></code> Elementos sin atributo alt. Aunque el segundo ejemplo tiene un atributo alt en exactamente la misma columna, su valor es sin importancia.</p><div class="responsive-table"><table><thead><tr><th>Buen ejercicio</th><th>Mala práctica</th></tr></thead><tbody><tr><td><pre><code class="language-html"></code></pre></td><td><pre><code class="language-html"><img decoding="async" loading="lazy" id="logo" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://kinsta.com/blog/html-best-practices/images/kinsta_logo.png" /><noscript><img decoding="async" loading="lazy" id="logo" src="https://kinsta.com/blog/html-best-practices/images/kinsta_logo.png" /></noscript> <img decoding="async" loading="lazy" id="logo" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="kinsta_logo.png" data-lazy-src="https://kinsta.com/blog/html-best-practices/images/kinsta_logo.png" /><noscript><img decoding="async" loading="lazy" id="logo" src="https://kinsta.com/blog/html-best-practices/images/kinsta_logo.png" alt="kinsta_logo.png" /></noscript></code></pre></td></tr></tbody></table></div><h3>Describe los meta atributos</h3><p>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.</p><p>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.</p><pre><code class="language-html"><!DOCTYPE html> <html> <head> <title>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 ejercicioMala práctica
Click hereClick 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

Puede contener títulos (H1, H2, etc.). Ciertos desarrolladores suprimen completamente el uso del elemento de título, pero aconsejamos incluirlo para un mejor uso de los que leen de pantalla:

Buen ejercicioMala práctica

HTML Best Practices 2021

  • description
  • description
  • description
  • description

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

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 ejercicioMala 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 </code> con <code><meta></code> 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.</p><p>para <code></p><nav></code> Elemento, utilícelo para andar por su lugar. No es necesario informar el rol porque el uso está en la etiqueta.</p><div class="responsive-table"><table><thead><tr><th>Buen ejercicio</th><th>Mala práctica</th></tr></thead><tbody><tr><td><code></p><nav></nav><p></code></td><td><code></p><nav role="navigation"></nav><p></code></td></tr></tbody></table></div><p>Lo que viene a <code><main></code> El elemento ya está en la última versión de HTML5, que representa el contenido primordial del cuerpo del archivo, por lo que ahora no necesita emplearlo. <code></p><div></code> En el momento en que nuestro contenido principal incluye etiquetas más específicas.</p><div class="responsive-table"><table><thead><tr><th>Buen ejercicio</th><th>Mala práctica</th></tr></thead><tbody><tr><td><code><main id="content"></main></code></td><td><code></p><div id="content"></div><p></code></td></tr></tbody></table></div><p>Esta <code></p><article></code> Usado en bloques de contenido. Es independiente, irrelevante sin más ni más explicaciones y <code></p><section></code> Las etiquetas se usan para dividir una página en diferentes áreas temáticas o para segmentar un artículo individual. Lamentablemente, varios programadores todavía usan estos 2 entre sí.</p><p>dado <code></p><section></code> Un dia es una relacion <code></p><article></code> Etiqueta. Esto significa que los primeros representan contenido relacionado, pero no son siempre independientes. Por el contrario, este último es una característica independiente.</p><p>Pero si no hay una pegatina correcta para su propósito, ¿qué debería usar? La respuesta es utilizar <code></p><div></code> Si ningún otro elemento funciona o es un elemento de estilo en particular, utilícelo para nuestros propósitos. <code></p><div></code> Asimismo es una mala práctica.</p><p>Hablemos de esto de nuevo más tarde <code></p><section></code> Etiqueta, este es un identificador semántico. Este no es un estilo, es importante enfatizarlo. De hecho, las buenas prácticas de codificación deben integrar etiquetas de encabezado.</p><p>ahora no <code></p><section></code> En consecuencia, no debe usarlo para marcar envoltorios, contenedores u otros bloques de solo estilo; ahora se expone un ejemplo de mala práctica de codificación <code></p><section></code> Etiqueta:</p><pre><code class="language-html"><section id="wrapper"> <section class="container-fluid"> <div id="main"> </div> </section> </section></code></pre><p>Este es un procedimiento mejor, pero se emplea bastante <code></p><div></code> Etiqueta:</p><pre><code class="language-html"><div id="wrapper"> <div class="container-fluid"> <div id="main"> </div> </div> </div></code></pre><p>Por consiguiente, las mejores prácticas de codificación tienen dentro:</p><pre><code class="language-html"><body id="wrapper"> <div class="container-fluid"> <main id="main"> </main> </div> </body></code></pre><p>Una parte habitual de muchos diseños son los gráficos usados para presentar los datos y <code></p><figure></code> El elemento se emplea primordialmente para imágenes, pero tiene un propósito más extenso, ya que todo lo relacionado con el archivo se puede poner en cualquier lugar y empaquetarlo. <code></p><figure></code> Elemento. Los ejemplos se encuentran en imágenes, tablas o diagramas en libros.</p><p>Una característica interesante <code></p><figure></code> No asiste para analizar un documento, con lo que puede utilizarlo para agrupar elementos que tienen un tema común, por servirnos de un ejemplo, varias imágenes que tienen un tema común. <code><figcaption></code>Aun un fragmento de código.</p><p>En el elemento Agrupación <code></p><figure></code>, utilizar <code><figcaption></code>. Esta <code><figcaption></code> El título debería manifestarse inmediatamente después de abrir <code></p><figure></code> Etiqueta o inmediatamente antes del final <code></figure><p></code> Etiqueta:</p><pre><code class="language-html"><figure> <img decoding="async" loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Bird Image" data-lazy-src="https://kinsta.com/blog/html-best-practices/image1.jpg"><noscript><img decoding="async" loading="lazy" src="https://kinsta.com/blog/html-best-practices/image1.jpg" alt="Bird Image"></noscript> <img decoding="async" loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Tree Image" data-lazy-src="image2.jpg"><noscript><img decoding="async" loading="lazy" src="image2.jpg" alt="Tree Image"></noscript> <img decoding="async" loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Sun Image" data-lazy-src="image3.jpg"><noscript><img decoding="async" loading="lazy" src="image3.jpg" alt="Sun Image"></noscript> <figcaption>Three images related to a topic</figcaption> </figure></code></pre><h2><span id="mejores_practicas_de_secuencias_de_comandos_html">Mejores prácticas de secuencias de comandos HTML</span></h2><p>HTML pertence a las tecnologías centrales en el avance web. Tiene especificaciones y funciones capaces y es muy popular entre los desarrolladores y dueños de negocios. El desarrollo de front-end prosigue impulsando la innovación y, para mantenerse al tanto de los desarrollos, los programadores deben comprender las mejores prácticas de scripts HTML.</p><h3>Utilice una hoja de estilo externa</h3><p>Los estilos internos tienen la posibilidad de lograr que su código esté desordenado y también ilegible. Vincular y utilizar siempre una hoja de estilo externa. Además de esto, evite el uso de declaraciones de importación en ficheros CSS, ya que crean mucho más peticiones de servidor.</p><p>Lo mismo ocurre con CSS y JavaScript internos. Además de los problemas de legibilidad, esto causa que sus documentos sean más pesados ​​y más difíciles de mantener, por lo que puede eludir el código de adentro.</p><h3>Emplea letras minúsculas</h3><p>La utilización de letras minúsculas en el código es una práctica común en la industria. Si bien la utilización de letras mayúsculas u otras letras mayúsculas aún va a hacer su lugar, el problema no está en la estandarización, sino en la legibilidad del código.</p><p>La legibilidad del código es una sección esencial de la codificación porque asiste para que la app sea simple de sostener y segura. Además, el desarrollo de la red consta principalmente de un equipo. Mejorar la legibilidad de su código puede facilitar su trabajo y el de su equipo.</p><div class="responsive-table"><table><thead><tr><th>Buen ejercicio</th><th>Mala práctica</th></tr></thead><tbody><tr><td><pre><code class="language-html"><div id="test"> <img decoding="async" loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="sample" data-lazy-src="https://kinsta.com/blog/html-best-practices/images/sample.jpg" /><noscript><img decoding="async" loading="lazy" src="https://kinsta.com/blog/html-best-practices/images/sample.jpg" alt="sample" /></noscript> <a href="#" title="test">test</a> <p>some sample text </p> </div></code></pre></td><td><pre><code class="language-html"><DIV> <IMG src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="sample" data-lazy-src="https://kinsta.com/blog/html-best-practices/images/sample.jpg"/><noscript><IMG SRC="https://kinsta.com/blog/html-best-practices/images/sample.jpg" alt="sample"/></noscript> <A HREF="#" TITLE="TEST">test</A> <P>some sample text</P> </DIV></code></pre></td></tr></tbody></table></div><h3>Notas en el manuscrito</h3><p>Si bien hay muchos tabúes al escribir HTML, dividimos los scripts entre dos tabla básica:</p><ul><li><strong>Ingrese un código con sangría y coherente:</strong> El código limpio y bien escrito puede lograr que su cibersitio sea más fácil de leer, lo que es de mucha ayuda para los programadores y otras personas que trabajan con el ubicación. También exhibe una gran profesionalidad y atención al aspecto, lo que refleja bien sus reacciones como creador.</li><li><strong>Evite demasiados comentarios:</strong> Los comentarios son importantes y pueden facilitar la comprensión del código. Sin embargo, la sintaxis HTML es muy fácil de argumentar, por lo que no se necesitan comentarios salvo que necesite aclarar la semántica y las convenciones de nomenclatura.</li></ul><h2><span id="revision_y_reduccion">Revisión y reducción</span></h2><p>El código de confirmación y resta se utiliza para detectar errores lo antes posible. No espere a que concluya un archivo HTML, compruébelo e identifique errores con cierta frecuencia. Puede realizar la validación manualmente o emplear cualquier herramienta de validación famosa, como: B. W3C-Tag-Validator.</p><p>Al mismo tiempo, practique el alejamiento eliminando todas las cosas esenciales (como comentarios o espacios). Asegúrese de redactar un código limpio y conciso para achicar el tamaño de su archivo HTML. Por servirnos de un ejemplo, puede emplear HTML Minifier y otros.</p><h2><span id="generalizar">Generalizar</span></h2><p>Muchos recursos de mejores prácticas de HTML5 para 2021 están libres on line para ayudarlo. No obstante, tenga en cuenta la norma establecida de codificación: coherencia. Este producto proporciona información básica y lo ayuda a empezar su viaje de desarrollo de interfaces. Esta guía se transformará de forma rápida en un experto en HTML5 semánticamente correcto.</p><p>Cuando haya terminado, vaya más allá de lo que puede proveer HTML y explore marcos HTML de código abierto para hacer aplicaciones web modernas de una página. Dan una increíble sincronización entre los datos y el diseño y marchan a la perfección con CSS y JavaScript.</p><p><em>¿Hemos ignorado las mejores prácticas de HTML que usa en su propia codificación? ¡Deja tu comentario en la sección de comentarios!</em> </p><div class="user-content mt--40 pb--60"><hr class="mini-divider"/><p> Ahorre tiempo, dinero y maximice el desempeño del ubicación:</p><ul><li>Asistencia inmediata de especialistas en hosting de WordPress, 24 horas al día, 7 días a la semana.</li><li>Integración de Cloudflare.</li><li>La audiencia global incluye 28 centros de datos en el mundo entero.</li><li>Utilice la supervisión integrada del desempeño de las apps para optimizar.</li></ul><p>Todo esto y más en un solo plan sin contratos en un largo plazo, asistencia de inmigración y una garantía de devolución de dinero de 30 días. Consulte los planes o hable con un representante de ventas para conseguir un plan que funcione para usted. </p></div></div></h2></h3> </div> <ul class="single-nav"> <li class="nav-prev"> <a href="https://closermarketing.es/laki-kinsta/" >Laki kinsta</a> </li> <li class="nav-next"> <a href="https://closermarketing.es/como-comprar-hosting-de-servidor-dedicado-de-kinsta-wiki-util/" > Cómo comprar hosting de servidor dedicado de Kinsta »Wiki Ùtil </a> </li> </ul> <div class="related-posts"> <article class="article-loop asap-columns-3"> <a href="https://closermarketing.es/que-es-el-email-marketing-una-guia-integral/" rel="bookmark"> <div class="article-content"> <div data-bg="https://closermarketing.es/wp-content/uploads/2024/04/DALL·E-2024-04-24-18.21.05-A-modern-sleek-image-for-the-cover-of-an-article-titled-What-is-Email-Marketing_-A-Comprehensive-Guide.-The-image-features-a-digital-workspace-with-400x267.webp" style="" class="article-image rocket-lazyload"></div> </div> <p class="entry-title">Qué es el Email Marketing: Una Guía Integral</p> </a> </article><article class="article-loop asap-columns-3"> <a href="https://closermarketing.es/estrategias-de-crecimiento-empresarial-innovacion-y-tecnologia-al-servicio-de-tu-negocio/" rel="bookmark"> <div class="article-content"> <div data-bg="https://closermarketing.es/wp-content/uploads/2024/04/DALL·E-2024-04-10-22.15.55-A-sleek-and-modern-rectangular-office-scene-illustrating-Business-Growth-Strategies_-Innovation-and-Technology-at-the-Service-of-Your-Business.-The--400x267.webp" style="" class="article-image rocket-lazyload"></div> </div> <p class="entry-title">Estrategias de Crecimiento Empresarial: Innovación y Tecnología al Servicio de tu Negocio</p> </a> </article><article class="article-loop asap-columns-3"> <a href="https://closermarketing.es/trabajo-remoto-para-espanoles/" rel="bookmark"> <div class="article-content"> <div data-bg="https://closermarketing.es/wp-content/uploads/2024/04/DALL·E-2024-04-05-23.35.09-A-cozy-and-well-organized-home-office-space-featuring-a-sleek-modern-desk-with-a-computer-a-comfortable-chair-and-various-office-supplies.-There-ar-400x267.webp" style="" class="article-image rocket-lazyload"></div> </div> <p class="entry-title">Trabajo remoto para españoles</p> </a> </article><article class="article-loop asap-columns-3"> <a href="https://closermarketing.es/buenas-practicas-seo-para-preparar-el-black-friday-posicionate-para-la-campana-del-ano-closermarketing/" rel="bookmark"> <div class="article-content"> <div data-bg="https://closermarketing.es/wp-content/uploads/2023/10/Black-Friday-2023-400x267.jpg" style="" class="article-image rocket-lazyload"></div> </div> <p class="entry-title">Buenas prácticas SEO para preparar el Black Friday: posiciónate para la campaña del año - closermarketing</p> </a> </article><article class="article-loop asap-columns-3"> <a href="https://closermarketing.es/resultados-y-opinion-encuesta-chatgpt/" rel="bookmark"> <div class="article-content"> <div data-bg="https://closermarketing.es/wp-content/uploads/2023/10/resultados-y-opinion-encuesta-ChatGPT-400x267.jpg" style="" class="article-image rocket-lazyload"></div> </div> <p class="entry-title">Resultados y opinión encuesta ChatGPT</p> </a> </article><article class="article-loop asap-columns-3"> <a href="https://closermarketing.es/impacto-del-core-update-de-verano-2023-en-espana-ganadores-y-perdedores-por-sector-closermarketing/" rel="bookmark"> <div class="article-content"> <div data-bg="https://closermarketing.es/wp-content/uploads/2023/10/Estrategia-SEO-400x267.jpg" style="" class="article-image rocket-lazyload"></div> </div> <p class="entry-title">Impacto del core update de verano 2023 en España: ganadores y perdedores por sector - closermarketing</p> </a> </article> </div><div id="comentarios" class="area-comentarios"> <div id="respond" class="comment-respond"> <p>Deja una respuesta <small><a rel="nofollow" id="cancel-comment-reply-link" href="/practicas-recomendadas-de-html-para-la-creacion-de-sitios-web-extensibles-y-mantenibles/#respond" style="display:none;">Cancelar la respuesta</a></small></p><form action="https://closermarketing.es/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Tu dirección de correo electrónico no será publicada.</span> <span class="required-field-message">Los campos obligatorios están marcados con <span class="required">*</span></span></p><input placeholder="Nombre *" id="author" name="author" type="text" size="30" required /><div class="fields-wrap"><input placeholder="Correo electrónico *" id="email" name="email" type="text" size="30" required /><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"/> <label for="wp-comment-cookies-consent">Guarda mi nombre, correo electrónico y web en este navegador para la próxima vez que comente.</label></p><textarea placeholder="Comentario" id="comment" name="comment" cols="45" rows="5" required></textarea><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Publicar el comentario"/> <input type='hidden' name='comment_post_ID' value='3844' id='comment_post_ID'/><input type='hidden' name='comment_parent' id='comment_parent' value='0'/></p></form> </div> </div> </article> <aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> <div class="sticky"> <div class="last-post-sidebar"> <article class="article-loop asap-columns-1"> <a href="https://closermarketing.es/content-amplification-estrategias-claves-closermarketing/" rel="bookmark"> <div class="article-content"> <div data-bg="https://closermarketing.es/wp-content/uploads/2024/05/Content-amplification-estrategias-claves-closermarketing-300x140.jpg" style="" class="article-image rocket-lazyload"></div> </div> <p class="entry-title">Content amplification: estrategias claves | closermarketing</p> </a> </article><article class="article-loop asap-columns-1"> <a href="https://closermarketing.es/seo-en-redes-sociales-sus-mejores-estrategias/" rel="bookmark"> <div class="article-content"> <div data-bg="https://closermarketing.es/wp-content/uploads/2024/05/SEO-en-redes-sociales-sus-mejores-estrategias-300x140.jpg" style="" class="article-image rocket-lazyload"></div> </div> <p class="entry-title">SEO en redes sociales: sus mejores estrategias</p> </a> </article><article class="article-loop asap-columns-1"> <a href="https://closermarketing.es/engagement-en-redes-sociales-como-impulsarlo-i-closermarketing/" rel="bookmark"> <div class="article-content"> <div data-bg="https://closermarketing.es/wp-content/uploads/2024/05/Engagement-en-redes-sociales-como-impulsarlo-I-closermarketing-300x140.jpg" style="" class="article-image rocket-lazyload"></div> </div> <p class="entry-title">Engagement en redes sociales: cómo impulsarlo I closermarketing</p> </a> </article><article class="article-loop asap-columns-1"> <a href="https://closermarketing.es/inbound-marketing-b2b-por-que-potenciarlo/" rel="bookmark"> <div class="article-content"> <div data-bg="https://closermarketing.es/wp-content/uploads/2024/05/Inbound-marketing-B2B-¿por-que-potenciarlo-300x140.jpg" style="" class="article-image rocket-lazyload"></div> </div> <p class="entry-title">Inbound marketing B2B: ¿por qué potenciarlo?</p> </a> </article><article class="article-loop asap-columns-1"> <a href="https://closermarketing.es/exito-del-marketing-segmentado-i-closermarketing/" rel="bookmark"> <div class="article-content"> <div data-bg="https://closermarketing.es/wp-content/uploads/2024/05/exito-del-marketing-segmentado-I-closermarketing-300x140.jpg" style="" class="article-image rocket-lazyload"></div> </div> <p class="entry-title">éxito del marketing segmentado I closermarketing</p> </a> </article> </div><div id="block-12"><script type="rocketlazyloadscript" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4620552241976448" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4620552241976448" data-ad-slot="9504139710" data-ad-format="auto" data-full-width-responsive="true"></ins><script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({});</script></div> </div> </aside> </main> <div class="footer-breadcrumb"> <div class="breadcrumb-trail breadcrumbs"><ul class="breadcrumb"><li ><a href="https://closermarketing.es/" rel="home" itemprop="item"><span itemprop="name">Todo sobre el Marketing y Seo</span></a></li><li ><a href="https://closermarketing.es/seo/" itemprop="item"><span itemprop="name">SEO</span></a></li><li ><span itemprop="name">Prácticas recomendadas de HTML para la creación de sitios web extensibles y mantenibles</span></li></ul></div> </div> <span class="go-top"><span>Subir</span><i class="arrow arrow-up"></i></span> <footer> <div class="content-footer"> <div class="widget-content-footer"> <div class="logo-footer"><a href="https://closermarketing.es/" class="custom-logo-link" rel="home"><img width="500" height="147" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20147'%3E%3C/svg%3E" class="custom-logo" alt="Closer Marketing" decoding="async" data-lazy-src="https://closermarketing.es/wp-content/uploads/2023/06/cropped-CLOSER.png"/><noscript><img width="500" height="147" src="https://closermarketing.es/wp-content/uploads/2023/06/cropped-CLOSER.png" class="custom-logo" alt="Closer Marketing" decoding="async"/></noscript></a></div> <div class="widget-area" id="nav_menu-7"><div class="menu-textos-legales-adapta-rgpd-container"><ul id="menu-textos-legales-adapta-rgpd" class="menu"><li id="menu-item-3432" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3432"><a href="https://closermarketing.es/politica-de-privacidad/" itemprop="url">Política de Privacidad</a></li><li id="menu-item-3441" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3441"><a href="https://closermarketing.es/politica-de-cookies/" itemprop="url">Política de Cookies</a></li><li id="menu-item-3442" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3442"><a href="https://closermarketing.es/aviso-legal/" itemprop="url">Aviso Legal</a></li></ul></div></div> </div> </div> </footer> <script type="rocketlazyloadscript" data-rocket-type="text/javascript" src="https://closermarketing.es/wp-includes/js/comment-reply.min.js?ver=6.5.3" id="comment-reply-js" async="async" data-wp-strategy="async"></script><script type="rocketlazyloadscript" data-rocket-type="text/javascript" id="rocket-browser-checker-js-after">/* <![CDATA[ */"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}();/* ]]> */</script><script type="text/javascript" id="rocket-preload-links-js-extra">/* <![CDATA[ */var RocketPreloadLinksConfig = {"excludeUris":"\/(.+\/)?feed\/?.+\/?|\/(?:.+\/)?embed\/|\/(index\\.php\/)?wp\\-json(\/.*|$)|\/login\/|\/wp-admin\/|\/logout\/|\/login\/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|php|pdf|html|htm","siteUrl":"https:\/\/closermarketing.es","onHoverDelay":"100","rateThrottle":"3"};/* ]]> */</script><script type="rocketlazyloadscript" data-rocket-type="text/javascript" id="rocket-preload-links-js-after">/* <![CDATA[ */(function() {"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run();}());/* ]]> */</script><script type="rocketlazyloadscript" data-rocket-type="text/javascript" src="https://closermarketing.es/wp-content/themes/asap/assets/js/asap.min.js?ver=01170124" id="asap-scripts-js" defer></script><script type="text/javascript" id="q2w3_fixed_widget-js-extra">/* <![CDATA[ */var q2w3_sidebar_options = [{"use_sticky_position":false,"margin_top":0,"margin_bottom":0,"stop_elements_selectors":"","screen_max_width":0,"screen_max_height":0,"widgets":[]}];/* ]]> */</script><script type="rocketlazyloadscript" data-rocket-type="text/javascript" src="https://closermarketing.es/wp-content/plugins/q2w3-fixed-widget/js/frontend.min.js?ver=6.2.3" id="q2w3_fixed_widget-js" defer></script><script>window.lazyLoadOptions={elements_selector:"img[data-lazy-src],.rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue}if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue}images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1}if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://closermarketing.es/wp-content/plugins/wp-rocket/assets/js/lazyload/16.1/lazyload.min.js"></script> </body></html> <!--El peso se redujo un 5.01% --> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me -->