HTML
El Lenguaje de Marcado de Hipertexto (HTML) es un lenguaje de marcado que se utiliza para estructurar la manera en la que se presenta el contenido de una aplicación o página web.
Esta estructura la logra mediante el uso de etiquetas semánticas. Existen dos tipos de etiquetas, las etiquetas de apertura (<nombre_elemento>) y etiquetas de cierre (</nombre_elemento>). A su vez entre medio de la etiqueta de apertura y la etiqueta de cierre va el contenido, por ejemplo: <nombre_elemento>Contenido…</nombre_elemento>. Si prestamos atención al ejemplo anterior notamos que arranca con una etiqueta de apertura <nombre_elemento>, luego tenemos el contenido y para finalizar cerramos con la etiqueta de cierre </nombre_elemento>.
Pero como para todas las reglas, HTML tiene sus excepciones y no siempre las etiquetas de apertura van a tener una etiqueta de cierre, en estos casos se incluyen etiquetas como <img>, <meta>, <input> y <link>.
Pongamos en practica lo que venimos explicando, para este ejemplo vamos a usar la etiqueta <p> que se usa para representar párrafos. Como ya comentamos, los elementos suelen tener una etiqueta de apertura y otra etiqueta de cierre. La etiqueta de apertura contiene el nombre del elemento entre corchetes angulares(<p>), mientras que la etiqueta de cierre es idéntica a la de apertura con la adición de una barra diagonal (/) (</p>). Luego el contenido va entre esas dos etiquetas: <p>Este es un párrafo de ejemplo</p>.
Creando una página simple
Bien, vamos a poner en practica lo explicado anteriormente con un ejemplo real. Podemos crear una pagina con HTML usando cualquier editor de texto y para visualizarlo tenemos que guardar el archivo con extensión .html.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Hola!</title>
</head>
<body>
<h1>Hola Mundo!</h1>
<p>Este es un ejemplo del parrafo.</p>
</body>
</html>
Acá hemos creado una pagina super sencilla con HTML, pero que significan todas las etiquetas que usamos?
Etiqueta | Significado |
<!DOCTYPE> | Declara el tipo de documento y la versión de HTML que se está utilizando. |
<html lang=”es”> | Define el contenedor raíz de un documento HTML. El atributo lang declara el lenguaje principal de la pagina. |
<head> | Contiene metadatos e importaciones a fuentes externas. |
<meta> | Proporciona metadatos sobre el documento, como la codificación de caracteres y descripciones. |
<title> | Establece el título del documento que aparece en la pestaña del navegador. |
<body> | Contiene el contenido visible de la página web, como texto, imágenes y enlaces. |
<h1> | Define un encabezado de nivel 1, generalmente usado para el título principal del documento. |
<p> | Define un párrafo de texto. |
En fin esta es la estructura de una pagina HTML, si bien hay una gran cantidad de elementos mas que no abarcamos en este articulo, la estructura es siempre la misma.