42 - 馃帹 Gu铆a de Estilo en HTML: Buenas Pr谩cticas y Consejos

Jorge Catalao agosto 07, 2025
HTML




Siempre declare el tipo de documento

Siempre declare el tipo de documento como la primera l铆nea de su documento. El tipo de documento correcto para HTML es:

Para HTML5: <!DOCTYPE html>

Esta declaraci贸n le dice al navegador que el documento es un HTML5, lo que ayuda a que se renderice correctamente.


Ejemplo

A continuaci贸n se muestra un ejemplo de c贸mo se ver铆a un documento HTML b谩sico con la declaraci贸n de tipo de documento: 


  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="UTF-8">
      <title>Ejemplo de Documento</title>
    </head>
    <body>
      <h1>Hola, Mundo!</h1>
    </body>
  </html>


Utilice siempre las etiquetas body

Las etiquetas <body> y </body> son esenciales en cualquier documento HTML. Todo el contenido visible de la p谩gina, como texto, im谩genes y otros elementos, debe estar dentro de estas etiquetas.

Al no usar la etiqueta <body>, el navegador puede no renderizar correctamente el contenido, lo que puede dar lugar a un comportamiento inesperado o errores en la visualizaci贸n.


Ejemplo

A continuaci贸n se muestra un ejemplo de un documento HTML que incluye las etiquetas <body> y </body> correctamente: 


  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="UTF-8">
      <title>Ejemplo de Body</title>
    </head>
    <body>
      <h1>Bienvenido a mi p谩gina</h1>
      <p>Este es un p谩rrafo dentro del cuerpo del documento.</p>
    </body>
  </html>


Cerrar todos los elementos HTML

Es fundamental cerrar todos los elementos HTML para asegurar que el documento se interprete correctamente. Cada etiqueta de apertura debe tener una etiqueta de cierre correspondiente, excepto en el caso de elementos vac铆os que no requieren cierre, como <br> o <img>.

No cerrar elementos puede llevar a problemas de renderizado y causar comportamientos inesperados en el navegador, adem谩s de dificultar la lectura y el mantenimiento del c贸digo.


Ejemplo

A continuaci贸n se muestra un ejemplo de un documento HTML donde todos los elementos est谩n correctamente cerrados: 


  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="UTF-8">
      <title>Ejemplo de Cierre de Elementos</title>
    </head>
    <body>
      <h1>T铆tulo de la P谩gina</h1>
      <p>Este es un p谩rrafo de texto.</p>
      <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
      </ul>
    </body>
  </html>


Utilice el atributo lowercase

En HTML, es recomendable utilizar atributos en min煤sculas. Esto no solo mejora la legibilidad del c贸digo, sino que tambi茅n garantiza la compatibilidad con todos los navegadores y est谩ndares web. Aunque HTML no es sensible a may煤sculas y min煤sculas, seguir esta convenci贸n es una buena pr谩ctica.

Usar min煤sculas tambi茅n ayuda a mantener la consistencia en el c贸digo, lo que facilita su mantenimiento y comprensi贸n por parte de otros desarrolladores.


Ejemplo

A continuaci贸n se muestra un ejemplo de un documento HTML que utiliza atributos en min煤sculas: 


  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="UTF-8">
      <title>Ejemplo de Atributos en Min煤sculas</title>
    </head>
    <body>
      <img src="imagen.jpg" alt="Descripci贸n de la imagen" width="300" height="200">
      <a href="https://ejemplo.com">Visita nuestro sitio</a>
    </body>
  </html>


Los atributos se ponen sin comillas

HTML permite el uso de valores de atributos sin comillas. Sin embargo, es recomendable utilizar comillas para los siguientes motivos:

  • Los desarrolladores generalmente citan valores de atributos, lo que ayuda a mantener un estilo de codificaci贸n consistente.
  • Los valores entre comillas son m谩s f谩ciles de leer, lo que mejora la comprensi贸n del c贸digo.
  • Se deben utilizar comillas si el valor contiene espacios, de lo contrario, el c贸digo puede no funcionar correctamente.

