¿Qué son las etiquetas HTML?

-

Las etiquetas HTML son los componentes fundamentales que se utilizan para estructurar y organizar el contenido de una página web. HTML, que significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje estándar para crear páginas web. Las etiquetas HTML le indican al navegador cómo debe interpretar y mostrar el contenido.

Estructura de una etiqueta

Una etiqueta HTML consta de dos partes principales: la etiqueta de apertura y la etiqueta de cierre. La etiqueta de apertura indica el inicio de un elemento y la etiqueta de cierre indica el final de ese elemento. Ambas etiquetas encierran el contenido que se desea marcar.

Por ejemplo, en la etiqueta <p>, que se utiliza para definir un párrafo: 

        <p>Este es un párrafo.</p>

Tipos de etiquetas

Existen diferentes tipos de etiquetas HTML, las más comunes son:

  • Etiquetas de estructura: Como <html>, <head>, y <body>, que definen la estructura general del documento.
  • Etiquetas de encabezado: Como <h1> a <h6>, que se utilizan para definir encabezados y subencabezados en el contenido.
  • Etiquetas de texto: Como <p> para párrafos, <strong> para texto en negrita, y <em> para texto en cursiva.
  • Etiquetas de enlace: Como <a>, que se utilizan para crear hipervínculos.
  • Etiquetas de imagen: Como <img>, que se utilizan para insertar imágenes.
  • Etiquetas de lista: Como <ul> (lista desordenada) y <ol> (lista ordenada) que se utilizan para crear listas.

Ejemplo de uso de etiquetas

A continuación, se muestra un ejemplo de un pequeño fragmento de código HTML que utiliza varias etiquetas: 

        <html>
            <head>
                <title>Mi Página Web</title>
            </head>
            <body>
                <h1>Bienvenido a mi página web</h1>
                <p>Esta es una página de ejemplo donde utilizamos diferentes etiquetas HTML.</p>
                <a href="https://www.ejemplo.com">Visita mi sitio</a>
            </body>
        </html>

Conclusión

Las etiquetas HTML son esenciales para el desarrollo web, ya que permiten estructurar y presentar el contenido de manera efectiva. Comprender cómo funcionan las etiquetas y cómo se utilizan es fundamental para cualquier persona que desee aprender a programar en HTML.

Comentarios

Publicar un comentario

Entradas populares de este blog

Ejemplo para hacer una imagen circular en CSS

-
Imagen
Crear una imagen circular en CSS es una de las tareas más simples pero efectivas para hacer que las imágenes se vean más atractivas. Este efecto es especialmente útil para avatares o fotos de perfil en sitios web. Aquí te muestro cómo hacerlo en solo unos pocos pasos. Paso 1: Configura el HTML Primero, necesitamos una imagen a la que le daremos forma circular. En este ejemplo, usaremos una estructura HTML simple: html <!DOCTYPE html > < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Imagen Circular en CSS </ title > < link rel = "stylesheet" href = "styles.css" > </ head > < body > < div class = "imagen-circular" > < img src = "avatar.jpg" alt = "Foto de Perfil" > </ div > ...
Sigue leyendo »

Ejemplo para añadir un contorno a un texto en CSS

-
Imagen
Añadir un contorno a un texto puede realzar su apariencia y mejorar su legibilidad, especialmente en fondos complejos. En este artículo, te mostraremos cómo hacerlo de manera sencilla utilizando CSS. ¿Qué es el contorno de texto? El contorno de texto se refiere a un borde que se aplica alrededor de las letras. Puede ayudar a que el texto destaque y sea más atractivo visualmente. Sin embargo, CSS no proporciona una propiedad directa para agregar un contorno a un texto, por lo que usaremos una combinación de propiedades para lograr el efecto deseado. Método 1: Usar text-shadow Una de las formas más comunes de crear un contorno es mediante la propiedad text-shadow . Esta propiedad se utiliza para añadir sombras al texto, pero también se puede manipular para simular un contorno. A continuación, te mostramos cómo hacerlo: Ejemplo de código html <!DOCTYPE html > < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name ...
Sigue leyendo »

Ejemplo para crear un tooltip con CSS

-
Imagen
Los tooltips son mensajes emergentes que aparecen cuando el usuario pasa el cursor sobre un elemento. Son útiles para proporcionar información adicional sin sobrecargar la interfaz. En este artículo, aprenderás cómo crear un tooltip simple usando solo HTML y CSS, sin necesidad de JavaScript. Paso 1: Estructura HTML Primero, crearemos la estructura HTML básica. Usaremos un span como el elemento que activará el tooltip y un div como contenedor del texto del tooltip. html <!DOCTYPE html > < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Ejemplo de Tooltip con CSS </ title > < link rel = "stylesheet" href = "styles.css" > </ head > < body > < div class = "tooltip-container" > < span class = "tooltip-trigger...
Sigue leyendo »