Continuando o post anterior, fiz a marcação da página utilizando algumas das novas tags do HTML5.
Como pode observar, a marcação continua sendo feita normalmente como na versão anterior, porém, as tags novas agora tem uma missão bem semântica, pois há uma indicação via tags de cada parte do site. Utilizei exatamente as mesmas tags do esboço feito post anterior, incluindo além disso um pouco de texto para o menu superior e links do menu lateral, bem como textos de exemplo para posts da página.
Observe a seguir o resultado final da marcação da nossa página:
Observe na imagem a seguir, eu destaquei a tag <meta name=”viewport”>, que deve ser incluída no nosso site para que possamos trabalhar com corretamente design responsivo. Nela definimos que a largura da página será a largura do dispositivo e a escala inicial será de 1 para 1, conforme podemos ler no atributo “content”:
Continuando a página, dentro da tag <body>, eu comecei fazendo a marcação do cabeçalho da página, através da tag <header>. Dentro dela foi incluída uma tag <nav> para identificar um menu de navegação do nosso site.
Eu costumo marcar uma página sempre de cima para baixo, da esquerda para a direita. Por isso, logo abaixo da tag <header> eu começo criando a o menu lateral utilizando a tag <aside>. Dentro dela, eu incluí uma lista que irá representar um menu lateral, onde podemos colocar links para outros artigos ou outras páginas de temas ou categorias do site.
Em seguida, temos a tag <main>, onde eu coloco o conteúdo principal do site e dentro dela eu exemplifiquei colocando vários formatos da tag <section>. Podemos observar que é possível utilizá-la com ou sem as tags <header> e <footer>, ou seja, estas tags podem definir tanto o cabeçalho/rodapé da página, como o cabeçalho/rodapé de um post no site.
Ao final eu encerro a marcação com a tag <footer>, onde defino o rodapé da minha página.
A seguir podemos observar o resultado final da marcação realizada:
Podemos visualizar que a nossa página HTML ainda não possui o formato que definimos no esboço, apesar de ter sido codificada para tal. Isso acontece pois, como já foi dito antes, as novas tags são apenas semânticas, ou seja, servem apenas para facilitar os motores de busca na hora de pesquisar palavras chaves no seu site, identificar quais a sessões e quais os links navegáveis dentro dele.
A parte visual do nosso site só foi modificada em algumas tags, como a tag <ul>, utilizada para a criação de listas de links do nosso menu superior e menu lateral. Ela alterou o visual incluindo um marcador no texto (bullet), definindo em forma de lista de tópicos. Ainda nesta lista, utilizei a tag <a> que serve para incluir links em nosso site. Esta tag altera a formatação do texto incluindo um sublinhado abaixo dos links.
Outras tags que alteram o visual do site são <h1> e <h2>, que servem para definir títulos (ou cabeçalhos) e subtítulos. Além deles, temos ainda <h3>, <h4>, <h5> e <h6>, onde o <h1> é com a maior fonte e <h6> a menor fonte.
Bom, podemos concluir que neste caso específico o HTML 5 não trouxe nenhuma novidade visual, porém, trouxe algumas melhorias no que diz respeito à formulários, pois foram introduzidos alguns tipos de componentes diferentes e muito fáceis de utilizar, como o campo de data, o campo de cor, o campo de texto com lista suspensa, entre outros. Foram incluídos ainda as tags <audio> e <video>, que facilitaram bastante a inclusão de músicas e vídeos em nossos websites.
Para deixar nosso site parecido com o esboço, vamos utilizar o CSS (Cascading Style Sheets, ou folha de estilo em cascatas). A partir de algumas mudanças no HTML 5, tornou-se uma boa prática utilizar apenas o CSS para definir o layout do site, ou seja, não é recomendado utilizar atributos de tags para formatar texto ou definir os tamanhos de componentes na tela. Deste modo, o HTML do seu site fica mais limpo e mais fácil de ser interpretado pelos motores de sites de busca. Além disso, facilita na separação de contextos, onde sua página HTML é a casca responsável por mostrar o conteúdo “cru” do seu site e a folha de estilo (CSS), responsável por formatar este conteúdo para melhor apresentá-lo ao usuário.
Para entender melhor e ter acesso à um curso completo de Front-End (HTML, CSS e JavaScript), bem como aulas de web-design e design responsivo e muito mais, eu indico pra vocês o curso Desenvolvedor FullStack do meu amigo Guilherme Grillo, por ser o curso mais completo do mercado de software do brasil.
Aproveite agora que ele está com um preço muito atraente para novos alunos e além disso ele dá uma garantia de incríveis 30 dias. Caso não goste do curso ou não encontre o que estava procurando, você poderá pedir seu dinheiro de volta, que será prontamente atendido sem nenhum questionamento.
Clique aqui e garanta já o sua inscrição neste excelente curso.