Por ejemplo, aqu铆 hay una buena pr谩ctica y una mala pr谩ctica:

Bien: <table class="striped">

Malo: <table class=striped>

Y muy malo, esto no funcionar谩, porque el valor contiene espacios: <table class=table striped>


Ejemplo

A continuaci贸n se muestra un documento HTML que utiliza atributos sin comillas y el correcto uso de comillas:

Ejemplo bueno: 

  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="UTF-8">
      <title>Ejemplo de Atributos</title>
    </head>
    <body>
      <table class="striped">
        <tr>
          <td>Celda 1</td>
          <td>Celda 2</td>
        </tr>
      </table>
    </body>
  </html>

Ejemplo malo: 

  <table class=striped>
    <tr>
      <td>Esto no funcionar谩</td>
      <td>Celda 2</td>
    </tr>
  </table>


En im谩genes utilice siempre alt, width y height

Al incluir im谩genes en HTML, es fundamental utilizar los atributos alt, width y height por varias razones:

  • alt: Este atributo proporciona un texto alternativo que describe la imagen. Es esencial para la accesibilidad, ya que permite a los lectores de pantalla describir la imagen a usuarios con discapacidad visual.
  • width: Este atributo especifica el ancho de la imagen. Proporcionar el ancho ayuda a que el navegador reserve espacio para la imagen mientras se carga, mejorando as铆 la experiencia del usuario.
  • height: Al igual que el ancho, este atributo establece la altura de la imagen. Junto con el ancho, contribuye a evitar cambios en el dise帽o de la p谩gina al cargar im谩genes.

Por ejemplo, al insertar una imagen en HTML, se recomienda hacerlo de la siguiente manera:

<img src="imagen.jpg" alt="Descripci贸n de la imagen" width="300" height="200">


Ejemplo

A continuaci贸n se muestra c贸mo usar correctamente los atributos en una etiqueta <img>: 


  <img src="logo.png" alt="Logo de la empresa" width="200" height="100">


Los espacios y el s铆mbolo de igual (=)

En HTML, es importante seguir ciertas convenciones al usar el s铆mbolo de igual (`=`) en los atributos:

  • **No debe haber espacios antes o despu茅s del s铆mbolo de igual.** Esto asegura que el c贸digo sea interpretado correctamente por el navegador.
  • **Use un espacio antes del s铆mbolo de igual.** Esto mejora la legibilidad del c贸digo, aunque no es obligatorio.

Por ejemplo, el siguiente uso es correcto:

<input type="text" name="usuario">

Y este uso es incorrecto:

<input type = "text" name = "usuario">

El segundo ejemplo podr铆a causar confusi贸n y problemas en algunos navegadores, por lo que se debe evitar.


Ejemplo

A continuaci贸n se muestra el uso correcto e incorrecto del s铆mbolo de igual en atributos:

Ejemplo correcto: 

  <input type="text" name="usuario">

Ejemplo incorrecto: 

  <input type = "text" name = "usuario">


Evite las l铆neas de c贸digo largo

Mantener las l铆neas de c贸digo a una longitud razonable es crucial para la legibilidad y mantenimiento del c贸digo HTML. Aqu铆 hay algunas pautas:

  • **L铆neas cortas:** Intente limitar la longitud de las l铆neas a un m谩ximo de 80-120 caracteres. Esto facilita la lectura y evita el desplazamiento horizontal en editores de c贸digo.
  • **Dividir atributos:** Si una etiqueta tiene muchos atributos, considere dividirla en varias l铆neas para mejorar la claridad.

Por ejemplo, en lugar de:

<input type="text" name="usuario" id="usuario" class="form-control" placeholder="Introduce tu nombre completo">

