HTML - Estructura General y Etiquetas Principales
Declaración de Tipo de Documento
<!DOCTYPE html>Debe ser la primer declaración del documento (declara como será la sintaxis del documento).
Cuando el código ya avanzado o terminado se valida para comprobar que esté correcto (todas las etiquetas cerradas, etc.) la forma de validación será en función de lo declarado en el tipo de documento.
Validador: validator.w3.org
¿Para qué sirve?
Indica al navegador que la versión del documento es HTML 5, y esto permite hacer uso de etiquetas y atributos adecuados para la versión.
Las páginas deben tener código compatible con la mayoría de las tecnologías y navegadores para poder ser interpretadas, por eso tenemos que trabajar con documentos HTML válidos.
HTML 5
Virtudes
- Subir y reproducir videos en línea sin necesidad de un plugin para poder hacerlo.
- Crear animaciones usando solamente código y no Flash.
- Nuevas etiquetas semánticas que ayudan a los motores de búsqueda.
- Nuevos atributos que facilitan validaciones.
Etiquetas HTML
<AbreEtiqueta>
Acá va el contenido
</CierraEtiqueta>¿Cómo son?
La mayoría son elementos con etiqueta de apertura y cierre.
<body>
Acá van todos los elementos visibles de la página.
</body>Otras solo se abren y no requieren etiqueta de cierre.
<img>
<link>
<meta>
<input>Atributos
Cada etiqueta puede tener atributos y definen las características de la etiqueta: class, id, title, etc.
Los atributos que indican apariencia no se recomiendan, se deben establecer por fuera del html.
Ejemplo no recomendado:
<img src="imagen.jpg" border="1">Estructura de un Documento HTML
<!DOCTYPE html>
<html>
<head>
Información del documento
</head>
<body>
Contenido del sitio
</body>
</html>Etiqueta <html>
Atributo “lang”
Mejora la comprensibilidad de los contenidos al hacer explícito el idioma de las páginas.
- Los lectores de pantalla pueden cargar las reglas de pronunciación correctas.
- Navegadores visuales pueden mostrar caracteres y guiones correctamente.
Referencias: ISO 639-1
<html lang="es">Etiqueta <head>
¿Qué es?
Es una etiqueta que contiene la información que se necesita para que la página funcione.
La mayoría de su contenido no es visible para el usuario. Dentro de la página, sólo se ve el título.
Es muy importante, entre otras cosas sirve para los motores de búsqueda.
<head>
</head>Etiquetas <meta>
¿Qué son?
Información incluida en las páginas web que no es vista directamente por el usuario.
Se utilizan para proporcionar información a los navegadores y buscadores de forma que les ayude a interpretar mejor la página.
Se escriben en lenguaje HTML dentro del propio documento web.
Importantes a nivel SEO por su capacidad para afectar al comportamiento de los buscadores, aportando información sobre por qué páginas debería posicionar una web, dando una descripción de la misma o bloqueando el acceso o indexación de la web por parte de los robots de los buscadores.
Son sólo una diminuta pieza del engranaje del SEO.
Meta charset
¿Qué es?
Indica la codificación de caracteres utilizada (charset).
Es importante que se coloque justo después de la apertura de la etiqueta <head> para asegurarnos que el navegador conocerá la codificación de caracteres utilizada antes de que comience a procesar las etiquetas.
<meta charset="UTF-8">Meta viewport
¿Qué es?
Controla el tamaño de la ventana en la que se visualiza la página.
Solo debe usarse en sitios responsive.
- width=device-width: El tamaño de la página debe ser como el del dispositivo en que se muestra.
- initial-scale=1.0: La página debe mostrarse inicialmente a escala real, sin hacer zoom.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Meta description
¿Qué es?
Texto que le indica al usuario de qué trata la página. Si no se completa, queda en manos del buscador la selección de un fragmento del texto de la página.
- Aparece en los resultados del buscador.
- Atrae visitas desde el buscador. La clave es adornar el texto para hacerlo más persuasivo. Sin falsear ni exagerar.
- Contribuye al SEO.
<meta name="description" content="Redacta una descripción del producto o servicios que ofreces volviendo a utilizar palabras claves. Unos 200 caracteres">Meta robots
¿Qué es?
Sirve para personalizar el comportamiento de robots de indexación, a la hora de procesar nuestra página web.
Cada una de las páginas puede tener una declaración de la etiqueta meta de robots distinta, con la que podemos definir de manera independiente cómo se trata cada una de las páginas del sitio.
Tantas como deseamos, separadas por comas.
<meta name="robots" content="NOINDEX">Valores del atributo content
- INDEX / NOINDEX: Si se desea o no permitir la indexación de la página por los motores de búsqueda
- FOLLOW / NOFOLLOW: Si se debe o no permitir a los motores de búsqueda recorrer la web a través de los enlaces que encuentre en el cuerpo del documento
Valores adicionales
- ARCHIVE / NOARCHIVE: Si deseamos o no que el motor de búsqueda archive el contenido del sitio web en su caché interna. Si decimos que no archive la página, no debería mostrar ese enlace de caché
- SNIPPET / NOSNIPPET: Que el motor de búsqueda no muestre ninguna descripción de un sitio, sólo su título. NOSNIPPET automáticamente define un NOARCHIVE, por lo que la página tampoco se mostrará en caché
Etiqueta <title>
¿Qué es?
Título correspondiente a cada página. Generalmente se muestra en la parte superior del navegador, en la pestaña o en título de la pantalla o ventana.
El título debe ser único para cada página, no se repite en el sitio.
Formato: Página actual | Sitio al que corresponde.
<title>título de tu página web utilizando palabras claves importantes, de 40 a 60 caracteres recomendados, no más de 15 palabras</title>Indexación de los Sitios Web
Para que tu página salga en los resultados los robots de Google deben encontrarla y clasificarla.
Estos “robots” (o “bots”) son programas automatizados que leen, extraen y archivan el contenido de las páginas.
Su misión es recorrer Internet rastreando todos los enlaces que puedan encontrar, con el objetivo de localizar páginas nuevas, y re-visitar las que ya están indexadas por si tienen contenidos nuevos.
Debido a que los robots no pueden leer con facilidad los contenidos creados con Flash, Java o AJAX no es recomendable que utilices estas tecnologías si quieres que tus contenidos sean indexados.
Referencias: SEO On-Page Tutorial
Etiqueta <body>
¿Qué es?
Aquí va el contenido de la página, lo que ve el usuario.
Lo que no esté en el body, en la mayoría de los navegadores no se ve.
Todos los documentos tienen body excepto los documentos hechos de marcos-frames (ventana independiente dentro de la ventana general).
<body>
</body>Los elementos en el body
Los elementos que colocamos en el body se hacen a través de etiquetas.
<p>párrafo</p>
<h1>encabezado grande</h1>
<h2>encabezado no tan grande</h2>
<!-- ... -->
<h6></h6>
<!-- comentario invisible en html-->Etiquetas Semánticas
¿Qué son?
Indican qué es el contenido que contienen, NO cómo se debe formatear.
Etiquetas Semánticas
<strong></strong>
<em></em>
<hr>Etiquetas No Semánticas
<b></b>
<i></i>
<u></u> <!-- Obsoleta para HTML 5 -->
<br>Consideraciones Importantes
Las etiquetas semánticas + estilos CSS pueden crear algunos efectos deseados, pero debemos tener presente que una misma línea de código debe visualizarse o entenderse de la misma manera en un navegador que soporte CSS, como en uno que no sea vean los estilos.
Tipos de Etiquetas
Referencias: HTML5 Periodical Table