Aprender sobre desarrollo web es una de las mejores decisiones que puedes tomar para tu futuro y el primer paso es conocer la estructura básica de HTML. En este artículo te enseño los dos elementos más importantes de una página web: el head (cabecera) y el body (cuerpo de la página).
La estructura de una página web
Al iniciar con el código de una pagina web con lo primero que nos encontramos es con una declaración que se ve así <!DOCTYPE html>. Esto es una Declaración de Tipo de Documento (DTD) y lo que hace es informarle al navegador de la versión de HTML con la que se hizo el documento y, por ende, cómo debe procesarlo.
Este es nuestro punto de partida. Ahora bien, como no es una etiqueta sino una declaración, no se debe cerrar al final del documento </>
Seguidamente encontramos la etiqueta <html>, que nos engloba todo el contenido de la pagina web.
Head
El elemento head es el el primero que encontramos después de <html> y es la primera sección de la estructura básica de HTML. En términos generales, la cabecera o el head no es visible para los internautas. En esta sección se utilizan principalmente etiquetas que indican cómo debe comportarse el navegador o los motores de búsqueda con la página web.
Sin embargo, en la cabecera tenemos la primer etiqueta importante: el título o <title> </title>, en el que escribiremos el título de nuestra página web. Este será el texto que vemos al navegar en la ventana del navegador, en la pestaña, en la parte superior de la hoja al imprimirla o al guardar la página como marcador.
<head> <title>Blog de Programación y Tecnología | KeepCoding Tech School </title> </head>
Body
La siguiente sección corresponde al cuerpo o al contenido de la página web. El body es todo lo que vemos en la página web y está representado en código por medio de etiquetas. Esta sección está subdividida principalmente en 3 etiquetas: <header> (encabezado), <main> (principal) y <footer> (pie de página).
En el <body> escribimos toda nuestra página web, desde los títulos, párrafos, formularios, imágenes, videos y definimos por medio de etiquetas la tipografía, el color de la letra, si va en negrita o subrayada o de las 2 formas…
Ejemplo de estructura básica de HTML
Después de conocer las dos secciones más importantes de una página web, body y head, que conforman la estructura básica de HTML, es necesario aprender a representar por medio de código toda la parte visual.
Por ejemplo, a grandes rasgos, esta pagina que ves estaría escrita en HTML de la siguiente forma:
<!DOCTYPE html>
<html>
<head>
<title>Estructura básica de HTML</title>
</head>
<body>
<header>
<h1>Estructura Básica de HTML</h1>
</header>
<main>
<h2>Estructura Básica de HTML: Body y Head</h2>
<p>Primer párrafo</p>
<h3>Body</h3>
<p>Primer párrafo</p>
<h3>Head</h3>
<p>Primer párrafo</p>
<h2>Aprender a crear paginas web</h2>
<p>Primer párrafo</p>
</main>
<footer>
</footer>
</body>
</html>Evidentemente, hacen falta una gran cantidad de código.
Te dejamos un truco por si no lo conocías: si das clic derecho en cualquier parte de esta página y seleccionas Inspeccionar, podrás ver todo el código HTML de esta página.
Aprende a crear páginas web
Ahora que conoces la estructura básica de HTML para crear una página web, seguro que te interesa continuar formándote para aprender sobre las diferentes etiquetas, scripts, clases y todo lo que nos ofrece HTML. En KeepCoding podemos ayudarte con tu formación, ya que tenemos este excelente Bootcamp, donde aprenderás todo lo necesario para ser un desarrollador web Full Stack. ¡Inscríbete y continúa aprendiendo!