Se puede hacer:


  <input 
    type="text" 
    name="usuario" 
    id="usuario" 
    class="form-control" 
    placeholder="Introduce tu nombre completo">

Ejemplo

A continuaci贸n se muestra un ejemplo de l铆nea de c贸digo larga y su versi贸n dividida:

Ejemplo de l铆nea larga: 

  <input type="text" name="usuario" id="usuario" class="form-control" placeholder="Introduce tu nombre completo">
Ejemplo de l铆nea dividida: 

  <input 
    type="text" 
    name="usuario" 
    id="usuario" 
    class="form-control" 
    placeholder="Introduce tu nombre completo">


Nunca salte la etiqueta "title"

La etiqueta <title> es esencial en un documento HTML. Define el t铆tulo del documento, que se muestra en la pesta帽a del navegador y es importante para el SEO (optimizaci贸n para motores de b煤squeda).

  • **Identificaci贸n:** Permite a los usuarios identificar r谩pidamente la p谩gina que est谩n viendo.
  • **SEO:** Ayuda a los motores de b煤squeda a comprender el contenido de la p谩gina, lo que puede mejorar su clasificaci贸n en los resultados de b煤squeda.
  • **Accesibilidad:** Mejora la experiencia del usuario, especialmente para aquellos que utilizan tecnolog铆as de asistencia.

Un ejemplo correcto de uso de la etiqueta <title> es: 


  <title>Mi P谩gina Web</title>

Ejemplo

A continuaci贸n se muestra un documento HTML con y sin la etiqueta <title>:

Ejemplo con la etiqueta title: 

  <!DOCTYPE html>
  <html lang="es">
    <head>
      <title>Bienvenido a mi sitio web</title>
    </head>
    <body>
      <h1>Hola, mundo!</h1>
    </body>
  </html>
Ejemplo sin la etiqueta title: 

  <!DOCTYPE html>
  <html lang="es">
    <head>
      <!-- No hay etiqueta title -->
    </head>
    <body>
      <h1>Hola, mundo!</h1>
    </body>
  </html>


¿Qu茅 pasa si omitimos las etiquetas "html" y "body"?

Omitir las etiquetas <html> y <body> puede llevar a varios problemas de interpretaci贸n y funcionamiento en un documento HTML:

  • **Validaci贸n HTML:** La estructura del documento no ser谩 v谩lida, lo que puede causar errores al ser interpretado por los navegadores.
  • **Estilos y scripts:** Los estilos CSS y scripts de JavaScript pueden no aplicarse correctamente si el navegador no reconoce la estructura del documento.
  • **Accesibilidad:** Las tecnolog铆as de asistencia pueden tener dificultades para interpretar el contenido de la p谩gina si la estructura no se sigue adecuadamente.

Aunque una p谩gina HTML validar谩 sin las etiquetas <html> y <body>, se recomienda encarecidamente incluirlas. Omitir la etiqueta <body> puede provocar errores en navegadores m谩s antiguos y tambi茅n puede bloquear el software DOM y XML.


Ejemplo

A continuaci贸n se muestra un documento HTML que omite las etiquetas <html> y <body> y su versi贸n correcta:

Ejemplo sin etiquetas html y body: 

  <!DOCTYPE html>
  <head>
    <title>Ejemplo de omisi贸n</title>
  </head>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
Ejemplo correcto: 

  <!DOCTYPE html>
  <html lang="es">
    <head>
      <title>Ejemplo correcto</title>
    </head>
    <body>
      <h1>Hola, mundo!</h1>
    </body>
  </html>


Cerrando elementos vac铆os

En HTML, los elementos vac铆os son aquellos que no tienen contenido entre una etiqueta de apertura y una de cierre. Ejemplos de elementos vac铆os incluyen <br>, <img>, y <input>. Aunque HTML5 permite omitir la etiqueta de cierre en ciertos casos, es una buena pr谩ctica cerrarlos expl铆citamente.

