Comment text here/p>
El marcado es una cosa hermosa, y ciertamente ha cambiado a lo largo de los años. Lo que efectivamente era HTML1, sin duda ha progresado a un lenguaje de marcado semántico sorprendente, a lo que podemos agradecer en gran medida al W3C. Y, ¿qué sabes, el siguiente paso para agradecerles ha tenido lugar? HTML5.
A diferencia de la versión anterior de HTML, donde el código era principalmente una estructura limitada que estaba determinada por la forma en que utilizaba los elementos de clase e ID, html5 realmente intenta proporcionar mucha más estructura.
Todo el diseño se puede crear con etiquetas semánticas y elementos que determinan cómo se debe estructurar y, posiblemente, más importante, que lo ayuden a estructurar cada página. Esto produce un código que es mucho más limpio y legible que en versiones anteriores de HTML, y realmente es algo bastante sorprendente. Las nuevas etiquetas realmente requieren que piense en cómo está estructurando su página, lo cual es una sinceridad, al final es algo grandioso para nosotros, los diseñadores y desarrolladores web.
Antes de comprender la estructura de HTML5 y cómo crear y codificar una plantilla de ejemplo para usar en sus proyectos, debe tener en cuenta cómo surgió. Sin embargo, tenga en cuenta que la versión actual de HTML5 no ha alcanzado una versión que el W3C podría llamar definitiva hasta el momento, pero es mucho lo que debe aprender y comenzar a utilizar en su código en este momento. Esto es lo que el W3C tiene que decir sobre este tema:
"Los implementadores deben ser conscientes de que esta especificación no es estable. Es probable que los implementadores que no participan en las discusiones encuentren que las especificaciones cambian de manera incompatible. Los proveedores interesados en implementar esta especificación antes de que eventualmente llegue a la etapa de Recomendación del Candidato deben unirse a las listas de correo antes mencionadas y participar en la discusiones "
Pero, no dejes que eso te asuste. Siempre hay personas por ahí constantemente asegurándose de que no se cambie por debajo de todos nosotros. Así que seguramente sabrá si un cambio tan drástico realmente sucede. Volviendo al tema, una de las principales preguntas que las personas tienen sobre HTML5 es "
En realidad vino de todos nosotros. En 2005 Google realizó una estudiar de más de 3 mil millones de sitios web y descubrió que las clases más comunes utilizadas en el marcado común eran en realidad lo que ves allí en esa página. El pie de página, el menú, el título, el texto pequeño, el contenido, el encabezado y el navegador se encuentran entre los primeros del cuadro de popularidad. Y, en esencia, así es como el W3C decidió qué usar para las nuevas etiquetas semánticas para HTML5. Ahora que lo sabemos, profundicemos en cuáles son esas etiquetas y los cambios fundamentales básicos en HTML5.
Un doctype no es particularmente un elemento del HTML, pero es una desaceleración, y uno que se ha vuelto más y más importante a medida que pasa el tiempo. Usar uno de forma adecuada puede ayudar a su navegador a comprender qué tipo de HTML está tratando de analizar, por lo que siempre queremos utilizar los tipos de documento apropiados. Honestamente, en este momento, puedes simplemente usar el tipo de documento HTML5 para todo, pero también cubriremos algunos pasados. Aquí es donde hemos llegado hasta la simplicidad:
Bastante bien ¿verdad? No es necesario que guardes un documento para copiar y pegar en un tipo de letra ridículamente largo, o incluso peor, trates de recordar los tipos de versiones ridículamente largos de versiones pasadas. Para HTML5, simplemente tiene que escribir . Ah, qué alivio.
Antes de abandonar esta sección, repasemos algunos de los otros elementos que se han simplificado. El elemento raíz se ha simplificado, a lo que, en lugar de tener que escribir algo como:
Solo podemos escribir:
Las cosas que necesitamos copiar y pegar son cada vez más pequeñas por minuto. Por ejemplo, también, en el elemento principal, nuestra codificación de caracteres pasó de cosas como:
a la versión más nueva en HTML5:
Y, por último, nuestros enlaces han eliminado su atributo de tipo. Entonces, por ejemplo, esto:
Se convierte en esto:
El elemento de sección es básicamente cualquier sección genérica de un documento HTML. Más típicamente, sin embargo, es una agrupación temática de contenido, que puede tener un encabezado pero no requiere uno.
Una regla general para usar el encabezado de sección es usarlo solo si se hace referencia explícita en el contorno del documento. Si, en el esquema, había una 'sección' a la que hizo referencia o siente que todo el contenido en un área es una 'sección' de algún tipo, entonces sí incluya la etiqueta de sección. Sin embargo, si desea utilizarlo principalmente para fines de diseño, simplemente no lo haga . En cambio, usa un
El elemento "nav" representa cualquier sección de una página que se vincula a otras partes de esa página u otras páginas dentro del sitemap. Cada vez que piense en enlaces de navegación, debería pensar en "etiqueta de navegación".
El elemento de navegación está especialmente diseñado para bloques de navegación más grandes. Cualquier elemento grande que enlace a otras secciones de la página del sitio u otras páginas del sitio. Sin embargo, tenga en cuenta que una sección de navegación no tiene que ser en forma de lista, aunque es bastante estándar. Puede ser en prosa, etiquetas de párrafo, o casi cualquier cosa, siempre y cuando sea apropiado originalmente para estar en esas etiquetas en primer lugar.
El elemento del artículo representa una composición independiente en un documento, página o cualquier sitio. Lo realmente importante a tener en cuenta con las etiquetas de artículos es que, por lo general, el contenido que se puede colocar de forma independiente o reutilizable es el que generalmente se coloca dentro de las etiquetas. Podría ser una publicación en el foro, una revista o un artículo de periódico, o una entrada de blog, incluso comentarios, siempre que se trate de cualquier elemento de contenido independiente.
Los artículos pueden contener "secciones" dentro de ellos, "encabezados" dentro de ellos, incluso "hgroup" dentro de ellos. Pero tenga en cuenta cuándo y cómo está utilizando este elemento, ya que no es tan utilizado como un
Pasemos a un ejemplo. Por ejemplo, supongamos que tienes una publicación de blog con algunos comentarios. Puedes hacerlo así en HTML5:
The Blog Entry Title
12/25/2045
Blog entry
...
Comments
Comment text here/p>
Another comment here
El elemento a un lado representa cualquier sección de una página que consta de contenido que está relacionado tangencialmente con el contenido alrededor del elemento a un lado. Lo más importante que debe recordar con esta etiqueta es que, aunque está relacionado de manera tangencial con el contenido que rodea a la etiqueta a un lado, típicamente es información o contenido que está separado en la característica. Lo más a menudo lo usará en las barras laterales, ya que la mayoría de las barras laterales son perfectas para estar completamente envueltas en etiquetas de lado. Otros usos pueden incluir citas de extracción, fragmentos de publicidad, grupos de enlaces de navegación, o incluso direcciones cerca de la dirección de una ubicación en cuestión.
Sin embargo, para entrar en más detalles, es para cualquier momento que sientas la necesidad de apartarte, literalmente, y explicar, referenciar, mencionar, indicar o cuestionar algo. Incluso puede usar un elemento aparte para una sección más grande de un sitio, como una barra lateral para Twitter o Facebook, o enlaces aleatorios. Podrías hacer que sea un lado, luego usar un encabezado y una sección de navegación dentro de él, incluso para ayudar a entender qué está pasando allí. Puede usarlo en la sección de pie de página de las publicaciones de blog para hacer referencia a cosas sobre ellos, o prácticamente en cualquier lugar donde se pueda implementar perfectamente.
El elemento hgroup representa el encabezado de una sección. Este elemento se usa mejor para agrupar un conjunto de elementos h1-h6 cuando el encabezado tiene múltiples niveles o subtítulos, como exactamente el artículo que está leyendo. Esto sería perfecto para un hgroup. También puede usarlo para títulos alternativos o líneas de identificación.
El W3C nos recuerda:
"A los efectos de los resúmenes de documentos, esquemas y similares, el texto de los elementos de hgroup se define como el texto del elemento h1-h6 con el más alto rango descendiente del elemento hgroup, si existen tales elementos, y el primero de ellos elemento si hay múltiples elementos con ese rango. Si no hay tales elementos, entonces el texto del elemento hgroup es la cadena vacía.
Otros usos, por ejemplo, incluyen áreas de un blog donde está enumerando el encabezado y el subtítulo de su publicación de blog. También puede usarlo para títulos y descripciones de libros, para enumerar médicos en su área y sus áreas de experiencia, o incluso usarlo para ayudar a replicar la funcionalidad de una tabla. Echemos un vistazo a ese ejemplo ahora. En una mesa tendríamos:
Doctor Name:
Randy McDocterson
Doctor Specialty
Slapping People
Entonces, puede ver claramente, en el marcado, que tenemos un médico llamado Randy McDoctoerson cuya especialidad es abofetear a las personas. Ahora, eso es un poco extraño, pero oye - entiende el asunto.
La etiqueta de encabezado representa cualquier grupo de ayudas de iniciación o de navegación dentro de un sitio o secciones de un sitio. Entonces, ahora que se ha establecido la definición formal, analicémosla un poco. Todos sabemos lo que es un encabezado, pero para ser específicos, incluye varias cosas en la parte superior del sitio. Estas áreas de encabezado generalmente incluyen secciones de marca, elementos de llamada a la acción y quizás algo de navegación. Realmente se puede usar en cualquier lugar que solías escribir:
A tener en cuenta: se puede usar en el área inicial de cualquier sección, ya que no tiene que estar en la parte superior o al principio de su documento HTML. Pero, allí es donde más típicamente se implementa.
El elemento de pie de página representa un pie de página para la sección principal anidada más cercana y, por lo general, contiene información sobre la sección de sus padres. La etiqueta de pie de página es muy similar a la etiqueta de encabezado, pero para la sección opuesta de una página. Muchas veces verá un pie de página de una página que contiene enlaces que estaban en la navegación, y tal vez un logotipo, u otras cosas similares; bueno, todos estos pueden ahora alojarse en una
Lorem
Ipsum
Algún texto aquí.
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5 The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
HTML5 Template
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
HTML5 Template
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
HTML5 Template The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
HTML5 Template Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
The “address” tag The address element represents the contact information for its nearest article or body element. I think the example best describes this tag so let's dive right in. ../People/Raggett/">Dave Raggett , Arnaud Le Hors ,contact persons for the W3C HTML Activity I think that very aptly describes the address tag, but the W3C would also like to note that typically the address element would be included along with other information in a footer element. So, this would work specifically for the email or about.me link at bottoms of websites (near the copyright information particularly). You can house that in an address element like so: mailto: [email protected] ">John Smith . © copyright 2038 Example Corp. And that just about wraps up all the important elements and new tags for HTML5. Keep in mind though, that wasn't ALL the tags available, but it was some of the more important ones and particularly the ones we will be working with today. HTML5 Template So now that we have learned about HTML5, let's get into coding our own template. Let's start with an average document. Now let's add the stylesheet link, just for good practice, even though we may not use it. Now I think it'd be a good time to start setting up our body element with some structure for us to use on other projects. So with that in mind let's do: Now, as you can see, we have a bit of a place for our content to go. We have a few designated sections. We have a designated header, footer, and section element within the document – but now let's add a navigation element as well. style.css"> HTML5 Template Pretty standard template Home About HTML5
Y ahí vamos, hemos agregado un poco de navegación con una buena lista desordenada allí en la sección de encabezado. Pero, espera un minuto. ¿Qué pasa si tienes un gran pie de página y quieres esos mismos elementos de navegador en el pie de página también? Bueno, vamos a agregarlo allí también. Excepto, esta vez no vamos a usar el
HTML5 Template Acerca de HTML5Ahora agreguemos algunos bits para IE y otros tecnicismos similares.
HTML5 Template Plantilla HTML5
Plantilla bastante estándar
Y ahí lo tenemos: ¡una plantilla HTML5 básica pero completa!
¿Cuáles son tus nuevas técnicas favoritas de CSS3? ¿O técnicas de CSS poco usadas / poco conocidas? Háganos saber en los comentarios!