Trucos de HTML para programadores y SEOs principiantes

Trucos de HTML para programadores y SEOs principiantes

El lenguaje de programación HTML5 es fundamental para el desarrollo de cualquier web. Como con cualquier lenguaje que pretendamos dominar, requerirá horas de estudio y práctica. Sin embargo, para una pequeña aproximación basta con unas pequeñas nociones básicas. Este post pretende ser de ayuda a todos aquellos que comienzan en el mundo de la programación y el SEO. Conocer las etiquetas más básicas, su nomenclatura y funcionamiento, es condición indispensable para poder realizar una aproximación a cualquier auditoría SEO de código que queramos realizar. 

Etiquetas fundamentales de HTML

<html>…</html>

Esta etiqueta aparece al principio y al final de un documento HTML (conocido como elemento raíz). Indica que la página web está escrita en HTML5, y todas las demás marcas de página se encuentran entre estas etiquetas iniciales y finales.

<title>…</title>

La etiqueta title es el título de la página, útil tanto para los motores de búsqueda (cuando escanean e indexan páginas) como para los usuarios. Aparecen en la barra de título de un navegador, exponiendo explícitamente el tema principal de cada página.

<head>…</head>

Contiene la información de esa página específica, incluidas las etiquetas de título, metadatos y enlaces a scripts y hojas de estilo.

<body>…</body>

Las etiquetas body incluyen todo el contenido que se mostrará a los usuarios, incluido todo lo que verán y leerán.

Información del documento HTML

<base/>

La URL base (por ejemplo: www.misitioweb.com) es útil para especificar todos los enlaces relativos en un documento (especialmente si tiene muchos enlaces internos).

<style>…</style>

Este documento incluye información sobre el estilo del documento, por lo general está predeterminado a CSS.

<meta/>

Los metadatos detallan información adicional sobre la página, incluida la descripción de la página, el autor, la fecha de publicación, las palabras clave y otra información de página “oculta”.

<scipt>…</scipt>

Este elemento incluye toda la información de scripts, o enlaces a scripts externos. También puedes incluir este elemento en el body para generar contenido dinámicamente.

<link/>

Se puede usar para crear relaciones con páginas o documentos externos, incluidas las hojas de estilo.

Estructura del documento HTML

<h1…h6>…</h1…h6>

Los seis niveles de encabezados, siendo 1 el más importante en una página y 6 el menos. Estos elementos se usan para describir secciones de contenido en una página.

<p>…</p>

Esta etiqueta fundamental se usa para organizar párrafos de texto.

<div>…</div>

Un contenedor genérico utilizado para denotar una sección de página.

<br/>

Crea un salto de línea, útil para escribir bloques de texto que deben estar en diferentes líneas.

<span>…</span>

Una sección en línea o un contenedor de bloques, generalmente utilizado para agrupar elementos de diseño.

<hr/>

Crea una regla horizontal, una ruptura seccional en una página HTML. Normalmente se utiliza para denotar un cambio en el tema o la sección de una página.

Texto y formato HTML5

<strong>…</strong>

Exactamente como suena, lo que indica es un énfasis FUERTE, que se muestra en negrita en la mayoría de los navegadores.

<b>…</b>

Otra forma de crear texto en negrita. Sin embargo, es más para llamar la atención que para enfatizar como la etiqueta anterior.

<em>…</em>

Las etiquetas de énfasis también son como suenan, haciendo hincapié en el texto o las frases que aparecen en cursiva en la mayoría de los navegadores.

<i>…</i>

Otra forma de agregar cursivas al texto, sin embargo, sin el énfasis añadido (similar a las etiquetas en negrita anteriores) y en su lugar se utiliza para denotar cosas como pensamientos o nombres.

<tt>…</tt>

Una etiqueta más antigua utilizada para mostrar texto de tipo de escritura de ancho fijo. Ya no es compatible con HTML5.

<strike>…</strike>

Esta etiqueta crea un texto tachado (o texto con una línea a través de él). Otra etiqueta antigua que no es  compatible.

<cite>…</cite>

Etiquetas utilizadas para citar referenciar información, útiles para citas y declaraciones en un documento.

<pre>…</pre>

Texto pre-formateado, “monoespacial” presentado con espacios en blanco dentro del elemento intacto.

<del>…</del>

Ayuda a denotar una sección de texto previamente eliminada.

<ins>…</ins>

Representa una sección de texto que se ha insertado en el documento.

<blockquote>…</blockquote>

Reservado para largos párrafos de citas, a menudo citados.

<q>…</q>

Estos se usan para citas más cortas.

<abbr>…</abbr>

Ayudan a denotar abreviaturas, mientras que también hacen disponible la forma completa.

<acronym>…</acronym>

Acrónimo de texto similar a la etiqueta de abreviatura anterior, pero esta vez con acrónimos. No es compatible con HTML5.

<adress>…</adress>

Una etiqueta útil que muestra la información de contacto del autor.

<dfn>…</dfn>

Definición Se usa para crear una definición en línea en el texto del cuerpo.

<code>…</code>

Texto del código Muestra fragmentos de código (como el que está más a la izquierda), que generalmente aparecen en modo monoespaciado.

<sub>…</sub>

Texto de subíndice Una forma útil de subíndice de texto (encogiéndolo y colocándolo en una línea media más baja que el texto anterior).

<sup>…</sup>

Texto superíndice Similar al subíndice anterior, sin embargo, esta vez lo coloca una línea media más alta que el texto anterior.

<small>…</small>

Texto de tamaño pequeño Históricamente utilizado para simplemente reducir el tamaño del texto, en HTML5 también se refiere a información que puede que ya no sea válida, precisa o relevante.

<bdo>…</bdo>

La etiqueta de anulación bidireccional identificará qué texto debe leerse al contrario del texto anterior.

Links (y formato) HTML

<a href=””>…</a>

texto de anclaje para hipervínculo.

<a href=”mailto:”>…</a>

Un enlace utilizado para extraer un mensaje saliente a direcciones de correo electrónico específicas.

<a href=”tel://###-###”>…</a>

Un enlace para hacer clic en los números de teléfono, especialmente útil para los usuarios de dispositivos móviles.

<a name=”name”>…</a>

Un ancla que es útil para acercar a los usuarios a elementos específicos del documento.

<a href=”#name”>…</a>

Un enlace de anclaje que acerca específicamente a los usuarios a un elemento div.

Imágenes (y formato) HTML

<img/>

Una etiqueta de imagen para incluir y mostrar archivos de imagen.

src=”url”

Exactamente como suena. La URL o archivo de la imagen para mostrar.

alt=”text”

Texto alternativo que ayuda a explicar el contenido de la imagen tanto a los motores de búsqueda como a los usuarios.

height=””

La capacidad de especificar la altura de la imagen en píxeles o porcentajes.

width=””

La capacidad de especificar la anchura de la imagen en píxeles o porcentajes.

align=””

La alineación de la imagen (relativa a los otros elementos de texto en la página).

border=””

Explica el grosor del borde (si lo hay).

vspace=””

Denota el espacio en la parte superior o inferior de la imagen.

hspace=””

Denota el espacio en la parte superior o inferior de la imagen.

<map>…</map>

Te ayuda a decirles a los usuarios que esta es una imagen interactiva con áreas seleccionables.

<map name=””>…</map>

Nombre del mapa asociado entre la imagen y el mapa.

<area/>

Especifica el área del mapa de imagen.

Listas (y formato) HTML

<ol>…</ol>

Crea listas numeradas (ordenadas) que muestran orden secuencial, preferencia o prioridad.

<ul>…</ul>

Muestra una lista con viñetas (sin ordenar) sin ningún énfasis adicional en el orden de importancia.

<li>…</li>

Especifica cada elemento de la lista a numerar.

<dl>…</dl>

Reservado específicamente para definiciones de elementos de lista.

<dt>…</dt>

La definición de un solo término en línea con el contenido corporal.

<dd>…</dd>

La descripción para el término definido.

 

Formularios (formato y atributos) HTML

<form>…</form>

El elemento de formulario crea un formulario, explicando cómo funcionará el formulario según sus atributos.

action=”url”

La URL de acción del formulario especifica dónde se deben enviar los datos cuando un visitante del sitio envía el formulario.

method=””

El atributo de método se refiere al método HTTP, que dicta cómo enviar los datos del formulario.

enctype=””

El atributo dicta cómo los datos del formulario se codificarán al enviar la información de vuelta al servidor web (para method = “post” solamente).

autocomplete

Indica si un formulario debe tener autocompletar activado o desactivado.

novalidate

Indica si el formulario no debe validarse cuando se envía.

accept-charsets

Identifica las codificaciones de caracteres en el envío del formulario.

target

Indica dónde mostrar la respuesta del formulario después de enviarlo, generalmente uno de los siguientes: _blank, _self, _parent, _top.

<fieldset>…</fieldset>

Identifica el grupo de todos los campos en el formulario.

<label>…</label>

Una etiqueta de campo simple, que le dice al usuario qué debe ingresar en cada campo.

<legend>…</legend>

La leyenda del formulario actúa como un título para el elemento fieldset.

<input/>

El atributo de entrada de formulario define el tipo de información de campo para recibir de un usuario.

Atributos de tipo de entrada HTML

type=””

Especifica el tipo de entrada de campo, que generalmente incluye texto, contraseña, fecha y hora, casilla de verificación, contraseña, etc.

name=””

Describe el nombre del formulario.

value=””

Describe el valor o la información del campo de entrada.

size=””

Especifica el ancho del elemento de entrada en caracteres.

maxlength=””

Identifica los números de caracteres del elemento de entrada máximos permitidos.

required

Otra etiqueta útil explícita, asegurándose de que el elemento <input> esté completamente lleno antes de que el usuario envíe el formulario.

step=””

Identifica los intervalos de números legales para un campo de entrada.

width=””

Especifica el ancho (en píxeles) de un elemento <input>.

height=””

Dicta la altura (nuevamente, en píxeles) de un elemento <input>.

placeholder=””

Proporciona una sugerencia útil para el usuario, que describe cuál debe ser el valor del elemento <input>.

pattern=””

Identifica una expresión regular con la que se compara el elemento <input>, asegurándose de que el usuario ingrese la información correcta.

min=””

El valor mínimo permitido para cada elemento <input>.

max=””

El valor máximo permitido para cada elemento <input>.

autofocus

Para asegurarse de que el elemento <input> entre en foco después de que se cargue la página.

disabled

Desactiva un elemento <input> en el formulario.

<textarea>…</textarea>

Especifica una entrada de texto grande para mensajes más largos.

<select>…</select>

Describe un cuadro desplegable para que los usuarios seleccionen un formulario con variedad de opciones.

Atributos de selección HTML 

name=””

El nombre para un cuadro de combinación desplegable.

size=””

Especifica la cantidad de opciones visibles disponibles en un menú desplegable.

multiple

Permite hacer múltiples selecciones a la vez.

required

Requiere que se seleccione ese valor antes de que un usuario pueda enviar un formulario.

autofocus

Especifica que una lista desplegable se enfoca automáticamente después de que se carga una página.

<optgroup>…</optgroup>

Especifica una entrada de texto grande para mensajes más largos.

<option>…</option>

Describe un cuadro desplegable para que el usuario seleccione uno de una variedad de opciones.

Atributos de opción HTML

value=””

Explique el valor de la opción disponible para la selección.

selected

Define la opción seleccionada por defecto para los usuarios.

<button>…</button>

Define el botón que se puede hacer clic para que los usuarios envíen opciones.

Tablas (y formato) HTML

<table>…</table>

La etiqueta de la tabla identifica y contiene todo el contenido relacionado con la tabla.

<caption>…</caption>

El título es una descripción de lo que es la tabla y lo que contiene.

<thead>…</thead>

Los encabezados de tabla describen el tipo de información contenida en cada columna debajo.

<tbody>…</tbody>

El cuerpo de la tabla contiene los datos o la información de la tabla.

<tfoot>…</tfoot>

Los pies de página de la tabla describen todo el contenido del pie de página.

<tr>…</tr>

Contiene la información que se incluirá en una sola fila de la tabla.

<th>…</th>

Contiene la información o los datos reales en un solo elemento de encabezado.

<td>…</td>

Contiene la información o datos reales en una sola celda de tabla.

<colgroup>…</colgroup>

Agrupa una (o varias) columnas para el formato.

<col/>

Define una sola columna de información dentro de una tabla.

Objetos e iFrames HTML

<object>…</object>

La etiqueta de objeto describe un tipo de archivo incrustado, que incluye audio, vídeo, PDF, páginas adicionales y más.

height=””

Describe la altura del objeto en píxeles.

width=””

Describe la anchura del objeto en píxeles.

type=””

Describe qué tipo de medio contiene la información.

usemap=””

Este es el nombre de un mapa de imagen del lado del cliente dentro de <objeto>.

<iframe>…</iframe>

Contiene un marco en línea que le permite incrustar información externa en un documento existente.

Atributos de iFrame HTML

name=””

El nombre del <iframe>.

src=””

El origen de la URL del documento original para incrustar dentro del <iframe>.

srcdoc=””

Contiene el contenido HTML real para mostrar dentro del <iframe> en la página actual.

width=””

Define la anchura de tu <iframe>.

<param/>

Agregar parámetros adicionales te ayuda a personalizar el contenido del iframe.

<embed>…</embed>

La etiqueta de inserción actúa como un contenedor para otra aplicación externa para el complemento adicional.

Atributos incrustados HTML

height=””

Define la altura del contenido incrustado que estás incluyendo.

width=””

Similar a la anterior, pero esta vez define la anchura del contenido incrustado.

src=””

La URL de origen del archivo externo que estás incrustando.

type=””

Describe el tipo de medio de contenido incrustado para incluir.

Nuevas etiquetas HTML5

<header>…</header>

Define el bloque de encabezado para un documento (o sección individual).

<footer>…</footer>

Identifica el bloque de pie de página para el documento (o una sección individual).

<main>…</main>

Describe el contenido principal de un documento.

<article>…</article>

Identifica un artículo dentro de un documento.

<aside>…</aside>

Especifica el contenido contenido en una barra lateral del documento.

<section>…</section>

Especifica un bloque de sección en el documento.

<details>…</details>

Describe hechos o información adicional que el usuario puede ver u ocultar.

<dialog>…</dialog>

Un bloque de diálogo o ventana.

<figcaption>…</figcaption>

El título del elemento <figure> que ayuda a describir la figura.

<figure>…</figure>

Un bloque de contenido independiente con diagramas, fotos, ilustraciones o más.

<mark>…</mark>

Muestra una parte del texto resaltado dentro del contenido de la página.

<nav>…</nav>

Enlaces de navegación para el usuario en un documento.

<menuitem>…</menuitem>

El elemento de menú específico que un usuario puede subir desde un menú emergente.

<meter>…</meter>

Describe la medida escalar dentro de una matriz conocida.

<progress>…</progress>

Muestra el progreso de una tarea, generalmente utilizada para la barra de progreso.

<rp>…</rp>

Muestra texto dentro de los navegadores que no son compatibles con las anotaciones ruby.

<rt>…</rt>

Muestra los detalles de los caracteres tipográficos de Asia oriental.

<ruby>…</ruby>

Describe una anotación de Ruby para la tipografía del este de Asia.

<summary>…</summary>

Contiene un encabezado visible para un elemento <details>.

<bdi>…</bdi>

Le ayuda a formatear parte del texto en una dirección diferente a la de otro texto.

<time>…</time>

Identifica la hora y la fecha.

<wbr>

Un salto de línea dentro del contenido.

 

 

Deja un comentario

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

*