Cerrar elementos vac铆os mejora la legibilidad del c贸digo y ayuda a evitar errores, especialmente en XHTML, donde todos los elementos deben cerrarse correctamente.

Ejemplo de un elemento vac铆o correctamente cerrado:

  • <br> se puede usar como <br /> en XHTML.
  • <img src="imagen.jpg" alt="Descripci贸n" />

Ejemplo

A continuaci贸n se muestra el uso correcto de elementos vac铆os cerrados:

Ejemplo correcto: 

  <img src="imagen.jpg" alt="Descripci贸n" />
  <br />
Ejemplo incorrecto: 

  <img src="imagen.jpg" alt="Descripci贸n">
  <br>


A帽adiendo el atributo "lang"

El atributo lang se utiliza en HTML para especificar el idioma del contenido de un documento. Este atributo es importante para la accesibilidad y la optimizaci贸n en motores de b煤squeda, ya que ayuda a los navegadores y tecnolog铆as de asistencia a interpretar correctamente el texto.

Se debe agregar el atributo lang en la etiqueta <html> para que se aplique a todo el documento, aunque tambi茅n se puede usar en elementos individuales para especificar diferentes idiomas dentro del mismo documento.

Ejemplo de uso del atributo lang:

  • Ejemplo global: <html lang="es">
  • Ejemplo en un elemento: <p lang="en">This is an English paragraph.</p>

Ejemplo

A continuaci贸n se muestra un documento HTML que incluye el atributo lang correctamente: 


  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="UTF-8">
      <title>Ejemplo de Atributo lang</title>
    </head>
    <body>
      <p>Este es un p谩rrafo en espa帽ol.</p>
      <p lang="en">This is a paragraph in English.</p>
    </body>
  </html>


Meta charset, ¿qu茅 es?

La etiqueta <meta charset="UTF-8"> se utiliza en la secci贸n <head> de un documento HTML para definir la codificaci贸n de caracteres que se usar谩. Esta declaraci贸n es fundamental porque asegura que el navegador interprete correctamente el texto en el documento.

UTF-8 es la codificaci贸n m谩s com煤nmente utilizada y admite una amplia variedad de caracteres, incluyendo letras de diferentes alfabetos, s铆mbolos y emojis. Utilizar UTF-8 ayuda a garantizar que tu contenido se muestre correctamente en diferentes navegadores y dispositivos.

Ejemplo de uso de meta charset:

  • <meta charset="UTF-8">

Ejemplo

A continuaci贸n se muestra un documento HTML que incluye la etiqueta meta charset correctamente: 


  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="UTF-8">
      <title>Ejemplo de Meta Charset</title>
    </head>
    <body>
      <p>Este es un p谩rrafo en espa帽ol.</p>
    </body>
  </html>


Configuraci贸n de viewport

La configuraci贸n del viewport es esencial para el dise帽o web receptivo. Se logra utilizando la etiqueta <meta name="viewport"> en el <head> del documento HTML. Esta etiqueta le dice al navegador c贸mo debe ajustar el tama帽o y la escala del contenido.

Un ejemplo com煤n es:

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">

Esto asegura que el contenido se adapte al ancho del dispositivo y se escale correctamente.


Ejemplo

A continuaci贸n se muestra un documento HTML que incluye la configuraci贸n de viewport correctamente: 


  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Ejemplo de Viewport</title>
    </head>
    <body>
      <p>Este es un p谩rrafo en espa帽ol.</p>
    </body>
  </html>


HTML y los comentarios

Los comentarios en HTML se utilizan para incluir notas o explicaciones en el c贸digo que no ser谩n visibles en el navegador. Se pueden utilizar para aclarar partes del c贸digo o para deshabilitar temporalmente elementos.

La sintaxis para los comentarios en HTML es:

  • <!-- Este es un comentario -->

