Etiquetas html para el contenido incrustado

El contenido incrustado se utiliza para mostrar recursos externos como, por ejemplo, mapas, previsiones meteorológicas, fórmulas matemáticas, vídeos y audios, entre otros. Este método permite utilizar un servicio o interfaz de terceros

Elementos de ordenación

En el proceso de maquetación de una web es necesario organizar elementos tales como imágenes, textos o tablas. Tal y como vimos en el punto de la evolución de la web, en un primer momento los elementos de una página web se organizaban en tablas. En ese momento no había ni hojas de estilo CSS ni ninguna otra herramienta que nos permitiera poner varios elementos seguidos uno detrás del otro.

En la actualidad, gracias a las hojas de estilo podemos crear nuestros propios estilos para maquetar cualquier página web. Para ello, necesitaremos conocer cómo se ordenan los elementos en un documento web.

•Elementos en bloque o block

•Elementos en línea o inline

•Elementos flotantes o float
El comportamiento de los elementos se puede modificar haciendo que floten. Cuando a un elemento html se le aplica un estilo con la propiedad de flotar o float, el elemento sale del flujo normal y aparece posicionado a la izquierda o a la derecha de su contenedor, donde el resto de elementos de la página se posicionarán alrededor. Las propiedades de los elementos flotantes se verán a fondo en la siguiente unidad.

Marcadores en HTML. Enlaces locales para movernos fácilmente

Al crear una página web muy larga y con muchos apartados, es útil crear ciertos enlaces que nos permitan saltar directamente a la parte de la página que nos interesa. Este tipo de hipervínculos se llaman marcadores o enlaces locales.

Además, puede ser especialmente útil utilizar marcadores cuando al principio de una página colocamos una especie de índice y queremos que se pueda acceder a los distintos capítulos desde ahí mismo.

•Marcadores en una misma página
La estructura de los marcadores es básicamente la misma que al crear un hiperenlace a otra página. Lo primero que hay que hacer es definir con un nombre cada parte de la página a la que queremos enlazar mediante el atributo id.>Ejemplo:< a id="nombre_marcador">< /a>
Esta etiqueta puede contener en su interior un texto, una imagen o incluso podemos dejarla en blanco.
La etiqueta para crear un enlace a esa sección de la página es la siguiente:
< a href="#nombre_marcador">Ir al título

•Marcadores llamados desde otra página
También se puede hacer una llamada a marcadores desde otra página. Para ello, necesitamos saber el nombre de la página y el nombre del marcador o ancla. La sintaxis es la siguiente:
< a href="nombrepagina.html#nombremarcador">Marcador

Factores HTML clave para el SEO

SEO es un término que corresponde a las siglas en inglés Search Engine Optimization (optimización para buscadores). Mediante el posicionamiento web SEO conseguimos mejorar la visibilidad de un sitio web en los resultados orgánicos de los diferentes buscadores. Hay que tener en cuenta que los buscadores son las principales herramientas de consulta de información en Internet, por lo que si no aparece una web en ellos será muy difícil que los usuarios entren.

En Europa el buscador que más se utiliza es Google, aunque hay otros como Baidu, Bing, Yandex, Ecosia o DuckDuckGo. Cuando realizas una consulta en un buscador, aparecen los resultados orgánicos y los resultados patrocinados. El SEO se centra en los resultados orgánicos o naturales que son aquellos cuya posición está definida por el algoritmo del buscador. Para escalar posiciones en los resultados de búsqueda hay muchas tácticas que van desde la optimización de la página web hasta la generación de contenido, pasando por la obtención de links de forma natural y la relación con otras plataformas.

Observa entonces que la razón más importante para tener muy en cuenta el SEO en la estrategia de marketing digital de cualquier página web, es que ayuda a los motores de búsqueda a entender sobre qué trata cada una de las páginas y a mejorar los puestos en los resultados de los buscadores más utilizados.

Para comprenderlo mejor a continuacion unos Factores importantes:
**Título Atractivo: Usa un título claro y descriptivo (máx. 70 caracteres) con palabras clave al principio. Este es el primer gancho para los usuarios.
**Meta Descripción Impactante: Redacta una descripción sugerente (máx. 160 caracteres) que incluya palabras clave. Es tu oportunidad de atraer clics.
**Encabezados Efectivos: Incluye un único < h1> al principio y utiliza < h2>, < h3> para subsecciones. Mantén coherencia con tu título y descripción.
**Maquetación Moderna: Evita tablas. Utiliza HTML y CSS para un diseño limpio y fácil de interpretar por los motores de búsqueda.
**Minificación de Código: Reduce el tamaño de tus archivos HTML eliminando espacios y comentarios. Mejora la velocidad de carga.
**Balance de Enlaces: Mantén un equilibrio entre enlaces internos y externos. Demasiados salientes pueden afectar tu popularidad.
**Anchor Text Relevante: Usa texto de anclaje con palabras clave. Esto potencia tu posicionamiento.
**Valida tu HTML: Utiliza un validador para detectar errores y asegúrate de que tu código esté actualizado.
**Incluye un Favicon: Mejora la profesionalidad de tu sitio y facilita su identificación en múltiples pestañas.
**Crea un Mapa del Sitio: Facilita el acceso a todas las páginas, ayudando tanto a usuarios como a buscadores.
**Atributo Alt en Imágenes: Describe cada imagen con un texto alternativo que incluya palabras clave. Esto mejora la accesibilidad y el SEO.
**Accesibilidad Web: Asegúrate de que tu contenido sea accesible. Esto no solo mejora la experiencia del usuario, sino también tu posicionamiento.
**Herramientas de SEO: Utiliza herramientas como Semrush o Ahrefs para detectar áreas de mejora y mantener tu sitio optimizado.

~~Implementa estas estrategias y observa cómo tu visibilidad en línea mejora. ¡No subestimes el poder de un buen SEO!~~

Test de verificación HTML y herramientas útiles

Hay una gran cantidad de herramientas muy útiles para desarrolladores de forma online o que se instalan en los navegadores en forma de extensiones o plugins y que nos permiten funcionalidades extra. A continuación veremos algunas de ellas.

**Validador HTML, W3C El W3C nos ofrece varias herramientas e información muy valiosa para la elaboración de nuestros desarrollos. Entre las herramientas destacadas se encuentra el validador HTML (validator.w3.org) que nos permite encontrar errores en nuestros ficheros. Este validador HTML nos permite validar nuestras páginas seleccionando los ficheros HTML a validar o eligiendo directamente la url publicada. Además se pueden configurar parámetros como la codificación o el tipo de documento HTML a validar.
**HTMLHint, extensión para Visual Studio Code Las páginas web se pueden validar en Visual Studio Code mediante la extensión HTMLHint. Para ello, accede a la pestaña “Extensions” de Visual Studio Code e instala la extensión
**Firefox developer edition Se trata de un navegador creado específicamente para desarrolladores web que ofrece herramientas muy interesantes como por ejemplo: panel de tipografías, editor de formas, inspector, consola o depurador, entre otras. mozilla.org/es-ES/firefox/developer/.
**Web developer Consiste en una extensión disponible para Chrome, Firefox o IE que nos ofrece un control exhaustivo de varias partes de la web, tales como el CSS, los formularios o las imágenes. Con Web Developer instalado podemos, por ejemplo, alterar casi cualquier elemento final de la web en tiempo real y así aplicarlo a los archivos finales.
**Seositecheckup SEOSiteCheckup es una herramienta online que nos ayuda a analizar el SEO de un sitio web para conocer factores como las palabras clave, enlaces rotos, mapa de sitio, etiquetas alt en las imágenes, velocidad de carga, servidores y seguridad, usabilidad en dispositivos móviles, etc. Esta herramienta online ofrece funciones limitadas en su versión gratuita. seositecheckup.com
**CodePen CodePen es una comunidad online para probar y mostrar fragmentos de código HTML, CSS y JavaScript. Funciona como un editor de código online y un entorno de aprendizaje de código abierto, donde se puede crear y probar fragmentos de código, llamados «pens». Ver tutorial de CodePen.