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.
| Tag | Descriçã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!