Los comentarios pueden abarcar varias l铆neas, lo que es 煤til para incluir descripciones detalladas.


Ejemplo

A continuaci贸n se muestra un documento HTML que incluye un comentario: 


  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="UTF-8">
      <title>Ejemplo de Comentarios</title>
    </head>
    <body>
      <!-- Este es un comentario que no se ver谩 en el navegador -->
      <p>Este es un p谩rrafo en espa帽ol.</p>
    </body>
  </html>


Usando hojas de estilo

Las hojas de estilo (CSS) se utilizan para definir el estilo y la presentaci贸n de un documento HTML. Se pueden incluir de varias maneras:

  • Incorporar CSS en la etiqueta <head> usando <link> para enlazar un archivo externo.
  • Utilizar la etiqueta <style> para incluir CSS interno directamente en el HTML.
  • Aplicar estilos en l铆nea mediante el atributo style en un elemento espec铆fico.

Es recomendable utilizar hojas de estilo externas para mantener el c贸digo organizado y facilitar el mantenimiento.


Ejemplo

A continuaci贸n se muestra c贸mo enlazar una hoja de estilo externa: 


  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="styles.css"> 
      <title>Ejemplo de Hojas de Estilo</title>
    </head>
    <body>
      <p>Este es un p谩rrafo en espa帽ol.</p>
    </body>
  </html>


¿C贸mo cargamos JavaScript en HTML?

Hay varias formas de cargar JavaScript en un documento HTML. Las m谩s comunes son:

  • Incluir JavaScript directamente en la etiqueta <script> en el <head> o en el <body> del documento.
  • Enlazar a un archivo JavaScript externo usando el atributo src en la etiqueta <script>.

Un ejemplo de cada m茅todo es el siguiente:

  • <script> console.log('Hola Mundo!'); </script>
  • <script src="script.js"></script>

Ejemplo

A continuaci贸n se muestra un documento HTML que incluye JavaScript: 


  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="UTF-8">
      <title>Ejemplo de Carga de JavaScript</title>
      <script>
        console.log('Hola desde el script en l铆nea');
      </script>
    </head>
    <body>
      <script src="script.js"></script> 
    </body>
  </html>


Acceso a elementos HTML con JavaScript

JavaScript permite acceder y manipular elementos HTML de diversas maneras. Las m谩s comunes son:

  • Utilizando document.getElementById() para acceder a un elemento por su id.
  • Usando document.querySelector() para seleccionar elementos con selectores CSS.
  • Accediendo a elementos por su nombre de etiqueta o clase con document.getElementsByClassName() y document.getElementsByTagName().

Por ejemplo:

  • document.getElementById('miElemento');
  • document.querySelector('.miClase');

Ejemplo

A continuaci贸n se muestra c贸mo acceder a un elemento HTML con JavaScript: 


  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="UTF-8">
      <title>Ejemplo de Acceso a Elementos</title>
      <script>
        function cambiarTexto() {
          document.getElementById('miElemento').innerText = 'Texto cambiado!';
        }
      </script>
    </head>
    <body>
      <p id="miElemento">Texto original.</p>
      <button onclick="cambiarTexto()">Cambiar Texto</button>
    </body>
  </html>


Uso de may煤sculas y min煤sculas en HTML

HTML no es sensible a may煤sculas y min煤sculas. Esto significa que las etiquetas y atributos pueden escribirse en cualquier combinaci贸n de may煤sculas y min煤sculas. Sin embargo, se recomienda seguir las convenciones para mejorar la legibilidad:

  • Utilizar etiquetas en min煤sculas: <div>, <span>.
  • Escribir atributos en min煤sculas: class, id.

Al seguir estas convenciones, el c贸digo se vuelve m谩s uniforme y f谩cil de entender.


Ejemplo

