42-Guia de estilo en HTML

Jorge Catalao octubre 23, 2024
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

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

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