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:

Ejercicio html sobre códigos HTML y caracteres especiales
- 49
Ejercicio html para prácticar los nombres HTML y los códigos HTML de los caracteres más útiles de recordar. Incluye solución.
Formatos de imagen png, gif, jpg y svg. ¿Cuándo usarlos?
- 52
¿Que formato de imagen usar? Influye la velocidad de carga, las transparencias, animaciones y la seguridad. Resumo las ideas clave.
Creación de formularios html
- 804
En esta entrada repasamos las etiquetas html imprescindibles para escribir formularios así como los atributos más importantes de todos.
Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.
- 854
El uso de tablas html es un clásico dentro del mundo web.  Se usan como recurso para introducir datos en un documento web y nunca para maquetar. ¡O así debería ser! Veamos thead, tbody, tfoot, caption...
Como anidar etiquetas html correctamente
- 39
Un error típico en muchos alumnos de web es no anidar bien las etiquetas. Te resumo como hacerlo y dónde se suele equivocar la gente.
Ejemplo de creación de página web con capas y migración a HTML5
- 1115
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...
Mapas de imagen en html
- 418
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...
Qué es un favicon y para que sirve
- 177
¿Eres de los que se fija en todos los detalles de una página web cuando navega? Entonces el favicon es para ti. En esta entrada te explico que es y para que sirve.
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 60
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Listas HTML. Etiquetas ol, ul, li, dl, dt, dd.
- 828
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...
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.