{"id":225,"date":"2024-05-21T09:56:42","date_gmt":"2024-05-21T07:56:42","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=225"},"modified":"2024-05-21T09:56:42","modified_gmt":"2024-05-21T07:56:42","slug":"46-guia-de-estilo-html","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/46-guia-de-estilo-html\/","title":{"rendered":"46. Gu\u00eda de estilo HTML"},"content":{"rendered":"\n

Un c\u00f3digo HTML coherente, limpio y ordenado facilita que otros lean y comprendan tu c\u00f3digo. Aqu\u00ed hay algunas pautas y consejos para crear un buen c\u00f3digo HTML.<\/p>\n\n\n\n

Siempre declarar el tipo de documento<\/h2>\n\n\n\n

El tipo de documento correcto para HTML es el siguiente:<\/p>\n\n\n\n

<!DOCTYPE html><\/pre>\n\n\n\n
Usa elementos en min\u00fasculas<\/h2>\n\n\n\n
HTML permite mezclar letras may\u00fasculas y min\u00fasculas en los nombres de los elementos.<\/p>\n\n\n\n
Sin embargo, recomendamos usar nombres de elementos en min\u00fasculas, porque:<\/p>\n\n\n\n
    \n
  • Mezclar nombres en may\u00fasculas y min\u00fasculas se ve mal<\/li>\n\n\n\n
  • Los desarrolladores normalmente usan nombres en min\u00fasculas<\/li>\n\n\n\n
  • Las min\u00fasculas se ven m\u00e1s limpias<\/li>\n\n\n\n
  • Min\u00fasculas son m\u00e1s f\u00e1ciles de escribir<\/li>\n<\/ul>\n\n\n\n
    Cierra todos los elementos HTML<\/h2>\n\n\n\n
    En HTML, no tienes que cerrar todos los elementos (por ejemplo, el elemento <p><\/em><\/strong>). Sin embargo, recomendamos encarecidamente cerrar todos los elementos HTML.<\/p>\n\n\n\n
    Usar nombres de atributo en min\u00fascula<\/h2>\n\n\n\n
    HTML permite mezclar letras may\u00fasculas y min\u00fasculas en los nombres de los atributos. Sin embargo, recomendamos usar nombres de atributos en min\u00fasculas porque:<\/p>\n\n\n\n
      \n
    • Mezclar nombres en may\u00fasculas y min\u00fasculas se ve mal<\/li>\n\n\n\n
    • Los desarrolladores normalmente usan nombres en min\u00fasculas<\/li>\n\n\n\n
    • Las min\u00fasculas se ven m\u00e1s limpias<\/li>\n\n\n\n
    • Las min\u00fasculas son m\u00e1s f\u00e1ciles de escribir.<\/li>\n<\/ul>\n\n\n\n
      Valores de atributo entre comillas<\/h2>\n\n\n\n
      HTML permite valores de atributo sin comillas. Sin embargo, recomendamos citar los valores de los atributos porque:<\/p>\n\n\n\n
        \n
      • Los desarrolladores normalmente citan valores de atributos<\/li>\n\n\n\n
      • Los valores citados son m\u00e1s f\u00e1ciles de leer<\/li>\n\n\n\n
      • DEBES usar comillas si el valor contiene espacios<\/li>\n<\/ul>\n\n\n\n
        Siempre especificar alt, width y height para las im\u00e1genes<\/h2>\n\n\n\n
        Especifica siempre el atributo alt<\/em> <\/strong>para las im\u00e1genes. Este atributo es importante si la imagen por alguna raz\u00f3n no se puede mostrar. Adem\u00e1s, define siempre el ancho y el alto de las im\u00e1genes. Esto reduce el parpadeo, porque el navegador puede reservar espacio para la imagen antes de cargarla.<\/p>\n\n\n\n
        <img src=\"html5.gif\" alt=\"HTML5\" style=\"width:128px;height:128px\"><\/pre>\n\n\n\n
        Espacios y signos de igual<\/h2>\n\n\n\n
        HTML permite espacios alrededor de signos iguales. Pero sin espacio es m\u00e1s f\u00e1cil de leer y agrupa mejor las entidades.<\/p>\n\n\n\n
        Evita l\u00edneas de c\u00f3digo largas<\/h2>\n\n\n\n
        Al usar un editor HTML, NO es conveniente desplazarse hacia la derecha y hacia la izquierda para leer el c\u00f3digo HTML. Trata de evitar l\u00edneas de c\u00f3digo demasiado largas.<\/p>\n\n\n\n
        L\u00edneas en blanco y sangr\u00eda<\/h2>\n\n\n\n
        No agregues l\u00edneas en blanco, espacios o sangr\u00edas sin una raz\u00f3n. Para facilitar la lectura, agrega l\u00edneas en blanco para separar bloques de c\u00f3digo grandes o l\u00f3gicos. Para facilitar la lectura, agrega dos espacios de sangr\u00eda. No utilices la tecla de tabulaci\u00f3n.<\/p>\n\n\n\n
        Nunca omitas el elemento <title><\/h2>\n\n\n\n
        El elemento <title><\/em><\/strong> es obligatorio en HTML.<\/p>\n\n\n\n
        \u00a1El contenido del t\u00edtulo de una p\u00e1gina es muy importante para la optimizaci\u00f3n de motores de b\u00fasqueda<\/strong> (SEO<\/strong>)! Los algoritmos de los motores de b\u00fasqueda<\/strong> utilizan el t\u00edtulo de la p\u00e1gina para decidir el orden al enumerar las p\u00e1ginas en los resultados de b\u00fasqueda.<\/p>\n\n\n\n
        El elemento <title><\/em><\/strong>:<\/p>\n\n\n\n
          \n
        • define un t\u00edtulo en la barra de herramientas del navegador<\/li>\n\n\n\n
        • proporciona un t\u00edtulo para la p\u00e1gina cuando se agrega a favoritos<\/li>\n\n\n\n
        • muestra un t\u00edtulo para la p\u00e1gina en los resultados del motor de b\u00fasqueda<\/li>\n\n\n\n
        • Por lo tanto, intenta que el t\u00edtulo sea lo m\u00e1s preciso y significativo posible:<\/li>\n<\/ul>\n\n\n\n
          Omitir <html> y <body>?<\/h2>\n\n\n\n
          Una p\u00e1gina HTML se validar\u00e1 sin las etiquetas <html><\/em><\/strong> y <body><\/em><\/strong>. Sin embargo, recomendamos enf\u00e1ticamente agregar siempre las etiquetas <html><\/em><\/strong> y <body><\/em><\/strong>. Omitir <body><\/em><\/strong> puede producir errores en navegadores m\u00e1s antiguos. Omitir <html><\/em><\/strong> y <body><\/em><\/strong> tambi\u00e9n puede bloquear el software DOM<\/strong> y XML<\/strong>.<\/p>\n\n\n\n
          Omitir <head>?<\/h2>\n\n\n\n
          La etiqueta HTML <head><\/em><\/strong> tambi\u00e9n se puede omitir. Los navegadores agregar\u00e1n todos los elementos antes de <body><\/em><\/strong>, a un elemento <head><\/em><\/strong> predeterminado. No obstante SIEMPRE recomendamos utilizar la etiqueta <head><\/em><\/strong>.<\/p>\n\n\n\n
          Cerrar elementos vac\u00edos?<\/h2>\n\n\n\n
          En HTML es opcional cerrar elementos vac\u00edos.<\/p>\n\n\n\n
          <meta charset=\"utf-8\"><\/pre>\n\n\n\n
          Tambi\u00e9n<\/p>\n\n\n\n
          <meta charset=\"utf-8\" \/><\/pre>\n\n\n\n
          Si esperas que el software XML\/XHTML acceda a tu p\u00e1gina, mant\u00e9n la barra inclinada de cierre (\/), ya que se requiere en XML y XHTML.<\/p>\n\n\n\n
          A\u00f1adir el atributo lang<\/h2>\n\n\n\n
          Siempre debes incluir el atributo lang<\/em> <\/strong>dentro de la etiqueta <html><\/em><\/strong>, para declarar el idioma de la p\u00e1gina web. Esto est\u00e1 destinado a ayudar a los motores de b\u00fasqueda<\/strong> y navegadores<\/strong>.<\/p>\n\n\n\n
          Ejm<\/strong><\/p>\n\n\n\n
          <!DOCTYPE html>\n<html lang=\"en-us\">\n<head>\n  <title>Page Title<\/title>\n<\/head>\n<body>\n\n<h1>This is a heading<\/h1>\n<p>This is a paragraph.<\/p>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
          Datos meta<\/h2>\n\n\n\n
          Para garantizar una interpretaci\u00f3n adecuada y una indexaci\u00f3n correcta en los motores de b\u00fasqueda<\/strong>, tanto el idioma como la codificaci\u00f3n de caracteres <meta charset=\u00bbcharset\u00bb><\/em><\/strong> deben definirse lo antes posible en un documento HTML:<\/p>\n\n\n\n
          Ejm<\/strong><\/p>\n\n\n\n
          <!DOCTYPE html>\n<html lang=\"en-us\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Page Title<\/title>\n<\/head><\/pre>\n\n\n\n
          Configuraci\u00f3n de la ventana gr\u00e1fica (viewport)<\/h2>\n\n\n\n
          La ventana gr\u00e1fica es el \u00e1rea visible del usuario de una p\u00e1gina web. Var\u00eda seg\u00fan el dispositivo: ser\u00e1 m\u00e1s peque\u00f1o en un tel\u00e9fono m\u00f3vil que en la pantalla de una computadora.<\/p>\n\n\n\n
          Debes incluir el siguiente elemento <meta><\/em><\/strong> en todas tus p\u00e1ginas web.<\/p>\n\n\n\n
          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/pre>\n\n\n\n
          Esto le da al navegador instrucciones sobre c\u00f3mo controlar las dimensiones y la escala de la p\u00e1gina. La parte width=device-width<\/em><\/strong> establece el ancho de la p\u00e1gina para seguir el ancho de pantalla del dispositivo (que variar\u00e1 seg\u00fan el dispositivo). La parte initial-scale=1.0<\/em><\/strong> establece el nivel de zoom inicial cuando el navegador carga la p\u00e1gina por primera vez.<\/p>\n\n\n\n
          Comentarios en HTML<\/h2>\n\n\n\n
          Comentarios cortos deben ser escritos en una s\u00f3la l\u00ednea.<\/p>\n\n\n\n
          <!-- This is a comment --><\/pre>\n\n\n\n
          Los comentarios que ocupan m\u00e1s de una l\u00ednea deben escribirse as\u00ed:<\/p>\n\n\n\n
          <!--\n  This is a long comment example. This is a long comment example.\n  This is a long comment example. This is a long comment example.\n--><\/pre>\n\n\n\n
          Los comentarios largos son m\u00e1s f\u00e1ciles de observar si est\u00e1n sangrados con dos espacios.<\/p>\n\n\n\n
          Usando hojas de estilo<\/h2>\n\n\n\n
          Usa una sintaxis simple para vincular hojas de estilo (el atributo type<\/em> <\/strong>no es necesario):<\/p>\n\n\n\n
          <link rel=\"stylesheet\" href=\"styles.css\"><\/pre>\n\n\n\n
          Las reglas cortas de CSS se pueden escribir comprimidas, as\u00ed:<\/p>\n\n\n\n
          p.intro {font-family:Verdana;font-size:16em;}<\/pre>\n\n\n\n
          Las reglas CSS largas deben escribirse en varias l\u00edneas:<\/p>\n\n\n\n
          body {\n  background-color: lightgrey;\n  font-family: \"Arial Black\", Helvetica, sans-serif;\n  font-size<script src=\"myscript.js\">16em;\n  color: black;\n}<\/pre>\n\n\n\n
            \n
          • Coloca el soporte de apertura en la misma l\u00ednea que el selector<\/li>\n\n\n\n
          • Usa un espacio antes del corchete de apertura<\/li>\n\n\n\n
          • Usa dos espacios de sangr\u00eda<\/li>\n\n\n\n
          • Usa punto y coma despu\u00e9s de cada par propiedad-valor, incluido el \u00faltimo<\/li>\n\n\n\n
          • Solo usa comillas alrededor de los valores si el valor contiene espacios<\/li>\n\n\n\n
          • Coloca el corchete de cierre en una nueva l\u00ednea, sin espacios iniciales<\/li>\n<\/ul>\n\n\n\n
            Cargando Javascript en HTML<\/h2>\n\n\n\n
            Usa una sintaxis simple para cargar scripts externos (el atributo type<\/em><\/strong> no es necesario).<\/p>\n\n\n\n
            <script src=\"myscript.js\"><\/pre>\n\n\n\n
            Acceso a elementos HTML con JavaScript<\/h2>\n\n\n\n
            El uso de c\u00f3digo HTML \u00abdesordenado\u00bb puede generar errores de JavaScript<\/strong>.<\/p>\n\n\n\n
            Usar nombres de archivo en min\u00fasculas<\/h2>\n\n\n\n
            Algunos servidores web (Apache, Unix) distinguen entre may\u00fasculas y min\u00fasculas en los nombres de archivo: \u00ablondres.jpg\u00bb no se puede acceder como \u00abLondres.jpg\u00bb.<\/p>\n\n\n\n
            Otros servidores web (Microsoft, IIS) no distinguen entre may\u00fasculas y min\u00fasculas: se puede acceder a \u00ablondon.jpg\u00bb como \u00abLondon.jpg\u00bb.<\/p>\n\n\n\n
            Si usas una combinaci\u00f3n de may\u00fasculas y min\u00fasculas, debes tener esto en cuenta. Si pasas de un servidor que no distingue entre may\u00fasculas y min\u00fasculas a uno que distingue entre may\u00fasculas y min\u00fasculas, \u00a1incluso los errores m\u00e1s peque\u00f1os romper\u00e1n tu web!. Para evitar estos problemas, \u00a1utiliza siempre nombres de archivo en min\u00fasculas!.<\/p>\n\n\n\n
            Extensiones de archivo<\/h2>\n\n\n\n
              \n
            • Los archivos HTML deben tener una extensi\u00f3n .html<\/em> <\/strong>(se permite .htm<\/em><\/strong>).<\/li>\n\n\n\n
            • Los archivos CSS deben tener una extensi\u00f3n .css<\/em><\/strong>.<\/li>\n\n\n\n
            • Los archivos JavaScript deben tener una extensi\u00f3n .js<\/em><\/strong>.<\/li>\n<\/ul>\n\n\n\n
              Diferencias entre .html y .htm<\/h2>\n\n\n\n
              \u00a1No hay diferencia entre las extensiones de archivo .htm<\/em> <\/strong>y .html<\/em><\/strong>!. Ambos ser\u00e1n tratados como HTML por cualquier navegador web y servidor web.<\/p>\n\n\n\n
              Nombres de archivo por defecto<\/h2>\n\n\n\n
              Cuando una URL no especifica un nombre de archivo al final (como \u00abhttps:\/\/sutilweb.com\/\u00bb), el servidor simplemente agrega un nombre de archivo predeterminado, como \u00abindex.html\u00bb, \u00abindex.htm\u00bb, \u00bb predeterminado.html\u00bb o \u00abpredeterminado.htm\u00bb.<\/p>\n\n\n\n
              Si tu servidor est\u00e1 configurado solo con \u00abindex.html\u00bb como nombre de archivo predeterminado, tu archivo debe llamarse \u00abindex.html\u00bb y no \u00abdefault.html\u00bb.<\/p>\n\n\n\n
              Sin embargo, los servidores se pueden configurar con m\u00e1s de un nombre de archivo predeterminado, por lo general, puedes configurar tantos nombres de archivo predeterminados como desee.<\/p>\n","protected":false},"excerpt":{"rendered":"
              Un c\u00f3digo HTML coherente, limpio y ordenado facilita que otros lean y comprendan tu c\u00f3digo. Aqu\u00ed hay algunas pautas y consejos para…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":45,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-225","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Un c\u00f3digo HTML coherente, limpio y ordenado facilita que otros lean y comprendan tu c\u00f3digo. Aqu\u00ed hay algunas pautas y consejos para...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=225"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/225\/revisions"}],"predecessor-version":[{"id":227,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/225\/revisions\/227"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}