HTML Básico – Fundamentos
HTML (Lenguaje de Marcado de Hipertexto) es el lenguaje de marcado que forma la base de los sitios web. En este material, aprenderás sobre los conceptos fundamentales de HTML, su estructura y los elementos más importantes que te permitirán comenzar a construir tus propios sitios web. Esta página cubrirá la estructura de los documentos HTML, elementos básicos y algunos fragmentos de código simples para sentar las bases para un aprendizaje más detallado.
Conceptos Básicos de HTML
Los documentos HTML son archivos de texto plano guardados con una extensión .html o .htm. Cada página HTML comienza con una declaración que le dice al navegador que estamos usando HTML5.
Por ejemplo, una página HTML muy básica se ve así:
Las Partes Más Importantes
Revisemos los elementos clave que componen un documento HTML:
- <!DOCTYPE html>: La primera línea de cada página HTML que indica que estamos usando HTML5.
- <html>: El elemento raíz del documento que contiene toda la página.
- <head>: La sección donde proporcionamos información de fondo, como la codificación de caracteres, el título de la página y enlaces a hojas de estilo externas.
- <title>: El título de la página, que aparece en la pestaña del navegador.
- <body>: La sección que contiene el contenido real: textos, imágenes, enlaces, listas y otros elementos.
Títulos, Párrafos y Enlaces
Los títulos en la página generalmente se definen usando las etiquetas <h1>–<h6>, que ayudan a establecer una jerarquía. Las etiquetas <p> definen párrafos, y la etiqueta <a> representa hipervínculos.
Por ejemplo, el título principal:
Y un párrafo:
Un hipervínculo simple:
Imágenes y Listas
Las imágenes se insertan usando la etiqueta <img>. Especificas su fuente con el atributo src, mientras que el atributo alt contiene la descripción de la imagen. Las listas nos permiten mostrar datos de manera ordenada o desordenada.
Aquí hay un ejemplo de una lista desordenada:
Detalles del Código
<!-- Unordered list --> <ul> <li>First element</li> <li>Second element</li> <li>Third element</li> </ul>
Vista Previa
- First element
- Second element
- Third element
Y una lista ordenada:
Detalles del Código
<!-- Ordered list --> <ol> <li>Step one</li> <li>Step two</li> <li>Step three</li> </ol>
Vista Previa
- Step one
- Step two
- Step three
Línea Horizontal y Salto de Línea
La etiqueta <hr> crea un divisor horizontal que a menudo se usa para separar secciones de contenido, mientras que la etiqueta <br> inserta un salto de línea.
Elementos Autocerrados y Comentarios
Ciertos elementos HTML no requieren una etiqueta de cierre separada; estos se conocen como elementos autocerrados, como <img>, <br> o <hr>. Además, puedes incluir comentarios en tu código, que son invisibles para el navegador.
Seleccionar idioma
Establecer tema
© 2025 ReadyTools. Todos los derechos reservados.