WDD 130: Fundamentos da Web

S02 – Atividade de Aprendizagem: Elementos de Bloco e em Linha do HTML

Visão Geral

Um elemento HTML é, por padrão, um elemento de nível de bloco (block) ou em linha (inline). Os elementos de bloco ocupam toda a largura do contêiner e começam em novas linhas. Os elementos inline ocupam apenas o espaço necessário para o conteúdo e não começam em uma nova linha.

Material de Preparação

Elementos de Nível de Bloco

Os elementos em nível de bloco começam em uma nova linha na página e ocupam toda a largura do seu contêiner. Isso significa que o contêiner do elemento se estende o máximo possível para a esquerda e para a direita. Alguns elementos comuns em nível de bloco são: <p>, <div> e todos os contêineres semânticos, como <header>, <footer>, <main>, <nav> e <section>.

Elementos Inline

Os elementos inline não começam em uma nova linha e ocupam apenas o espaço delimitado pelas tags que definem o elemento. Alguns elementos inline comuns são: <span>, <a>, <img>, <button> e <input>.

Assista ao vídeo a seguir para saber mais sobre elementos de bloco e inline:

Instruções da Atividade

Conclua o seguinte:

1. Quais dos seguintes elementos HTML são inline por padrão?

   <header> <div> <span> <table> <form> <a> <label> <button> <input> <p> <aside> <cite>

   Avalie Seu Conhecimento

   <span> <a> <label> <button> <input> <cite>

   Os outros elementos listados são elementos de nível de bloco por padrão.
   
   Como descobrir qual é qual? Você pode experimentá-los em sua página. Além disso, você também deve aprender a obter informações usando fontes confiáveis. Por exemplo, você pode usar a Referência de HTML - (conteúdo em inglês) para procurar um elemento e verificar se ele é um bloco ou inline.

2. Abra a página chamada bloco-vs-inline.html na subpasta semana02 da sua pasta wdd130.
3. Leia a estrutura HTML.
4. Para ajudar a completar o exercício, renderize a página no Live/Five Server, clicando com o botão direito do mouse no nome do arquivo e selecionando "Abrir com Live/Five Server".

   A página foi estilizada com CSS para ajudar a ilustrar as diferenças entre elementos de bloco e inline.

5. Este arquivo html contém uma série de tarefas para você concluir. Essas tarefas estão descritas diretamente no HTML. Agora você deve concluir cada tarefa descrita.
6. Observe que os elementos inline <span>, <img>, <a> e <button> são tão grandes quanto o conteúdo dentro deles.
   são tão grandes quanto o conteúdo dentro deles.