Hace unas semanas escribí un post sobre cómo crear botones personalizados con HTML5 y CSS pero, claro está que, cuando no entiendes un lenguaje todo resulta mucho más complicado y eso puede traernos muchas dificultades y hacernos perder mucho tiempo. Por eso hoy quiero dar un paso atrás y asentar las bases de una forma sencilla y básica mostrando la estructura y las partes principales de un código HTML5 para los que aún no se han familiarizado con él.
Contents
- 1 Un consejo
- 2 Ejemplo de código HTML5 de una página sencilla
- 3 Anatomía del código HTML5 – Las partes y su significado.
- 4 Posible resultado de nuestro código HTML5
- 5 Espero que te haya sido de utilidad, si es así, no dudes en comentar y compartir.
Un consejo
Cuando yo empecé en la programación todo me parecía muy abstracto, la solución para mi fue hacerme con una serie de libros (sí, libros físicos de los de antes) que me ayudaron a disponer de unos contenidos ordenados asequibles y tangibles. Por si alguien se encuentra ahora mismo en esta situación, para empezar con la programación web os recomiendo el libro «El gran libro de HTML5, CSS3 y JavaScript». Este libro os dará una base de conocimientos muy útil para desde aquí seguir creciendo.
Primero te quiero enseñar un código HTML5 completo para luego analizar las partes y poder entenderlo.
Ejemplo de código HTML5 de una página sencilla
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título de la WEB</title>
<meta charset="UTF-8">
<meta name="title" content="Título de la WEB">
<meta name="description" content="Descripción de la WEB">
<link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header>
<h1>Título de la WEB</h1>
</header>
<nav>
<a href="http://dominio.com/seccion2.html">IR SECCIÓN 2</a>
<a href="http://dominio.com/seccion2.html">IR SECCIÓN 3</a>
</nav>
<section>
<article>
<h2>CONTENIDO PRINCIPAL</h2>
<p>Este es el contenido principal de mi web</p>
<div>
<p>Aquí tenéis una imagen.</p>
<img src="http://dominio.com/imagen.jpg" alt="paisaje">
</div>
</article>
</section>
<aside>
<h3>Banner de publicidad</h3>
<a href="http://dominio-externo.com">
<img src="http://dominio.com/banner-publicidad.png" alt="banner de publicidad">
</a>
<h3>Testimonios</h3>
<p>Me gusta mucho esta página.</p>
</aside>
<footer>
<h4>Avisos legales</h4>
<a href="http://dominio.com/aviso-legal">Política de cookies</a>
<h4>Redes sociales</h4>
<a href="http://facebook.com/mi-pagina-de-facebook">Mi Facebook</a>
</footer>
</body>
</html>
Anatomía del código HTML5 – Las partes y su significado.
DOCTYPE
<!DOCTYPE html>
La etiqueta doctype declara el tipo de documento, por lo que esta está señalando que este es un documento HTML.
HTML
<html></html>
Delimita el documento HTML.
Atributo a destacar
LANG
<html lang="es"></html>
Indica el lenguaje de contenido del código.
HEAD
<head></head>
El elemento head delimita la cabecera del documento, entre sus etiquetas contiene información como scripts, metadatos, estilos, ubicación de documentos de estilos, título de la página, etc.
META
<meta name="description" content="Descripción de la WEB">
Las meta etiquetas se utilizan para identificar propiedades del documento como por ejemplo el autor, el título y la descripción que mostrarán los buscadores, etc.
Usos a destacar
META CHARSET
<meta charset="UTF-8">
Establece el tipo de codificación del documento.
META TITLE
<meta name="title" content="Título de la WEB">
Contiene el titulo que se mostrará en los buscadores.
META DESCRIPTION
<meta name="description" content="Descripción de la WEB">
Es el texto que se muestra bajo el título en los motores de búsqueda.
LINK
<link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet" type="text/css"/>
Esta etiqueta contiene un link a una hoja de estilos externa, la cual se utilizará en este documento.
Atributo a destacar
HREF
Especifica la url donde se localiza la hoja de estilo.
BODY
<body></body>
La etiqueta body delimita el cuerpo del documento y contiene todo aquello que podremos ver en nuestro navegador. Imágenes, textos, enlaces, video, etc…
HEADER
<header></header>
El contenido de esta etiqueta debe ser la cabecera de nuestra página donde se suele encontrar el título, el logotipo y poco más.
NAV
<nav></nav>
Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos los enlaces internos para movernos entre nuestras diferentes secciones del sitio web.
A
<a href="http://dominio.com/seccion2.html">IR SECCIÓN 2</a>
Representa un enlace o hipervínculo.
Atributos a destacar.
HREF
Dirección URL hacia la que apunta el enlace.
H1, H2, H3, H4, H5, H6
<h1>Título de la WEB</h1> <h2>CONTENIDO PRINCIPAL</h2> <h3>Testimonios</h3> <h4>Avisos legales</h4>
Estas etiquetas establecen los encabezados. Se organizan por niveles siendo H1 el más importante y H6 el menos importante.
SECTION
<section></section>
La etiqueta section engloba una sección de texto, imágenes y otros elementos que guardan cierta relación entre ellos. Normalmente siempre le podremos poner un título o encabezado.
ARTICLE
<article></article>
La etiqueta article se suele encontrar dentro de una etiqueta section y sirve para dividir y ordenar los contenidos en su interior.
DIV
<div></div>
Otra forma de dividir contenido para posteriormente aplicarle clases y modificar su estilo.
P
<p></p>
Entre las etiquetas P colocaremos un párrafo de texto.
IMG
<img src="http://dominio.com/imagen.jpg" alt="paisaje">
Esta etiqueta coloca una imagen en el documento mediante un enlace.
Atributos a destacar.
ALT
Representa el texto alternativo, muy importante para que los bucadores puedan obtener información de la imagen.
SRC
URL donde se encuentra la imagen.
ASIDE
<aside></aside>
Contiene información no vital o que no está estrechamente relacionada con el contenido principal de la página como podrían ser banners de anuncios, citas o enlaces externos.
FOOTER
<footer></footer>
Aquí encontraríamos el código perteneciente al pie de página, donde se suelen colocar los enlaces a textos legales, el copyright, etc.
Posible resultado de nuestro código HTML5
Aquí dejo la imagen que muestra el navegador tras asignarle algunos estilos. He añadido las etiquetas para que puedas orientarte bien.
Espero que te haya sido de utilidad, si es así, no dudes en comentar y compartir.