Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Encabezado del Documento | Estructura del Documento
HTML Definitivo
course content

Contenido del Curso

HTML Definitivo

HTML Definitivo

1. Desarrollo Web
2. Tags y Atributos
3. Estructura del Documento
4. Medios y Tablas
5. Formularios

bookEncabezado del Documento

El encabezado del documento puede incluir meta tags, muchas de las cuales no son visibles para el usuario en la ventana del navegador. Por lo tanto, en los próximos ejemplos, no verá ningún contenido visible. Estas tags almacenan información de metadatos sobre la página.

Título de la página

El texto dentro de la tag <title> se muestra en la pestaña del navegador. El título debe ser una descripción concisa de la página y tener un máximo de 60 caracteres.

html

index

css

index

js

index

copy

Con la ayuda de este código, podemos conseguir esta apariencia del sitio web. En la pestaña del navegador, observaremos el texto exacto encerrado dentro de la tag <title> (marco azul en la imagen).

Meta datos

La etiqueta <meta> contiene información para navegadores y motores de búsqueda: codificación del documento, comunicación de datos y mucho más. Las tags meta pueden tener muchos atributos, ya que todos transmiten información diferente. El más importante es la codificación de la página. Ayuda al navegador a mostrar el texto correctamente. En caso de no pasar encoding, el navegador puede mostrar mojibake en lugar de los caracteres.

html

index

css

index

js

index

copy

Significado de los atributos de las meta tags

  • name - el nombre de una propiedad puede ser cualquier palabra o frase, los navegadores web generalmente esperan un valor que puedan reconocer y utilizar para realizar una acción. Un ejemplo sería <meta name="author" content="name"> para indicar el autor de la página;
  • content - especifica el valor de la propiedad. Un ejemplo sería <meta name="language" content="english"> para especificar el idioma del texto de la página;
  • http-equiv - significa equivalente HTTP, y se utiliza para simular cabeceras de respuesta HTTP. Es poco frecuente. Un ejemplo sería <meta http-equiv="refresh" content="30"> para decir al navegador que actualice la página cada 30 minutos.

Meta tags básicas para mejorar el SEO

Nota

SEO (Search Engine Optimization) es el proceso de optimización de un sitio web para mejorar su visibilidad en los resultados de los motores de búsqueda.

  • <meta name="description"/> - especifica una breve descripción de la página web;
  • <meta name="author" /> - especifica el autor de la página web;
  • <meta name="language"/> - especifica el idioma de la página web;
  • <meta name="robots"/> - indica a los motores de búsqueda cómo rastrear o indexar la página web;
  • <meta name="googlebot" content="notranslate"/> - indica a Google que no permite una traducción automática de la página web;
  • <meta name="rating" content="safe for kids"/> - especifica la audiencia de la página web;
  • <meta name="copyright" content="Copyright 2023"/> - especifica el Copyright de la página web.
html

index

css

index

js

index

copy
1. ¿Dónde debe colocarse la tag `<meta>`?
2. ¿Qué contenido de tag se mostrará en la ficha de usuario?
3. ¿Qué se puede hacer para ayudar al navegador a indexar la página?
¿Dónde debe colocarse la tag `<meta>`?

¿Dónde debe colocarse la tag <meta>?

Selecciona la respuesta correcta

¿Qué contenido de tag se mostrará en la ficha de usuario?

¿Qué contenido de tag se mostrará en la ficha de usuario?

Selecciona la respuesta correcta

¿Qué se puede hacer para ayudar al navegador a indexar la página?

¿Qué se puede hacer para ayudar al navegador a indexar la página?

Selecciona la respuesta correcta

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 3
some-alt