Um elemento HTML é definido por uma tag inicial, algum conteúdo e uma tag final.
O elemento HTML é tudo, desde a tag inicial até a tag final:
<h1>Meu primeiro cabeçalho</h1>
<p>Meu primeiro parágrafo.</p>
- Nota: Alguns Elementos HTML não possuem conteúdo (como o elemento <br>). Esses Elementos são chamados de Elementos vazios. Elementos vazios não possuem uma tag final!
Os Atributos HTML fornecem informações adicionais sobre os Elementos HTML.
Servem como propriedades específicas ou formatação. Um atributo é seguido de um valor de atributo, ligados por um sinal de igual (=), dentre aspas (""):
<h1 id="title">Meu primeiro cabeçalho</h1>
<p style="color:blue;">Meu primeiro parágrafo.</p>
- Nota: Todos os Elementos HTML podem ter Atributos, e são sempre especificados na tag de início
- Os Atributos geralmente vêm em pares de nome/valor como: name="value"
O class atributo geralmente é usado para apontar para um nome de classe em uma folha de estilo. Também pode ser usado por um JavaScript para acessar e manipular Elementos específico.
Em um documento HTML podemos ter Elementos diferentes usando a mesma class e definirmos estilo diferentes:
<h1 class="cor-blue">TÍTULO COM COR AZUL</h1>
<p class="cor-blue">Apenas esse parágrafo com cor azul</p>
<p>Esse parágrafo não tem cor azul.</p>
- Nota: O atributo class pode ser usado em qualquer elemento HTML.
Observação: o nome da classe diferencia maiúsculas de minúsculas!
Um elemento semântico descreve claramente seu significado tanto para o navegador quanto para o desenvolvedor.
Exemplos de Elementos semânticos : <header>, <h1>, <nav>, <section>, <footer>, etc...
<header>
<h1>Algum título dentro do cabeçalho</h1>
</header>
<nav>
<!-- Aqui vai o conteúdo do menu -->
</nav>
<section>
<article>
<!-- Aqui vai o artigo dentro de uma seção -->
</article>
</section>
<footer>
<!-- Aqui vai o conteúdo do rodapé -->
</footer>
- Nota: Alguns Elementos HTML não possuem conteúdo (como o elemento <br>). Esses Elementos são chamados de Elementos vazios. Elementos vazios não possuem uma tag final!
Uma pseudo-classe CSS é uma palavra-chave adicionada a seletores que especifica um estado especial do elemento selecionado.
Não apenas em relação ao conteúdo da árvore do documento, mas também em relação a fatores externos como o histórico de navegação (:visited, por exemplo), o status do seu conteúdo (como :checked em certos Elementos de um formulário), ou a posição do mouse (como :hover, que permite saber se o mouse está sobre um elemento ou não).
/* Acrescentando uma margem apenas ao último elemento ".main-section" dentre outros */
.main-section:last-child {
margin-bottom: 25px;
}
- Nota: Pseudo-Classes padrão
- :active
- :checked
- :default
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :fullscreen
- :focus
- :hover
- :indeterminate
- :in-range
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :valid
- :visited