Semántica en HTML5

Clase 6 de 67 • Curso de HTML5 y CSS3 2015

Dayan Betancourt

student•

Las etiquetas semánticas de HTML5 son header (encabezado), nav (barra de navegacion o menú), section (sección de contenido), article (artículos o contenidos que van dentro de una sección o section), footer (pie de página), sidebar (barra lateral), entre otras. La importancia de las etiquetas semánticas es que le dan información al navegador y a los buscadores (importante para un buen SEO) sobre cual es la estructura de nuestra web, de que se trata, cuáles elementos son más importantes que otros y así poder presentarla adecuadamente al usuario. Además de que mientras mejor sea la estructura y la semántica el resto del equipo de desarrollo comprenderá mejor el código y será más fácil de mantener.

Jose Rodríguez

student•

Claro! esas etiquetas son para un mejor SEO.

Erick Orlando Velasco Martínez

student•

Mejor resumido imposible!

Jersson Sajonero Utria

student•

Saludos,
archivos de imagen .svg o Gráficos Vectoriales Redimensionables en ingles (Scalable Vector Graphics), son escalables, pesan poco y permiten una definición mayor a tamaños reducidos.

Gabriel Martinez

student•

no te pongas nerviosa; relajate, solo te ven millones de peolpe

Edgardo T

student•

@marulango En que casos deberíamos dar preferencia a usar un section que un div.

Beatriz RF

student•

La etiqueta div es la herramienta para unir elementos cuando no podemos asociarles un significado semántico. Al usar la etiqueta section lo que estamos haciendo es declarar que todo su contenido está relacionado y forma parte de un mismo significado o elemento. Al parecer la introduccion de las etiquetas section, article, header, aside y footer depura el uso de div's que, usando atributos id o class representaban secciones del sitio (div id="header" / div id="footer")

Jason David Cubides Fajardo

student•

¿Donde veo los archivos que comparten?

omar garcia garcia

student•

https://platzi.com/clases/html5-css3-2015/concepto/materiales/descarga-el-codigo-del-proyecto/materi... aqui

Ronald Salazar Bilbao

student•

nivel 0

Juan Camilo Marin

student•

<!DOCTYPE html> = "Navegador, voy a trabajar en html5."

Luis Manuel Sanchez Torres

student•

hola quiero agregar los archivos con unas correcciones que le agregue para que la frase no se encime con los botones y para que la imagen abarque el 100% del alto utilice la propiedad height:100vh;

Luis Manuel Sanchez Torres

student•

otra cosa, para los que hayan intentado abrir este proyecto en internet explorer o edge verán que no les cargara el css, solo agreguen la siguiente linea en el <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Ricardo Garrido Cruz

student•

Estructuro todo muy bien :D

Carlos Lizarazo

student•

Trabajar con el footer es algo nuevo para mi, ¿el footer se instancia siempre despues del header y antes del body?

Cesar Mattar

student•

Hola Carlos, si es parte se la estructura básica de un html. Esta dentro del body. Antes de cerrarlo </body>

Darwin Benitez

student•

no puedo descargar la imagen de logo.svg. alguien que pase el link

Jersson Sajonero Utria

student•

Saludos, al descargar el archivo platziFrontend.zip y después de descomprimir, encontrarás una carpeta llamada assets la cual posee la imagen que andas buscando.

Alex Henrry Naupay Ferrer

student•

https://static.platzi.com/media/public/uploads/5626daa0277041a3a77fcdc0.svg

Yeraldin Acevedo Acevedo

student•

Muy claro todo !

Flavio Canizales

student•

Tengo un problema que no me deja continuar. Al momento de agregar la etiqueta imagen en html, y querer verla en mi navegador (safari), este solo me aparece un cuadrito azul con un signo de interrogación blanco en medio. ¿Qué sucede? ¿cómo puedo solucionar el problema para ver la imagen?

Leandro Lucero

student•

debes verificar la ruta de donde está tu imagen. Si tu imagen está en el mismo directorio que el html simplemente indicas <img src="imagen.jpg">, pero si tu imagen esta fuera del directorio de tu html <img src="../directorio/imagen.jpg"> los dos puntos indican que subes un nivel afuera del directorio actual, para salirte dos niveles src="../../directorio/imagen.jpg". También puedes indicar la ruta absoluta a tu imagen desde la url de tu proyecto: <img src="http://midominio.com/imagenes/imagen.jpg">

Luis León

student•

En teoría se pueden usar cualquier tipo de etiquetas cuantas veces se desee. Pero lo primordial es hacer un código mejor estructurado y más entendible para el navegador, por lo cual las etiquetas principales dentro de <body> (como header, h1, nav, footer, etc.) no deben repetirse. De esta manera logramos un código más optimizado para una futura campaña de posicionamiento SEO.

Lidia Ramírez Navarro Ramirez

student•

Leí que <nav> no forma parte del header, algún comentario?

Felipe Santana

student•

Nav, es interpretado como la barra de navegacion del sitio web, no hay problema si lo pones en el header o en el body, tal vez hace parte de las buenas practicas de la profesora :D

Luis León

student•

Lee el primer comentario :)

Martin Cairo

student•

No es posible descargar el archivo platziFrontend.zip

javier alarcon

student•

a veces se pone lento, no hay un link del video para descargar?

Luigi Pizarro Caceda

student•

Los videos de Platzi no se pueden descargar, es todo online. Solo tener paciencia o mejorar la conexión de internet ;)

Hernán Javier Fontánez

student•

Que programa se recomienda para hacer una imagen para una propuesta de diseño?

Luis Vicente Flores Gutierrez

student•

Dicen que para diseño lo mejor es con lo que te sientas más cómodo o conozcas más, sin embargo yo tome el curso de illustrator aquí mismo y seria la herramienta que te recomendaría (solo porque es la que conozco).

Luis León

student•

Si es una imagen como un logotipo, sin duda alguna la herramienta más indicada es Ilustrator.
Pero si lo que deseas es una imagen fotográfica, el programa ideal es Photoshop.
Ten en cuenta que existen muchas herramientas diferentes de las de Adobe, pero aun no son mejores que las que estas.

Luigi Pizarro Caceda

student•

Otro punto importante a resaltar en terminos de HTML semántico y optimizado para SEO es que en un mismo documento html no debe existir más de un <h1> y este siempre debe ser un título que describa bien la página que estamos viendo.

Por ejemplo en el artículo de un blog sería el título del artículo que estamos viendo en ese momento y no el nombre del sitio, ni de la sección.

Semántica en HTML5

Bienvenidos

Materiales

Descarga el código del proyecto

Introducción a HTML5 y CSS3

Preguntas antes de la clase

Diferencias entre Backend y Front-end

¿Qué es un Frontend?

¿Qué es HTML y CSS?