Estructura de un hiperdocumento
El primer paso para la producción web es comprender cómo se estructura una página: cuáles son los elementos claves y cómo estos se definen a partir de estándares web que permitan su correcta indexación en motores de búsqueda y visualización en navegadores.
En este artículo intentaré dar una guía al respecto. ¡Vamos!
Por cierto, he actualizado esta entrada (09-2019) como material de apoyo al curso en «Diseño de proyectos educativos digitales» que oriento en la Universidad de Antioquia.
Estructura básica
Conocer el interior de una página web precisa dividirla en dos grandes partes: la cabeza y el cuerpo.
En la primera se especifica información sobre el documento que es de interés para los motores de búsqueda y para los navegadores web. Algunos de estos datos son:
- Título
- Juego de caracteres
- Descripción
- Palabras claves
- Instrucciones de programación
- Instrucciones de apariencia
Excepto el título, esta información no es visualizada por el navegador, pero sí tiene relación e impacto directo con el contenido de la página. Por ejemplo, el juego de caracteres define –entre otras- si el navegador puede interpretar correctamente las tildes y la letra “ñ”.
La segunda parte, el cuerpo, agrupa las etiquetas de contenido multimedia, como:
- Párrafo
- Negrita
- Cursiva
- Listas
- Imágenes
- Tablas
- Video y audio
Esta información sí es visualizada por el navegador.
Así, en resumen, podemos afirmar que una página web tiene dos partes: la cabeza (<HEAD>) y el cuerpo (<BODY>). En la primera hay información que le interesa a Google, y en la segunda está el contenido que puede leer nuestro lector.
Cuidado con las etiquetas HTML
En el párrafo anterior aparecen dos elementos marcados en letra roja: <HEAD> y <BODY>. Estos son etiquetas HTML y permiten al navegador interpretar correctamente lo que queremos mostrar.
¡Ojo! Cualquier imprecisión con el marcado semántico, es decir, con la escritura de estas etiquetas, puede afectar la correcta visualización del contenido y, por ende, la experiencia del usuario.
Lo anterior sin contar que si las etiquetas del <HEAD> están incorrectas es posible que nuestra página no funcione ni sea indexada por los motores de búsqueda.
Y es que el HTML tiene una sintaxis propia, la cual debe conservarse. Por ejemplo, para frases sencillas en español utilizamos la estructura: sujeto + verbo + complemento. Es la mejor forma de escribir. En HTML funciona igual.
Iniciando un documento web
Vamos a crear nuestra primera página web.
Imaginemos que el documento tiene dos cajas: el <HEAD> y el <BODY>. En cada caja se almacena información, recursos y contenidos. Esto lo revisamos anteriormente ¿cierto? Pero estas dos cajas están dentro de una caja mayor: el <HTML>.
Así, una página web es una gran caja, llamada <HTML>, que agrupa dos cajas: <HEAD> y <BODY>.
Por recomendación del estándar, cada caja tiene una etiqueta de apertura, por ejemplo:
La etiqueta de apertura de la caja mayor es <HTML> y su etiqueta de cierre es </HTML>. Si miramos en detalle, la diferencia entre una y otra es la barra diagonal en la etiqueta de cierre.
Y para las dos cajas siguientes, las etiquetas de inicio y final, respectivamente, son: <HEAD>, </HEAD>, y <BODY>, </BODY>.
Estas instrucciones permiten indicarle al navegador dónde empieza y termina una caja.
El código básico de un documento web es:
<html> <head> </head> <body> </body> </html>
Este es el código básico de un documento web. Se presenta la etiqueta <HTML> como gran contenedor. Dentro de ella aparecen <HEAD> y <BODY>, respectivamente.
Este código indica que:
- La primera etiqueta del documento es
<HTML> - La etiqueta
HTMLagrupa las dos partes de la página:<HEAD>y<BODY> - El
<HEAD>se define antes que el<BODY> - Al final el documento se define el cierre </HTML>
¡Felicidades! Acabas de aprender a crear una página web.
Optimizando el HEAD
El <HEAD>, como se mencionó anteriormente, es la primera parte de un documento web basado en HTML.
Allí se definen algunas etiquetas que agregan datos sobre contenido, contexto, cobertura, periodicidad, entre otros.
Esta información permite a motores de búsqueda, como Google o Bing, realizar procedimientos de indexación de contenidos más precisos.
Las etiquetas básicas para construir un buen HEAD son:
<META CHARSET="UTF-8">: Permite utilizar un juego de caracteres que contiene letras, signos ortográficos y símbolos del inglés y español. En otras palabras, UTF-8 permite que el contenido web presente tildes y la consonante “ñ”.
<TITLE>: Como su nombre lo indica, permite asignar un título al documento. Este dato aparece en la barra superior y/o pestaña del navegador.
<META NAME="DESCRIPTION" CONTENT=" ">: Permite anexar una descripción a cada página. Esta aparece en los resultados de búsqueda. La extensión recomendada es entre 70 y 160 caracteres.
<META NAME="KEYWORDS" CONTENT="#">: Permite anexar palabras claves sobre el contenido de cada página. Aunque algunos autores exponen que ya no es necesario, es recomendable anexarlas para el uso en sistemas de búsqueda propios o meta-buscadores. Se recomiendan 10 palabras claves por documento.
<META NAME="VIEWPORT" CONTENT="#">: Permite que los navegadores Web de dispositivos móviles identifiquen el documento HTML y lo visualicen correctamente, de acuerdo a las instrucciones de CSS.
<LINK REL ="ICON" TYPE="IMAGE/PNG " HREF="#">: Permite asignar una imagen como icono del documento. Aparece en la barra superior y/o pestaña de navegación.
Miremos una aplicación de estas etiquetas en el HEAD:
<html>
<head>
<meta charset="utf-8">
<title>Título de la página</title>
<meta name="description" content="Esta es la descripción del documento. No debe exceder los 160 caracteres">
<meta name="keywords" content="palabras, claves, máximo, diez, por, documento">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="img/design/fav-icon.png">
</head>
<body>
</body>
</html>
¿Necesitas asesoría en comunicación digital?
Diseña y optimiza tus proyectos en comunicación digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.
Conversemos
Otras etiquetas en el HEAD
Para ser más precisos y ampliar las posibilidades de un documento HTML, el HEAD permite añadir otras etiquetas semánticas.
Esto no indica necesariamente que toda página debe tener un HEAD similar; el éxito en el diseño de recursos HTML está en la precisión, oportunidad y pertinencia en el uso de las etiquetas.
Tomando como referente el sitio Web http://www.e-lexia.com, algunas etiquetas que pueden robustecer y optimizar el documento son:
<!DOCTYPE html>: Aunque está etiqueta no está inmersa en el HEAD (ni en el HTML) se convierte en una instrucción necesaria al diseñar en HTML5. Su función básicamente es indicar al navegador la versión del lenguaje de marcado que utiliza el documento.
<LINK REL="STYLESHEET" HREF=" ">: A través de esta etiqueta se vinculan archivos de estilo en cascada (CSS).
<META NAME="AUTHOR" CONTENT="e-Lexia">: Esta meta indica a los sistemas de indexación y recuperación de contenido el autor del mismo. Puede ser persona natural o jurídica.
<META NAME="REVISIT-AFTER" CONTENT="90 days">: El uso de esta etiqueta permite a los robots (pequeños algoritmos que visitan los sitios web en busca de contenidos) programar su regreso al sitio en busca de actualizaciones.
<META NAME="RATING" CONTENT="general">: Permite clasificar el contenido de acuerdo a las audiencias. Sus valores pueden ser: general, mature, restricted, 14 years, safe for kids.
<META NAME="ROBOTS" CONTENT="index, follow">: Por último, esta etiqueta permite o deshabilita la indexación del contenido por parte de los buscadores. Si su sitio es público, de interés general, la idea es permitir la indexación y seguimiento.
El resultado final del proceso de marcado semántico para la primera parte del documento (<HEAD>) es:
<html>
<head>
<meta charset="utf-8">
<title>Título de la página</title>
<meta name="description" content="Esta es la descripción del documento. No debe exceder los 160 caracteres">
<meta name="keywords" content="palabras, claves, máximo, diez, por, documento">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="img/design/fav-icon.png">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<meta name="author" content="Mi empresa">
<meta name="revisit-after" content="90 days">
<meta name="rating" content="general">
<meta name="robots" content="noindex, nofollow">
</head>
<body>
</body>
</html>
En “Producción Web con HTML y CSS (cap06)” puede encontrar más información sobre la optimización del HEAD, teniendo presente la técnica SEO
En el canal YouTube «e-Lexia.com» puedes encontrar más videos sobre el tema.
Etiquetas del BODY
El cuerpo del documento (<BODY>) es la zona que permite la interactividad entre usuario y recurso web; pues allí se insertan textos, imágenes, formularios, audiovisuales, enlaces y cualquier otro recurso.
Sin duda es la región de mayor trabajo para creadores de contenido (diseñadores gráficos, bibliotecólogos, comunicadores y otras disciplinas).
Aunque la información que se presenta en HEAD es importante para el éxito del sitio, el BODY presenta la información hito de la estrategia digital.
Los algoritmos de indexación de información de Google se concentran en dar mayor importancia al trabajo que se realice aquí. Incluso, muchas de las nuevas etiquetas semánticas de HTML5 apuntan a la optimización del BODY.
Para iniciar el marcado es necesario tener presente qué y cómo se quiere lograr. Es decir, identificar cada elemento y conocer cuál es la etiqueta HTML que mejor lo define.
Algunas de las etiquetas HTML de contenido son:
- Párrafo:
<P> - Encabezados:
- Primer nivel:
<H1> - Segundo nivel:
<H2> - Tercer nivel:
<H3> - Cuarto nivel:
<H4> - Quinto nivel:
<H5> - Sexto nivel:
<H6> - Tabla:
- Definición:
<TABLE> - Fila:
<TR> - Columna:
<TD> - Encabezado:
<TH> - Enlace:
<A> - Cita de otro recurso:
<BLOCKQUOTE> - Lista sin ordenar:
<UL> - Lista ordenada:
<OL> - Elemento de lista:
<LI> - Imagen:
<IMG>
Producción de contenidos web
Descarga este libro electrónico de acceso libre, donde se presentan recomendaciones de producción multimedia.
Obtener una copia
Creando el BODY
Continuando con el código, un ejemplo de página web con contenido sería:
<html>
<head>
<meta charset="utf-8">
<title>Título de la página</title>
<meta name="description" content="Esta es la descripción del documento. No debe exceder los 160 caracteres">
<meta name="keywords" content="palabras, claves, máximo, diez, por, documento">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="img/design/fav-icon.png">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<meta name="author" content="Mi empresa">
<meta name="revisit-after" content="90 days">
<meta name="rating" content="general">
<meta name="robots" content="noindex, nofollow">
</head>
<body>
<h1>Tema principal de la página</h1>
<p>Este es un primer párrafo. La recomendación es abordar una idea por párrafo, pues la lectura en pantalla es diferente a la de los libros.</p>
<h2>Aqúí hay un subtítulo de segundo nivel</h2>
<p>Las listas permiten presentar diferentes elementos y evitar las comas enumerativas. Esto, además, facilita la lectura.</p>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<h3>Un nuevo encabezado, pero de nivel 3</h3>
<table>
<tr>
<td>Aquí va contenido</td>
<td>Aquí también</td>
</tr>
</table>
</body>
</html>
¡Bien! Ahora ya sabes crear una página web. Lo que continúa es producir contenidos.
Si quieres ampliar más sobre el tema, te invito a leer estas dos entradas:
Tu aporte nos permite crear contenidos. Tu apoyo desde Nequi
¡Vamos por los 25.000 suscriptores en YouTube! Suscríbete
¿Tienes una pregunta sobre el artículo? Cuéntanos en los comentarios. Además, si buscas información sobre un tema y no está disponible, anótalo a continuación para agregarlo a nuestra agenda de contenidos.
—
Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter
Estructura de un hiperdocumento por juancadotcom se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internaciona . Basada en una obra en https://e-lexia.com/blog .
