Legenda do Fieldset HTML

Introdução

A tag HTML <legend> é uma forma importante de fornecer uma legenda ou título ao conteúdo filho na tag HTML <fieldset>. A tag <legend> é usada para identificar o conteúdo do fieldset e dar um título apropriado à página. Neste laboratório, aprenderemos como usar a tag <legend> e várias propriedades CSS com ela.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Adicione uma tag <fieldset>

Primeiro, abra seu editor de código e crie um novo arquivo chamado index.html. Adicione a estrutura básica ao arquivo digitando html e pressionando a tecla tab.

Adicione uma tag <fieldset> ao seu documento HTML.

<fieldset>
  <legend></legend>
</fieldset>

Adicione a tag <legend> na tag <fieldset>

Adicione uma tag <legend> dentro da tag <fieldset> para criar um cabeçalho.

<fieldset>
  <legend>Contact Information</legend>
</fieldset>

Use propriedades CSS com a tag <legend>

Vamos adicionar algumas propriedades CSS com nossa tag <legend> para deixá-la com uma aparência melhor.

<style>
  legend {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
</style>

Salve o arquivo e abra o arquivo index.html no seu navegador web preferido.

Resumo

Em resumo, a tag HTML <legend> nos ajuda a fornecer uma legenda ou título para o conteúdo filho na tag HTML <fieldset>. Usamos várias propriedades CSS com ela para deixá-la com uma aparência melhor. Esperamos que agora você possa usar a tag <legend> para criar cabeçalhos ou títulos dentro de seus arquivos HTML.