HTML: Metadatos y estilización incorporada
HTML 5: Aprende sobre metadatos y estilización incorporada en tus documentos web. Mejora la semántica y el diseño de tus páginas con estas técnicas.
HTML 5 ofrece diversas herramientas para gestionar metadatos y aplicar estilos de manera eficiente en tus documentos web. En esta lección, abordaremos cómo utilizar metadatos y cómo incorporar estilos directamente en el HTML.
Metadatos en HTML 5
Los metadatos proporcionan información adicional sobre el contenido de un documento HTML, y se especifican principalmente en la sección <head>. A continuación, se presentan los elementos de metadatos más comunes:
<title>
El elemento <title> define el título del documento, que se muestra en la pestaña del navegador y es crucial para el SEO.
<head>
<title>Metadatos y estilización en HTML 5</title>
</head>
<meta>
El elemento <meta> se utiliza para especificar metadatos como la descripción del documento, palabras clave, información del autor, etc.
<head>
<meta charset="UTF-8">
<meta name="description" content="Aprende sobre metadatos y estilización en HTML 5.">
<meta name="keywords" content="HTML 5, metadatos, estilización, web">
<meta name="author" content="Juan Pérez">
</head>
<link>
El elemento <link> se usa para enlazar recursos externos como hojas de estilo (CSS) o fuentes. Es fundamental para la organización y mantenimiento del estilo de un sitio web.
<head>
<link rel="stylesheet" href="styles.css">
</head>
Estilización incorporada en HTML 5
HTML 5 permite la incorporación de estilos directamente en el documento HTML mediante el uso del atributo style y el elemento <style>. A continuación, se presentan las principales formas de estilización incorporada:
Atributo style
El atributo style se utiliza para aplicar estilos directamente a un elemento HTML. Es útil para estilos específicos y únicos.
<p style="color: blue; font-size: 14px;">Este es un párrafo con estilización incorporada.</p>
Elemento <style>
El elemento <style> se coloca en la sección <head> y permite definir estilos CSS que se aplicarán a todo el documento. Es más organizado y mantiene el HTML limpio.
<head>
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: #333;
}
p {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
Estilos en línea vs. estilos en bloque
Es importante entender cuándo usar estilos en línea y cuándo usar estilos en bloque. Los estilos en línea son adecuados para cambios específicos y únicos, mientras que los estilos en bloque son ideales para mantener una estructura y organización clara de los estilos en un documento más grande.
<!-- Estilo en línea -->
<p style="color: red;">Texto en rojo.</p>
<!-- Estilo en bloque -->
<head>
<style>
.rojo {
color: red;
}
</style>
</head>
<body>
<p class="rojo">Texto en rojo.</p>
</body>
Buenas prácticas
- Minimiza el uso de estilos en línea: Utiliza estilos en línea solo cuando sea absolutamente necesario para mantener el HTML limpio y fácil de mantener.
- Organiza tus estilos: Agrupa estilos similares y utiliza comentarios para mantener el código CSS organizado.
- Utiliza metadatos de manera efectiva: Los metadatos mejoran la accesibilidad y el SEO de tu sitio web. Asegúrate de incluir descripciones relevantes y palabras clave.
Lecciones de este módulo de HTML
Lecciones de programación del módulo Metadatos y estilización incorporada del curso de HTML.
Ejercicios de programación en este módulo de HTML
Evalúa tus conocimientos en Metadatos y estilización incorporada con ejercicios de programación Metadatos y estilización incorporada de tipo Test, Puzzle, Código y Proyecto con VSCode.