Introducción al HTML

Introducción al HTML

Print Friendly, PDF & Email
Valora esta entrada

El HTML es un lenguaje de marcado que constituye uno de los pilares de la web. Fue inventado por Tim Berners Lee en 1990 a partir de otro lenguaje denominado SGML y que servía para dotar de estructura documental a una información.

El lenguaje de marcado es básicamente un idioma que se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir a los documentos web de contenido y estructura.

Etiquetamos las distintas partes de un documento web para aportar información al usuario, a los motores de búsqueda y a los navegadores.

Veamos primero el concepto de etiqueta web.

Consideraciones previas sobre el HTML

  • El HTML no es un lenguaje de programación.
  • El HTML es un lenguaje de marcado en el que describimos como serán los contenidos y la estructura de un documento web.
  • La base del HTML es el hipertexto. Entendemos por hipertexto la capacidad de enlazar documentos web de forma no secuencial.
  • Los archivos tienen formato .html aunque por razones históricas se admite también el formato .htm. El formato .htm ya está obsoleto y no se debe usar.

Concepto de etiqueta web

Una etiqueta es una información técnica que es capaz de ser detectada e interpretada por un navegador web. Las etiquetas pueden contener atributos que informan a los navegadores de los matices que se deben aplicar a un determinado marcado.

Las etiquetas generalmente tienen una instrucción de apertura y una instrucción de cierre. <> y </>

Existen también etiquetas que no tienen instrucción de cierre. En este caso se recomienda indicar una contrabarra /> (XHTML)

En función del tipo de html que escribamos (XHTML, HTML 4.01, HTML5) la sintaxis puede variar.

HTML5 incorpora etiquetas semánticas que además de aportar información para los navegadores también aportan informaciones para los motores de búsqueda.

etiquetas html
Ejemplos de etiquetas con y sin etiqueta pareja de cierre

Consideraciones importantes:

  • No se deben poner espacios en blanco entre el nombre de la etiqueta y la contrabarra. <p /> sería incorrecto por el espacio en blanco entre p y /
  • El cierre de la etiqueta nunca lleva ningún atributo. Sólo los pondremos con la etiqueta de apertura, ya sea una apertura con cierre y apertura o únicamente con apertura.

Estructura HTML básica de un documento web

HTML como lenguaje que es tiene un vocabulario y una sintaxis básica que debemos conocer. En el caso de la imagen adjunta:

  • <!DOCTYPE html> Informa a los navegadores que a continuación van a leer HTML5. Esta línea no es una etiqueta sino una instrucción. Si googleáis encontraréis versiones más extensas pero nosotros no las vamos a usar. Hacen referencia a versiones de html más antiguas.
  • <html></html> Informa a los navegadores que en su interior es dónde vamos a encontrar el HTML5. Esta etiqueta debe abrirse y cerrarse una única vez por documento web. Justo a continuación de la instrucción !DOCTYPE y al finalizar el documento web.
  • <head></head> Es la cabecera del documento web. La cabecera del documento web contiene informaciones técnicas para los navegadores web y para los motores de búsqueda. Por ejemplo aquí dentro encontraréis la etiqueta <title> y los <meta>. Sólo debe aparecer un <head> en un documento web y nunca debéis confundirlo con la etiqueta semántica de html5 <header>
  • <title></title> Informa a los motores de búsqueda cual es el contenido de la página web. Sólo se debe indicar una vez por documento web. Es fundamental para el SEO.
  • <body></body> Es el cuerpo del documento web. Encierra las etiquetas que van a aportar estructura y contenido a nuestro documento web. También sólo se escribe una única vez por documento web.
Estructura básica documento web
Estructura básica documento web

Consideraciones importantes:

  • No se puede escribir html entre  <html> ni <head>.
  • No se puede escribir html entre  </head> ni <body>.
  • No se puede escribir html entre  </body> ni </html>.
  • Revisar siempre que todas las etiquetas estén siempre correctamente cerradas.

Hasta aquí el resumen de la clase de hoy, ¡espero que os sea de utilidad! El próximo día seguiremos hablando viendo diferentes etiquetas de html y diferenciando las que son HTML5 de las viejas y anticuadas que no debemos usar pero si conocer. Y recordar la regla de Pareto… conociendo el 20% de las etiquetas podemos hacer grandes cosas.

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.