Introducción al HTML

Introducción al HTML

Print Friendly, PDF & Email
Introducción al HTML
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.

Entradas relacionadas:

Listas ordenadas, no ordenadas y de definiciones en HTML y listas anidadas
- 542
Una lista html es una relación de datos agrupados y que tienen una temática en común. Las listas pueden ser ordenadas, no ordenadas y de definiciones. Veamos en este escrito como es su sintaxis, que a...
La importancia de la etiqueta < title > para el SEO
- 128
¿Quieres evitar que tus páginas web sean invisibles en internet? Entonces la etiqueta title es para ti y esta entrada te interesa.
Ejemplo de creación de página web con capas y migración a HTML5
- 742
El lenguaje de marcas sirve para dotar de estructura y contenido a un documento web. Mediante la etiqueta div veremos un ejemplo de como dotar de estructura a una página web. Y después utilizaremos la...
Como usar los encabezados h1 a h6 en html
- 188
Una duda frecuente cuando nos iniciamos en el mundo del html es saber cuando debemos usar un h1, un h2, un h3 o hasta un h4. En esta entrada miramos de dar un criterio lógico que pueda servir de ayuda...
Como funcionan los frameset de html. ¡Cuidado que están obsoletos!
- 237
El uso de framesets está completamente desaconsejado. Son etiquetas obsoletas. Sin embargo en esta entrada recuperamos su uso y las repasamos. ¡Nunca se sabe si algún día volverán a ser de utilidad!...
Mapas de imagen en html
- 263
Los mapas de imágenes son una funcionalidad HTML para las imágenes muy curiosa que permiten definir diferentes enlaces asociados a distintas zonas de una misma imagen. A pesar de haber caído en desuso...
Factores que afectan al tiempo de carga de una página web
- 255
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Resumen de atributos html para ayudarnos a memorizar
- 193
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
Creación de formularios html
- 540
En esta entrada repasamos las etiquetas html imprescindibles para escribir formularios así como los atributos más importantes de todos.
Validadores de código HTML y CSS
- 383
Incluso los programadores y diseñadores más experimentados cometen errores de sintaxis o vocabulario picando código en lenguaje html, css, javascript y cualquier otro lenguaje de programación. Nos pas...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.