Introducción al HTML

Introducción al HTML

El HTML (HyperText Markup Language) fue creado en 1980 por Tim Berners-Lee, World Wide Web adoptó este lenguaje por su simplicidad, cualquiera podía leerlo o escribirlo sin la necesidad de ser programador.

Entender el código HTML

No hay que entrar en Matrix para entender HTML

El estándar está regulado por el W3C (World Wide Web Consortium) y está en constante evolución, podéis consultarlo en www.w3c.es.

Tags y atributos

Markup Language quiere decir lenguaje de marcado o de etiquetas. El HTML es un lenguaje que se basa en etiquetas o tags que contienen atributos.

  • Tag o etiqueta:
    <etiqueta>………..<etiqueta/>
  • Atributos: una etiqueta puede tener varios atributos y valores de estos.
    <etiqueta atributo1=“valor1″ atributo2=“valor2″>…….</etiqueta>
    <a href=“URL del enlace” rel=“nofollow”> Texto del enlace<a/>

HTML vs XHTML

El HTML se fue volviendo cada vez más complejo a medida que internet evolucionaba. En un intento por simplificarlo se creó el XHTML que exigía separar el contenido (HTML), del diseño y la maquetación (CSS) y de los complementos y plug-ins (JS externos). Además de estar mejor estructurado, el lenguaje volvía a ser restrictivo, era obligatorio cerrar etiquetas y usar minúsculas en ellas.

Evolución de HTML a XHTML

Evolución de HTML a XHTML

Estructura básica del HTML

El HTML está básicamente compuesto por dos segmentos: cabecera y cuerpo.

Estructura básica del HTML

Estructura básica del HTML

<!DOCTYPE>

Es la declaración del tipo de documento, aquí definimos el lenguaje que se va a utilizar, en este caso HTML5. Lenguajes anteriores como XHTML 1.0 o HTML 4.01 Strict tenian declaraciones de documento mucho más complejas. El HTML5 es un esfuerzo del consorcio porque el HTML vuelva a ser un lenguaje sencillo y comprensible por todos.

El HTML5 es un esfuerzo del consorcio porque el HTML vuelva a ser un lenguaje sencillo y comprensible por todos

<html></html>

La etiqueta html engloba todo el documento, en ella se define el tipo de HTML, la dirección de la escritura (para países árabes, China…) y el idioma. Una vez más en HTML5 se ha optado por una etiqueta mucho más sencilla que en modelos anteriores:

<html lang=es”— Etiqueta simplificada de HTML5 que nos indica que el idioma del documento “es” de español.

<head></head>

La etiqueta head contiene datos sobre la estructura del documento, se usa para hablar con los navegadores, buscadores y crawlers. Su contenido no es visible por parte del usuario.

Puede estar formada por otras etiquetas como:

  • <title> etiqueta obligatoria que define el título del documento.
  • <meta> información para buscadores y navegadores.
  • <link> define la relación del documento con un elemento externo o alternativo.
  • <script>define un script (programas simples almacenados en un archivo de texto plano) como por ejemplo javascript.
  • <style>define la información de estilos de la página.

Para Google la sección de cabecera (head) del documento, que antes era muy importante, se está volviendo menos relevante cada vez, pues se trata de que prime la parte que llega al usuario.

<body></body>

Esta etiqueta contiene la información de nuestra web que mostraremos a los usuarios como texto, enlaces, imágenes, tablas, videos…

no se trata de sobreoptimizar sino de crear un contenido natural y fácil de digerir por parte del lector

Google es capaz de distinguir las distintas areas de nuestra página como cabecera, menú, contenido, anuncios y footer pero en ocasiones se equivoca. Cuanto más semánticamente etiquetado esté un documento HTML mejor lo comprenderán los buscadores.

Google recomienda trabajar el <body>

Google recomienda trabajar tu <body>

Tenemos que evolucionar, no podemos quedarnos en el antiguo modelo de optimización. Ya no es necesario que todas las palabras clave vayan en negrita y repetidas hasta la saciedad, no se trata de sobreoptimizar sino de crear un contenido natural y fácil de digerir por parte del lector. El uso correcto de la negrita es para resaltar el contenido relevante y los enlaces para apuntar a contenido que enriquezca la experiencia del usuario, esto nos ayudará a posicionar incluso si los enlaces son externos.

Tal vez te interese…

¿Qué ha de cumplir la Etiqueta Title?

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>