Estructura básica de HTML

Bienvenido otra vez, si ya leíste el artículo anterior recordarás que creaste tu primer sitio web, en el cual mostraste el mensaje "Hola mundo". Hoy vas a aprender sobre la estructura básica de HTML, como esta formado un archivo de este tipo, que partes hay y cual es su función, etc. ¡Empecemos!

Primero hay que entender que HTML funciona con “etiquetas” que son aquellos textos que se encuentran entre “<” y “>”, hasta el momento solo viste “<h1>” pero hay muchísimas más. Por lo general, las etiquetas van en pares, es decir, hay dos iguales. Poniendo el caso anterior como ejemplo: 

<h1> Hola mundo </h1>

Entre las dos etiquetas “<h1>” irá el texto que queremos mostrar, (en este caso el título, porque esta etiqueta es para definir el título principal). Como verás, al final al “<h1>” se le agrega una “/”, esto indica el cierre de etiqueta.

Una página HTML tiene una estructura básica, que es algo como esto: 

                            
<html> 

	<head> 
	</head>

	<body> 
	</body>
                                
</html>

Vamos por partes ¿Qué es esa etiqueta “<html>” que se abre y se cierra al principio y al final? Eso indica que vamos a escribir código HTML, no es 100% necesario, pero muy recomendable. Luego tenemos otras dos etiquetas dentro, que son: “<head>” y “<body>”.

<head>
En esta etiqueta vamos a poner algunas configuraciones de la página web que veremos más adelante, pero por ahora, dejémoslo estar.

<body>
Dentro de esta etiqueta vamos a escribir el 99% de lo que se verá en la página, es aquí donde deberíamos poner nuestro “<h1>”.

Nuevas etiquetas
Lista de etiquetas que te pueden ser útiles:

Etiqueta Descripción
<h1>, <h2>, <h3>, <h4>, <h5> y <h6> Indican títulos, <h1> tiene la letra más grande, mientras que <h6> tiene una letra más pequeña.
<p></p> Indican un párrafo, en el que vas a escribi el texto que quieras.
<b> </b> Indican textos con negrita, como este
<hr/> Insertar una línea separadora.
<br/> Insertar un salto de línea

Como verás, las últimas dos filas están resaltadas con un amarillo, eso indica que cuando escribas estas etiquetas, nunca vas a poner otra con cierre, es decir, a diferencia que, por ejemplo los “<h1>”, no vas a poner dos, sólo una. La mejor manera de entender bien esto es con un ejemplo. 

                            
<html>
    <head>

    </head>

    <body>
        
        <h1>Primera página web </h1>
        <p>Hola, esta es mi <b>primera página web </b></p>

        <hr />

        <h2>Este es un título secundario </h2>
        <p>En este párrafo iría más texto. </p>

    </body>
</html>

Recordar que siempre dentro de una etiqueta que se abre y se cierra, se puede poner otra etiqueta dentro, como en el primer “<p>” que tiene un “<b>” dentro. Como verás, el “ <hr/>” no tiene una segunda etiqueta que indique su cierre, eso es a lo que me refería.

El resultado sería algo como esto:

Primera página web

Hola, esta es mi primera página web

Este es un título secundario

En este párrafo iría más texto.

El primer título, que es el más grande es el “<h1>”, debajo un “<p>”. En el medio hay una línea separadora que es el “<hr />” y debajo está el título secundario, “<h2>” y más texto "<p>".

Ahora, deberías ponerte unos minutos por tu cuenta a jugar un poco con este código, probar el resto de títulos (h3, h4, h5, etc), escribir un poco de texto, probar que pasa cuando no se cierra una etiqueta y lo que se te ocurra, no te de miedo probar, no se rompe ;)

Para la próxima página trabajaremos con imágenes.

Siguiente >>