Elementos Semánticos en HTML
- Siempre declare el tipo de documento
- Utilice siempre las etiquetas body
- Cerrar todos los elementos HTML
- Utilice el atributo lowercase
- Los atributos se ponen sin comillas
- En imágenes utilice siempre alt, width y height
- Los espacios y el símbolo de igual (=)
- Evite las líneas de código largo
- Nunca salte la etiqueta "title"
- ¿Qué pasa si omitimos las etiquetas "html" y "body"?
- Omitiendo la etiqueta "header"
- Cerrando elementos vacíos
- Añadiendo el atributo "lang"
- Meta charset, ¿qué es?
- Configuración de viewport
- HTML y los comentarios
- Usando hojas de estilo
- ¿Cómo cargamos JavaScript en HTML?
- Acceso a elementos HTML con JavaScript
- Uso de mayúsculas y minúsculas en HTML
- Extensiones de los archivos en HTML
- Diferencias entre htm y html
- Filenames predeterminados
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:
<!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>
<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:
<input type="text" name="usuario">
<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:
<input type="text" name="usuario" id="usuario" class="form-control" placeholder="Introduce tu nombre completo">
<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>:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Bienvenido a mi sitio web</title>
</head>
<body>
<h1>Hola, mundo!</h1>
</body>
</html>
<!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:
<!DOCTYPE html>
<head>
<title>Ejemplo de omisión</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<!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:
<img src="imagen.jpg" alt="Descripción" />
<br />
<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
styleen 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
srcen 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 suid. - Usando
document.querySelector()para seleccionar elementos con selectores CSS. - Accediendo a elementos por su nombre de etiqueta o clase con
document.getElementsByClassName()ydocument.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:
.htmles la extensión más utilizada y recomendada para archivos HTML en la actualidad..htmfue 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 aindex.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>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias