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.

Seguir con el tutorial

Volver al índice
Siguiente: La cabecera del documento

5 comentarios en “Tutorial HTML5: Introducción al HTML

  1. 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!!

        1. 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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

Menú

Centro de preferencias de privacidad

Necesarias

Estas cookies són necesarias para el correcto funcionamiento de este sitio web así como sus funcionalidades internas.

PHPSESSID, gdpr[allowed_cookies], gdpr[consent_types]

Promoción

newsletter_leads

Estadísticas

_gat_gtag_UA_6499264_16, _gid, _ga

Otras