Tutorial HTML5: Introducción al HTML
Bienvenidos a este tutorial de HTML donde espero poder transmitir las bases de este pseudo-lenguaje de programación web para que, tras terminar este tutorial, cuando termines de leer este tutorial puedas programar tu propia página web.
Un poco de historia
HTML, del inglés HyperText Markup Language, es un Lenguaje de Marcado de Hipertexto que, en un principio, se creó para la difusión de textos científicos por su facilidad para describir la estructura y el contenido en forma de texto mediante etiquetas.
A día de hoy, la versión (o derivado) más utilizado en el desarrollo web es el XHTML (eXtensible Hypertext Markup Language), llamado así por ser la versión XML de HTML. Tiene básicamente las mismas funcionalidades de HTML pero cumple las especificaciones más estrictas de XML.
Aunque el presente de la web es XHTML el futuro es HTML5 que, como veremos más adelante, ofrece multitud de ventajas con respecto a sus «rivales».
XHTML pretende darle a los sitios web un significado más semántico, cosa que culmina con la llegada de HTML5; el rey de la semántica en la web.
La estructura de HTML5
Todo sitio web hecho en HTML parte de una misma estructura, de no ser así ese sitio no cumple los estándares.
La estructura básica de cualquier sitio web en XHTML es la siguiente:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Titulo de la web</title>
</head>
<body>
<p>Contenido de la web</p>
</body>
</html> |
Pero vamos a ver la que nos interesa realmente, la estructura de un sitio web en HTML5:
< !DOCTYPE html>
<html lang="es_ES">
<head>
<title>Titulo de la web</title>
</head>
<body>
<p>Contenido de la web</p>
</body>
</html> |
Desglosando la estructura, explicación paso a paso
- El Doctype:
< !DOCTYPE html>
El doctype le dice al navegador que va a interpretar nuestro código en qué tipo de lenguaje está escrita nuestra web. El ejemplo de arriba es para HTML5; mucho más sencillo que el visto en el ejemplo de XHTML.
- Etiquetas html:
Delimitan el contenido html de nuestro sitio web; indican dónde debe comenzar y parar el navegador a la hora de interpretar el contenido. - Etiquetas head
Es la cabecera de nuestra web (no es una parte visual). Aquí indicaremos cosas como el título (etiquetas title) del sitio, enlaces a los ficheros Javascript, CSS…
Una parte importante y dificil de pulir a la hora de hablar sobre posicionamiento web: palabras clave, descripción, título del sitio… - Etiquetas body
El cuerpo (bastante obvio, ¿no?) de nuestro sitio web. Aquí va todo el contenido que terminará siendo visible al visitante.
Listas, tablas, imágenes, enlaces… Esta parte del sitio web da para mucho, por lo que será explicada con detenimiento en otra entrada.
En la próxima entrega explicaremos algunas de las partes de esta estructura, como las etiquetas head o body.
este tutorial esta super bueno y los felicito por excelente sitio web :D
Buenas Darío,
Quería añadir un par de cosas:
Una duda: Porqué usas lang=es_Es y no lang=es ?
Y lo otro, bueno sólo como «ampliación» de la info estaría bien comentar que dentro del head faltaría añadir la codificación para que el navegador lea/muestre bien los carácteres tipo acentos etc…
También se podría añadir compatibilidades para dispositivos para que la web se vea bien, del tipo:
Creo que son cosas que hay que incluir para el buen funcionamiento de la web. ;)
Saludos!!
…del tipo:
meta name=»viewport» content=»width=device-width, initial-scale=1.0″
Claro, el charset es un fallo, desde luego. Pero no un fallo mío, un fallo de actualización. Al migrar el contenido de la otra web no pasé la última revisión de los artículos, lo actualizaré en cuanto tenga un rato. Prometido.
En cuanto al viewport, podría venir en otras entregas, pero jamás en la introducción. Piensa que la introducción ha de servir a los nuevos para entender HTML y, concretamente, HTML5. el viewport es algo «complejo» para el nivel que quería darle al arranque del tutorial.
Como digo, próximamente me meteré con este tutorial y el de CSS, a ver si es verdad ;-D
Saludos y gracias por comentar.