Martin Wilches
Posted on January 30, 2022
- Lenguaje de marcas de hipertexto que permite estructurar el contenido de un sitio web.
- La estructura del contenido se realiza por medio del uso de elementos HTML.
- Un elemento HTML se compone por una etiqueta de apertura, el contenido del elemento y una etiqueta de cierre, aunque algunos elementos HTML únicamente cuentan solo con etiqueta de apertura.
Elemento HTML
El siguiente es un ejemplo de un elemento HTML usado para definir un párrafo dentro de la estructura del sitio web.
<p>Hola Mundo</p>
- <p> - Etiqueta de apertura.
- Hola Mundo - Contenido del elemento.
- </p> - Etiqueta de cierre.
Otro tipo de elemento común es aquel que solo cuenta con etiqueta de apertura, como es el caso del elemento HTML que permite forzar un salto de línea del contenido, como por ejemplo al querer iniciar un texto en una nueva línea de la página.
<br>
Estructura HTML básica
Un documento HTML contiene texto plano que se almacena en un archivo con extensión .html. Este texto contiene la sintaxis del lenguaje de marcado, el cual se estructura mediante ciertos elementos HTML principales, los cuales tienen una función predefinida que permiten la inclusión de nuevos elementos
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body
-
<!DOCTYPE html>- Este elemento debe ser definido en la primera línea de código del documento, y es usado por el navegador para identificar la versión del código HTML a renderizar, en este caso HTML5. -
<html>- Define la raíz del documento, encapsulando de esta manera el resto de elementos encargados de estructurar el sitio web. -
<head>- El contenido de este elemento no es visible en la ventana gráfica del navegador, con lo cual su utilidad principal se basa en añadir información adicional del sitio web. -
<body>- Todos los elementos que se incluyan como su contenido, serán visibles en la ventana gráfica del navegador.
Elementos HTML básicos
Los siguientes son algunos elementos comúnmente encontrados en la estructura básica de un documento HTML:
-
<h1>- Encabezado principal del sitio web. Existen en total 6 niveles de encabezados HTML, siendo<h1>el encabezado de mayor relevancia del sitio (solo debe existir uno en la estructura) y<h6>el de menor relevancia.
<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>
-
<!--Comentario-->- Los comentarios permiten documentar el contenido del archivo .html, además de que dichos comentarios no serán renderizados en la ventana gráfica del navegador. -
<img>- Inclusión de imágenes en la estructura del sitio web. -
<a>- Hiperenlace que permite acceder a recursos web alojados en servidores externos al sitio actual, o a una ubicación especifica dentro del mismo sitio web actual. -
<ul>- Lista cuyos elementos no tienen un orden específico. -
<ol>- A diferencia de la anterior, el orden de los elementos listados si tiene relevancia.
Atributos
Todos los elementos HTML pueden incluir atributos, cuya función principal es la de añadir información adicional del mismo elemento.
En el siguiente ejemplo al elemento <img> se le incluye un atributo llamado src, cuyo valor servirá como ruta de alojamiento de la imagen a renderizar.
<img src="./imagenes/imagen1.png" alt="Descripcion de la imagen">
Los atributos son definidos siempre dentro de la etiqueta de apertura, además de que se pueden incluir tantos atributos como sea necesario, como en el ejemplo anterior donde se incluye un segundo atributo llamado alt, cuyo valor representa la descripción de la imagen, la cual será renderizada por el navegador, en caso que dicho archivo multimedia no pueda ser cargado.
Posted on January 30, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.