Fundamentos de HTML: Etiquetas, Estructura y Semántica

Aprende conceptos básicos de HTML, elementos y estructura esenciales para el desarrollo web y la preparación laboral.

Descripción general

HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. Entender los fundamentos de HTML es fundamental para los desarrolladores web, ya que forma la columna vertebral de la organización y presentación del contenido web.

Cómo funciona

Los documentos HTML se estructuran utilizando una serie de elementos y etiquetas que definen diferentes partes del contenido. Aquí hay algunos elementos clave de HTML:

  1. La declaración <!DOCTYPE html> define el tipo de documento y la versión de HTML.
  2. La etiqueta <html> envuelve todo el contenido de la página.
  3. La sección <head> contiene meta-información, enlaces a hojas de estilo y scripts.
  4. La sección <body> contiene el contenido real del documento que se muestra en el navegador.

Aquí tienes una estructura mínima de documento HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Título del Documento</title>
</head>
<body>
    <h1>Título Principal</h1>
    <p>Este es un párrafo de texto.</p>
    <a href="https://example.com">Este es un hipervínculo</a>
    <br>
    <p>Otro párrafo.</p>
</body>
</html>

Elementos clave de HTML

Elemento Descripción
<!DOCTYPE> Declaración que define el tipo de documento HTML.
<html> Elemento raíz de una página HTML.
<head> Contiene meta-información y enlaces.
<title> Define el título del documento.
<body> Contiene el contenido mostrado en la página web.
<h1>-<h6> Etiquetas de encabezado usadas para títulos (h1 es el más alto).
<p> Define un párrafo.
<a> Crea un hipervínculo.
<br> Inserta un salto de línea.
<main> Define el área principal de contenido.

Errores Comunes

  • Olvidar incluir la declaración <!DOCTYPE html>.
  • Colocar incorrectamente las etiquetas <head> y <body>.
  • No cerrar adecuadamente las etiquetas, lo que lleva a problemas de visualización.
  • Confundir elementos de bloque (como <div>) con elementos en línea (como <span>).
  • Usar una etiqueta incorrecta para crear un enlace (debería usarse <a>).

Preguntas Frecuentes

Q: ¿Cuál es el propósito de la etiqueta <head> en un documento HTML?
A: La etiqueta <head> contiene meta-información sobre el documento, como el título, enlaces a hojas de estilo y scripts.

Q: En HTML5, ¿qué etiqueta se utiliza para definir el área principal de contenido de un documento?
A: La etiqueta <main> se utiliza para definir el área principal de contenido de un documento HTML.

Q: ¿Cuál es el elemento HTML correcto para insertar un salto de línea?
A: La etiqueta <br> se usa para insertar un salto de línea en HTML.

Q: ¿Cuál de los siguientes elementos se utiliza para crear un hipervínculo en HTML?
A: El elemento <a> se utiliza para crear un hipervínculo. Requiere el atributo href para especificar el destino del enlace.

Referencias

Practica

¿Listo para practicar HTML Basics?

Responde preguntas reales, recibe feedback al instante y sube tu puntaje de habilidad — gratis. La práctica es en inglés, como las entrevistas técnicas reales.

Prueba una 👇

ReactHooksIntermedio
0 XP
When does useEffect run by default?

↑ Go ahead — pick an answer. This is Skillpato.