Novas tags do HTML5 – Parte 2

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.

A linguagem de marcação HTML

Neste artigo gostaria de falar um pouco sobre 

Podemos dizer que o desenvolvimento web pode ser realizado com qualquer editor de texto simples, como o próprio bloco de notas do Windows, pois a linguagem de marcação HTML é um formada por tags, onde cada um tem sua função específica e não há necessidade de realizar o processo de “compilação”, como acontece em linguagens de programação como .NET, JAVA, Visual Basic, Pascal, etc. 

O HTML é uma linguagem que é interpretada pelo navegador web, como o Chrome, o Firefox ou o mais odiado deles, o Internet Explorer. A partir da sua versão 5, o HTML melhorou tags antigas e incluiu algumas novas tags e começou propor uma forma diferente de trabalho, focando mais na semântica, focando mais na marcação do texto do que na determinação de formatação.

Neste sentido, após a marcação das nossas páginas, devemos priorizar o uso do CSS para definição do layout dos componentes e textos do nosso site ou sistema.

Existem no bibliotecas gratuitas que facilitam a estilização de um site, sendo o mais conhecido o framework criado pelo twitter, o Bootstrap. Com ele teremos à nossa mão, vários componentes e estilos para facilitar o desenvolvimento de sistemas web e também de web sites. Futuramente irei escrever um artigo mostrando algumas das suas funcionalidades.

Outro framework que tem crescido bastante é o bulma, que tem como proposta melhorar e facilitar a estilização de site, concorrente com o Bootstrap. Na data que escrevo este artigo, ele está na versão 0.7 e possui, assim como o Bootstrap, vários componentes e estilos pré-definidos e de fácil utilização.

Voltando ao assunto inicial, gostaria apresentar pra vocês as novas tags criadas para melhorar a semântica de marcação de páginas HTML5.

TagDescrição
<article>Define um artigo dentro do documento.
<aside>Define um conteúdo lateral para o conteúdo da página.
<bdi>Isola uma parte do texto que pode ser formatado em uma direção diferente de outro texto fora dele.
<details>Define detalhes adicionais que o usuário pode ou não visualizar.
<dialog>Define uma caixa de diálogo ou janela.
<figcaption>Define um texto para o elemento <figure>
<figure>Define um contexto de imagem dentro do documento.
<footer>Define o rodapé do documento ou da sessão.
<header>Define o cabeçalho do documento ou da sessão.
<main>Define o conteúdo principal do documento.
<mark>Define um texto marcado.
<meter>Define uma medida escalar dentro de um intervalo conhecido (um medidor).
<nav>Define a navegação de links do site.
<progress>Representa o progresso de uma tarefa.
<rp>Define o que mostrar em navegadores que não suportam anotações em ruby.
<rt>Define uma explicação / pronúncia de caracteres (para tipografia do leste asiático)
<ruby>Define uma anotação rubi (para tipografia do leste asiático).
<section>Define uma sessão no documento.
<summary>Define um título visível para um elemento <details>
<time>Define uma data/hora.
<wbr>Defines a possible line-break

Fonte: https://www.w3schools.com/html/html5_new_elements.asp

Apesar de terem introduzido novas tags, é importante salientar que, como foi digo antes, no HTML5 devemos priorizar apenas a semântica da marcação de documentos, portanto, nenhuma das novas tags possuem qualquer tipo de formatação, sendo esta parte feita através do CSS.

No próximo artigo da série, vamos falar um pouco mais sobre estas novas tags e criar um pequeno site ilustrando algumas destas novas tags.

Um forte abraço e até breve!