> For the complete documentation index, see [llms.txt](https://recife.gitbook.io/wwcode-front-end-study-group/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://recife.gitbook.io/wwcode-front-end-study-group/html-css/marcacao.md).
# Marcação
## Introdução
O HTML - HyperText Markup Language - foi pensado por Tim Berners-Lee em 1995 para aprimorar o compartilhamento de artigos e publicações entre cientistas e - com o passar dos anos - evoluiu bastante, tornando-se a base para o desenvolvimento e criação de websites.
## Como fazer as marcações?
No HTML, as marcações de texto são feitas através de **tags**. Você pode encontrá-las tranquilamente em todos os sites da web. Olhando a [documentação](https://developer.mozilla.org/pt-BR/docs/Web/HTML), você verá que são muitas e caberá a nós apresentar as principais delas a vocês.
#### Tags
Quando acessamos um página da internet, nem imaginamos que - por trás daquilo tudo - há um conjunto de **tags** sendo interpretadas pelo navegador que as transforma em um conteúdo compreensível para nós usuários. Em outras palavras, as tags são responsáveis pela criação de elementos e pela organização semântica da página. São representadas pelo sinal "maior 'que" ( < ) e "menor que" ( > ) e, nas tags de fechamento, exige-se uma barra ( / ) para sinalizar que o elemento acaba ali.
{% hint style="warning" %}
**Atenção!** Apesar da representação acima ser a mais comum entre as tags, algumas delas **dispensam** tag de fechamento, ou seja, fecham-se sozinhas; mas - em contrapartida - não possuem um conteúdo de texto como as demais. Há uma lista de tags autofechantes e a mais popular é a tag **\,** que será estudada mais a frente.
{% endhint %}
#### Elementos
Um **elemento** HTML abrange a **tag de abertura**, um **conteúdo** de texto e a **tag de fechamento.**
#### Atributos
Absolutamente todas as tags do HTML podem ter atributos. E o que eles representam? Atributos são **informações adicionais** sobre os elementos de uma página, serão sempre declarados na tag de abertura e - em regra - aparecerão em pares no formato **chave = "valor"** como no exemplo abaixo
Os atributos se dividem em **globais** e **específicos:**
* **Globais:** são aqueles que podem ser utilizados, sem distinção, em todos os elementos HTML. Abaixo, veremos os mais populares, mas você pode conferir a lista completa [aqui ](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes).
| Atributo global | conceito |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **class** | Adiciona uma classe ao elemento, cujo valor atribuído diferentemente do id, pode ser igual ao de outros elementos, repetindo sem problemas. |
| **id** | Sua função é definir um id único para o elemento a que se refere. Em outras palavras, o **id** vai funcionar como um CPF, o mesmo valor somente pode ser atribuído a um elemento |
| **title** | Fornece informações adicionais sobre um elemento, que podem ser visualizadas quando passamos um mouse em cima dele. |
| **lang** | Sua função é definir o idioma do elemento no qual foi inserido. |
| **style** | Por último, esse atributo permite a estilização do elemento em que foi inserido. Através dele, podemos mudar a cor, a fonte, o sombreamento, a altura, largura, tudo isso internamente ao elemento. |
* **Específicos:** são característicos de determinadas tags, como é o caso do atributos **src** e **alt** que têm presença exigida quando estamos lidando com o elemento **img.**
```markup
```
Cabe ao atributo **src** indicar qual é o caminho/endereço de localização da imagem referenciada no elemento, podendo ela estar armazenada na própria máquina do usuário ou hospedada na web.
O **alt** é indispensável quando pensamos numa web mais acessível porque ele disponibiliza um texto alternativo e descritivo da imagem para deficientes visuais, que utilizam leitores de tela para navegar na internet. Além disso, ele é também muito útil quando a imagem por erros ou problemas de conexão não consegue carregar por completo e só é possível identificá-la através da descrição do alt.
Além desses, também há um outro muito popular: o **href.** Esse atributo específico é utilizado em elementos como **\** e **\** como no exemplo logo abaixo
```markup
Visite a página do Women Who Code Recife!hxqpvv2ZA
```
Quando referenciado dentro de um elemento **\,** o href representa a URL da página a que usuário será levado quando clicar no elemento.
```markup
```
Já quando referenciado dentro um **\**, esse mesmo atributo é responsável por especificar a localização do documento que está 'linkado" pelo elemento. No exemplo acima, estamos mostrando o caminho do arquivo de CSS responsável pela estilização da página através do atributo **href.**
```
Cabe ao atributo **src** indicar qual é o caminho/endereço de localização da imagem referenciada no elemento, podendo ela estar armazenada na própria máquina do usuário ou hospedada na web.
O **alt** é indispensável quando pensamos numa web mais acessível porque ele disponibiliza um texto alternativo e descritivo da imagem para deficientes visuais, que utilizam leitores de tela para navegar na internet. Além disso, ele é também muito útil quando a imagem por erros ou problemas de conexão não consegue carregar por completo e só é possível identificá-la através da descrição do alt.
Além desses, também há um outro muito popular: o **href.** Esse atributo específico é utilizado em elementos como **\** e **\** como no exemplo logo abaixo
```markup
Visite a página do Women Who Code Recife!hxqpvv2ZA
```
Quando referenciado dentro de um elemento **\,** o href representa a URL da página a que usuário será levado quando clicar no elemento.
```markup
```
Já quando referenciado dentro um **\**, esse mesmo atributo é responsável por especificar a localização do documento que está 'linkado" pelo elemento. No exemplo acima, estamos mostrando o caminho do arquivo de CSS responsável pela estilização da página através do atributo **href.**