Pequeno projeto de Desenvolvimento Web I focado no desenvolvimento de uma página html semântico completo com uso de CSS.
Semântica é um ramo da linguística que envolve o significado das coisas. HTML semântico envolve a utilização de tags que tenham sentido para pessoas e máquinas. Essas tags indicam exatamente o tipo de conteúdo que há dentro delas. Algumas tags semânticas são: header, aside, main, e section.
As vantagens e benefícios da utilização do HTML semântico estão relacionados com a acessibilidade. Utilizar tags semânticas permite que leitores de tela entendam o que cada conteúdo representa na página web com mais facilidade, melhorando a experiência do usuário.
Utilizar tags semânticas também facilita o entendimento das linhas de código para programadores pois evita a criação de tags div com nomes genéricos.
Alguns exemplos de usabilidade do HTML são:
- A tag !DOCTYPE html indica que o documento está sendo escrito de acordo com a especificação HTML5.
- A tag footer indica que há um rodapé no documento HTML5.
- A tag nav indica que há um menu de navegação no documento HTML.
tags: Responsáveis por definir o layout de uma página web. Compostas por um seletor, que indica qual elemento do código HTML será estilizado, e propriedades, que indicam a forma que o estilo será aplicado.
id: Usado para identificar apenas um elemento no documento HTML. Não deve ter mais de um elemento com o mesmo id no HTML. No CSS, ele é representado por cerquilha(#).
class: Usado para identificar um ou mais elementos no documento HTML. Esse atributo é usado quando há elementos com características parecidas no HTML. No CSS, ele é representado por ponto(.).
- https://www.htmldog.com/guides/css/intermediate/classid/#:~:text=In%20the%20CSS%2C%20a%20class,character%20(%E2%80%9C%23%E2%80%9D).&text=New%20Examples%20Section!,and%20play%20around%20with%20it
- https://www.locaweb.com.br/blog/temas/codigo-aberto/o-que-e-html-semantico/#:~:text=Logo%20o%20HTML%20sem%C3%A2ntico%20%C3%A9,c%C3%B3digo%20HTML%2C%20come%C3%A7amos%20com%20%3C
- https://www.freecodecamp.org/portuguese/news/elementos-semanticos-do-html5-explicados/
- https://awari.com.br/domine-todas-as-tags-css-e-se-destaque-no-mercado-de-tecnologia/