A continuaci贸n se muestra un documento HTML con el uso adecuado de may煤sculas y min煤sculas: 


  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="UTF-8">
      <title>Ejemplo de Sensibilidad a May煤sculas y Min煤sculas</title>
    </head>
    <body>
      <div class="contenido">
        <p>Texto en un div.</p>
      </div>
    </body>
  </html>


Extensiones de los archivos en HTML

Los archivos HTML generalmente tienen extensiones de archivo que indican su tipo. Las m谩s comunes son:

  • .html: Esta es la extensi贸n est谩ndar para archivos HTML.
  • .htm: Esta extensi贸n se usaba com煤nmente en sistemas m谩s antiguos que limitaban el n煤mero de caracteres a tres. A煤n es v谩lida y se puede usar.

Por ejemplo, pagina.html o pagina.htm son archivos HTML v谩lidos.


Ejemplo

A continuaci贸n se muestran ejemplos de nombres de archivos HTML:


    <!-- Archivo est谩ndar -->
    pagina.html
  
    <!-- Archivo antiguo -->
    pagina.htm


Diferencias entre htm y html

Las diferencias entre .htm y .html son principalmente hist贸ricas:

  • .html es la extensi贸n m谩s utilizada y recomendada para archivos HTML en la actualidad.
  • .htm fue utilizada en sistemas de archivos m谩s antiguos que limitaban el n煤mero de caracteres a tres. Aunque sigue siendo v谩lida, es menos com煤n.

En la pr谩ctica, ambas extensiones son funcionalmente equivalentes y no afectan c贸mo se renderiza la p谩gina en un navegador moderno.


Ejemplo

Un archivo con extensi贸n .html y uno con extensi贸n .htm funcionar谩n igual: 


    <!DOCTYPE html>
    <html lang="es">
      <head>
        <meta charset="UTF-8">
        <title>Ejemplo HTM vs HTML</title>
      </head>
      <body>
        <h1>Archivo HTML</h1> 
      </body>
    </html>
  
    <!-- Este tambi茅n es v谩lido -->
    <!DOCTYPE html>
    <html lang="es">
      <head>
        <meta charset="UTF-8">
        <title>Ejemplo HTM vs HTML</title>
      </head>
      <body>
        <h1>Archivo HTM</h1> 
      </body>
    </html>


Filenames predeterminados

Al crear archivos HTML, algunos nombres de archivos son considerados predeterminados por varios servidores y navegadores. Estos incluyen:

  • index.html: Se utiliza como la p谩gina de inicio predeterminada en muchas configuraciones de servidor.
  • default.html: A veces se utiliza como una alternativa a index.html.

Es recomendable utilizar estos nombres predeterminados para facilitar el acceso a su contenido.


Ejemplo

A continuaci贸n se muestra c贸mo se utiliza index.html como un archivo predeterminado: 


    <!DOCTYPE html>
    <html lang="es">
      <head>
        <meta charset="UTF-8">
        <title>P谩gina de Inicio</title>
      </head>
      <body>
        <h1>Bienvenido a mi p谩gina de inicio</h1>
      </body>
    </html>




Tags:
Jorge Catalao

Posted by: Jorge Catalao

Bienvenido a mi blog de cocina, un espacio donde comparto recetas sencillas que celebran tanto los sabores de hoy como los de ayer. Aqu铆 encontrar谩s platos f谩ciles de preparar, con ingredientes accesibles y explicaciones paso a paso, pensadas para quienes disfrutan cocinar sin complicarse. Me inspiro en la cocina tradicional, esos sabores que nos conectan con la infancia y la memoria, pero tambi茅n en recetas modernas, r谩pidas y pr谩cticas para el ritmo actual. Desde guisos caseros hasta ideas frescas para todos los d铆as, este blog es para quienes aman el sabor aut茅ntico, sin importar el nivel de experiencia en la cocina. ¡Cocinar puede ser simple, delicioso y hasta divertido! Gracias por estar ac谩 y compartir conmigo esta pasi贸n por la buena comida.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias