Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home Webmaster Html

Web semantica con HTML5

11 febrero, 2016
en Html
0
Web semantica con HTML5
Share on FacebookShare on Twitter

HTML5 introduce  etiquetas semánticas, que no aportan ningún comportamiento visual adicional, pero que nos permiten por un lado definir de forma semántica el significado de su contenido, lo que será muy útil para el SEO (la optimización de contenidos para buscadores). A estas etiquetas  les podremos dar estilos  mediante CSS.

Las etiquetas más utilizadas son:

Resumen del Contenido

  • Estructura de cuerpo del documento:
  • Dentro del cuerpo:
  • Otros elementos:

Estructura de cuerpo del documento:

<header>: Grupo de elementos de introducción de un documento (como los h1, h2). No confundir con <head>, la cabecera HTML que contiene metainformación no visible.

<nav>: Enlaces de navegación. Lo utilizaremos para generar  menús de navegación horizontal, o lateral.

<section>: Define una sección en un documento. Por ejemplo, la sección central con el conjunto de artículos de un blog, podremos tener varias secciones dentro de una misma pagina.

<aside>: Contenidos poco relacionados con el resto del contenido de la página. Si no es visualizado, el contenido restante seguirá teniendo sentido. Por ejemplo, una barra lateral con anuncios, u otros contenidos.

<footer>: Pie de una página.

Dentro del cuerpo:

<article>: Contenido con identidad propia, que podría existir aportando información de manera independiente del resto del documento.

Otros elementos:

<cite>: Título de una publicación

<address>: Dirección física

<time>: Fecha y hora

Si quieres profundizar mas en este tema en esta pagina puedes ver todos los elementos que puedes utilizar en HTML5: Lista de Elementos HTML5

Siempre que queramos añadir un bloque con contenido a nuestra página, es útil comprobar si tiene un significado semántico de entre los incluidos en las etiquetas HTML5. En caso de no coincidir con ninguno, siempre podemos utilizar el bloque de contenido neutro <div> o el de texto de linea neutro < span >, que estilaremos igualmente por CSS.

Vamos a ver un ejemplo de estructura de página utilizando etiquetas semánticas HTML5

[codepen_embed height=»628″ theme_id=»22181″ slug_hash=»rxoOGJ» default_tab=»html» user=»tutorialmonsters»]See the Pen rxoOGJ by Alvaro (@tutorialmonsters) on CodePen.[/codepen_embed]

En este caso, tenemos la navegación como una lista de enlaces.

Una sección en la que podemos añadir tantos artículos como deseemos.

Finalmente, un pie en el que añadiremos la información que queramos de la página.

El resultado visualmente en el navegador es bastante feo, pero luego es cuestión de aplicarle los estilos con CSS para ponerlo a nuestro gusto

En este articulo, «Selectores y propiedades más usadas en CSS3» podréis ver como aplicar estilos con CSS a estas etiquetas HTML5 y a cualquier otro elemento que querais añadir a vuestra pagina.

Pero precisamente el propósito de las etiquetas semánticas es no proporcionar ningún tipo de estilo adicional, solo marcar el significado de cada una de estas secciones para poder ser entendidas mejor por sistemas automáticos, como los buscadores.

Etiquetas: etiquetasHTML5Web Semantica
ANUNCIO
Post anterior

Selectores y propiedades más usadas en CSS3

Próximo Post

Plantillas WordPress – Los themes mas populares de 2016

Otros Posts

Web semantica con HTML5

Enlace para llamar por teléfono HTML5

13 marzo, 2016
1

¿Sabes marcar un número de teléfono desde un enlace? Te decimos como hacerlo con una etiqueta HTML5

Manual HTML: Cómo crear y hacer tablas en HTML (con ejemplos prácticos)

Manual HTML: Cómo insertar espacios en blanco y saltos de línea

20 febrero, 2016
0

Continuamos con nuestro manual de HTML, en esta ocasión veremos los espacios en blanco y los saltos de línea. en su día ya vimos como dar formato básico a un texto con HTML, hoy terminaremos...

Recomendados

Corregir error al iniciar Xampp: Apache shutdown unexpectedly.

Xampp: Servidor web apache para Windows

9 abril, 2012
Manual HTML: Cómo crear y hacer tablas en HTML (con ejemplos prácticos)

Los Colores en HMTL

18 diciembre, 2010
Email

5 requisitos en un servicio de correo electrónico gratis y de calidad

16 septiembre, 2019
Adobe Photoshop Lightroom

Formatos de archivo válidos para trabajar con Lightroom

5 febrero, 2012

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .