Comment text here/p>
O markup é uma coisa linda e certamente mudou ao longo dos anos. O que foi efetivamente o HTML1, certamente progrediu para uma incrível linguagem de marcação semântica, à qual podemos agradecer em grande parte ao W3C. E, o que você sabe, a próxima coisa a agradecer-lhes surgiu - HTML5.
Ao contrário da versão anterior do HTML, em que o código era basicamente uma estrutura limitada que era determinada pela forma como você utilizava os elementos class e ID, o html5 realmente tenta fornecer muito mais estrutura.
Todo o layout pode ser criado com tags e elementos semânticos que determinam como você deve estruturar e, sem dúvida, mais importante, que ajudam a estruturar cada página. Isso produz código que é muito mais limpo e legível do que nas versões anteriores do HTML, e realmente é algo bastante surpreendente. As novas tags realmente exigem que você pense em como você está estruturando sua página, o que, para ser sincero, no final é uma grande coisa para nós, designers da Web e desenvolvedores.
Antes de entender a estrutura do HTML5 e como criar e codificar um modelo de exemplo a ser usado em seus projetos, você deve estar ciente de como ele surgiu. No entanto, esteja ciente de que a versão atual do HTML5 não atingiu uma versão que o W3C possa chamar de final ainda, mas é muito para aprender e começar a usar em seu código agora. Aqui está o que o W3C tem a dizer sobre este assunto:
“Os implementadores devem estar cientes de que esta especificação não é estável. Os implementadores que não estão participando das discussões provavelmente encontrarão a especificação mudando de debaixo deles de maneira incompatível. Os fornecedores interessados em implementar esta especificação antes de chegar ao estágio de Recomendação do Candidato devem se juntar às listas de discussão mencionadas acima e participar do discussões .
Mas não deixe isso te assustar. Há sempre pessoas lá fora, constantemente, certificando-se de que não é alterado por debaixo de todos nós. Então você certamente estará ciente de que uma mudança tão drástica realmente acontecerá. De volta ao tópico, uma das principais questões que as pessoas têm sobre o HTML5 é "
Na verdade, veio de todos nós. Em 2005, o Google realizou uma estude de mais de 3 bilhões de sites e descobriu que as classes mais comuns usadas na marcação comum eram, na verdade, o que você vê nessa página. Rodapé, menu, título, pequeno, texto, conteúdo, cabeçalho e navegação estão todos entre os principais do gráfico de popularidade. E essencialmente é assim que o W3C decidiu o que usar para as novas tags semânticas para HTML5. Agora que sabemos disso, vamos ver quais são essas tags e as alterações fundamentais básicas em HTML5.
Um doctype não é particularmente um elemento do HTML, mas é uma desaceleração, e uma que se tornou cada vez mais importante com o passar do tempo. Usar um apropriadamente pode ajudar seu navegador a entender que tipo de HTML está tentando analisar, portanto sempre queremos usar os tipos de documentos apropriados. Com toda a honestidade, neste momento atual, você pode usar o doctype HTML5 para tudo - mas vamos cobrir alguns dos anteriores também. Aqui é onde chegamos até a simplicidade:
Muito bom né? Você não precisa manter um documento para copiar e colar em algum tipo de documento ridiculamente longo, ou, pior ainda, tentar lembrar os doctypes ridiculamente longos das versões anteriores. Para HTML5 você simplesmente precisa digitar . Ah, que alívio.
Antes de deixar esta seção, vamos passar por alguns dos outros elementos que ficaram mais simples. O elemento raiz foi simplificado, ao invés de ter que escrever algo como:
Nós podemos apenas escrever:
As coisas que precisamos copiar e colar ficam cada vez menores a cada minuto. Por exemplo, também, no elemento head, nossa codificação de caracteres foi de coisas como:
para a versão mais recente em HTML5:
E, finalmente, nossos links baixaram seu atributo type. Então, por exemplo, isso:
Torna-se isso:
O elemento section é basicamente qualquer seção genérica de um documento HTML. Mais tipicamente, é um agrupamento temático de conteúdo - que pode ter um cabeçalho mas não requer um.
Uma regra geral para usar o cabeçalho de seção é usá-lo somente se ele fosse explicitamente referenciado no esboço do documento. Se, no esboço, houve uma 'seção' que você referenciou ou sente que todo o conteúdo de uma área é uma 'seção' de tipos - então, de fato, inclua a tag de seção. Se você quiser usá-lo principalmente para fins de estilo, não basta . Em vez disso, use um
O elemento "nav" representa qualquer seção de uma página que esteja vinculada a outras partes dessa página ou a outras páginas do sitemap. Sempre que você pensar em links de navegação, você deve pensar em “nav tag”.
O elemento nav é particularmente destinado a blocos de navegação maiores. Qualquer elemento grande vinculado a outras seções da página do site ou outras páginas do site. Tenha em mente, porém, uma seção de navegação não tem que ser na forma de uma lista, embora seja bastante normal. Pode ser em prosa, tags de parágrafo ou praticamente qualquer coisa - desde que originalmente fosse adequado para estar em tais tags em primeiro lugar.
O elemento article representa uma composição independente em um documento, página ou qualquer site. O mais importante é ter em mente que as tags de artigo são, normalmente, distribuíveis independentemente ou conteúdo reutilizável, o que geralmente é colocado dentro das tags. Pode ser um post de fórum, uma revista ou artigo de jornal, ou uma entrada de blog, até mesmo comentários - desde que seja qualquer item independente de conteúdo.
Os artigos podem conter “seções” dentro deles, “cabeçalhos” dentro deles, até mesmo “hgroups” dentro deles. Mas tenha em mente quando e como você está usando este elemento, pois ele não é tão comumente usado
Vamos pular em um exemplo. Por exemplo, digamos que você tenha uma postagem no blog com alguns comentários. Você pode fazer isso assim no HTML5:
The Blog Entry Title
12/25/2045
Blog entry
...
Comments
Comment text here/p>
Another comment here
O elemento aside representa qualquer seção de uma página que consiste em conteúdo tangencialmente relacionado ao conteúdo em torno do elemento aside. A coisa mais importante a ser lembrada com essa tag é que, embora seja conteúdo tangencialmente relacionado ao conteúdo em torno da tag de lado, geralmente é uma informação ou um conteúdo separado em uma característica. Na maioria das vezes, você o usará nas barras laterais, já que a maioria das barras laterais são perfeitas para serem totalmente inseridas em tags de lado. Outros usos podem incluir cotações de compra, partes de publicidade, grupos de links de navegação ou até endereços próximos ao endereço de um local em questão.
Para entrar em mais detalhes, é para qualquer momento que você sentir a necessidade de literalmente deixar de lado e explicar, referenciar, mencionar, declarar ou questionar alguma coisa. Você pode até mesmo usar um elemento de lado para uma seção maior de um site, como uma barra lateral para o Twitter, ou o Facebook, ou links aleatórios. Você poderia ter um aparte, então use um cabeçalho e uma seção de navegação dentro dele para ajudar a entender o que está acontecendo lá. Você pode usá-lo na seção de rodapé das postagens do blog para fazer referência a coisas sobre eles, ou praticamente em qualquer lugar que possa ser perfeitamente implementado.
O elemento hgroup representa o título de uma seção. Esse elemento é melhor usado para agrupar um conjunto de elementos h1-h6 quando o título tiver vários níveis ou subcabeçalhos - como exatamente o artigo que você está lendo. Isso seria perfeito para um hgroup. Você também pode usá-lo para títulos alternativos ou linhas de tag.
O W3C nos lembra:
“Para fins de resumos de documentos, esboços e afins, o texto de elementos de hgroup é definido como sendo o texto do elemento de maior hierarquia h1 – h6 descendente do elemento hgroup, se houver algum desses elementos, e o primeiro desses elemento se houver vários elementos com essa classificação. Se não houver tais elementos, o texto do elemento hgroup será a string vazia.
Outros usos, por exemplo, incluem áreas de um blog em que você está listando o cabeçalho e a legenda da postagem do blog. Você também pode usá-lo para títulos e descrições de livros, para listar médicos em sua área e suas áreas de especialização, ou até mesmo usá-lo para ajudar a replicar a funcionalidade de uma tabela. Vamos dar uma olhada em um exemplo agora. Em uma mesa nós teríamos:
Doctor Name:
Randy McDocterson
Doctor Specialty
Slapping People
Então, você pode ver claramente, na marcação, que temos um médico chamado Randy McDoctoerson, que é especialista em dar tapas nas pessoas. Agora, isso é um pouco estranho, mas ei - isso mostra o ponto.
A tag de cabeçalho representa qualquer grupo de auxílios introdutórios ou de navegação dentro de um site ou seções de um site. Então, agora que a definição formal foi declarada, vamos dividi-la um pouco. Nós todos sabemos o que é um cabeçalho, mas para ser específico, inclui várias coisas no topo da maioria dos sites. Essas áreas de cabeçalho geralmente incluem seções de branding, itens de call to action e talvez alguma navegação. Realmente pode ser usado em qualquer lugar que você usou para escrever:
Nota: Ele pode ser usado na área inicial de qualquer seção, já que não precisa estar no topo ou no início do documento HTML. Mas é aí que é mais tipicamente implementado.
O elemento footer representa um rodapé para a seção pai aninhada mais próxima e geralmente contém informações sobre a seção pais. A tag de rodapé é muito semelhante à tag de cabeçalho, mas para a seção oposta de uma página. Muitas vezes você verá um rodapé de uma página que contém links que estavam na navegação, e talvez um logotipo, ou outras coisas semelhantes - bem, tudo isso agora pode ser guardado em um
Lorem
Ipsum
Algum texto aqui.
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
E lá vamos nós, nós adicionamos alguma navegação com uma boa lista não ordenada lá na seção de cabeçalho. Mas espere um minuto. E se você tiver um ótimo rodapé e quiser também os mesmos elementos de navegação no rodapé? Bem, vamos adicionar lá também. Exceto que, desta vez, não vamos usar o
HTML5 Template Sobre o HTML5Agora vamos adicionar alguns bits para o IE e outros detalhes técnicos.
HTML5 Template Modelo HTML5
Modelo bastante padrão
E lá temos: um modelo HTML5 básico mas completo!
Quais são as suas novas técnicas CSS3 favoritas? Ou técnicas de CSS pouco usadas / pouco conhecidas? Deixe-nos saber nos comentários!