Tag html div | explicado

A div refere -se à divisão ou seção em um documento HTML. É um recipiente vazio que pode conter vários elementos HTML. O objetivo da div é adicionar estilos CSS específicos aos elementos usados ​​na respectiva tag div. A tag div pertence à categoria Block HTML de elementos e, portanto, inicia uma nova linha sempre que é iniciada.

Uma div pode conter várias outras divisões e cada divide contém várias propriedades de estilo. O objetivo principal de uma div é fazer um grupo de tipos semelhantes de elementos para que eles possam ser estilizados facilmente. Devido à sua funcionalidade estendida, ela é chamada de etiqueta de chave ao desenvolver uma página da web usando HTML. Neste artigo, demonstramos o funcionamento da tag div, e alguns exemplos são ilustrados para mostrar o uso da tag div.

Como funciona a tag HTML Div

A tag Div compreende tags iniciais e fechadas e a seguinte sintaxe é usada para criar uma div em html.

Qualquer coisa escrita entre essas tags adotará os valores definidos para esta div. Para um entendimento básico, uma div é criada usando o seguinte código.

Uma div é criada na página da web

isso é div

O código é descrito da seguinte forma:

- O título da página será "Div Tag"

- Antecedentes do corpo é definido como "verde -mar leve"

- Uma div é criada e sua cor de fundo é definida como "amarelo"

- Um parágrafo é criado na tag div

A imagem do código é fornecida abaixo:

A saída da página da web é mostrada abaixo:

As seguintes observações podem ser feitas da saída acima:

- A tag div cria uma nova linha

- ocupa toda a largura (se o limite não estiver definido) da página

Como usar a tag HTML Div

O funcionamento básico da tag div é explicado na seção acima. No entanto, esta seção explica o uso da tag HTML DIV em vários cenários. Como afirmado anteriormente, vários elementos estão contidos em uma div para estilizar todos esses elementos de maneira semelhante. Como o estilo é possível com o CSS, é recomendável usar uma classe CSS em linha ou externa.

Exemplo 1: Usando uma tag HTML DIV com várias classes CSS

Uma tag div pode ser usada com várias classes CSS. Para praticar essa funcionalidade, o seguinte código HTML é usado:

O div usando duas classes CSS

Bem -vindo ao Linuxhint

um vale de tecnologia

O código é descrito abaixo:

- Duas classes CSS são criadas denominadas "cores" e "misc".

- A classe de cores define "cor de fundo" e "cor da fonte", enquanto a classe Misc contém a "largura", "estofamento" e "estilo de font"

- Uma div é criada com um atributo de classe e usou o nome de ambas as classes

- três elementos HTML

,

e são usados ​​na div

Observação: Ao usar vários nomes de classes em um atributo de classe da tag div, você deve adicionar um espaço entre os nomes de classes para diferenciar as duas classes.

A imagem do código é fornecida abaixo:

A saída do código HTML em uma página da web é mostrada abaixo:

Exemplo 2: Usando várias tags div

Usando várias div é a parte confusa da tag html div. O seguinte código HTML refere -se ao uso de vários div. Com vários

Primeiro div

Bem -vindo ao Linuxhint

Segunda div

provedor de conteúdo líder

O código é descrito como:

- criou duas classes CSS denominadas "First" e "Second"

- A classe “Primeira” define “cor de fundo”, “cor da fonte”, largura, “flutuação”

- A classe "segunda" possui propriedades como "cor de fundo", "largura", "flutuação"

- Uma div é inicializada com um atributo de classe e "primeiro" como o valor do atributo

- Outra div é criada com "segundo" como um valor do atributo de classe

A imagem do código é mostrada abaixo:

A saída da página da web é mostrada abaixo:

Conclusão

A tag div em HTML refere -se à criação de um contêiner que permite fazer um grupo de elementos HTML que podem ser estilizados da mesma maneira. Este artigo demonstrou o mecanismo de trabalho da tag div. Além disso, são afirmados vários exemplos que mostram como uma tag HTML DIV pode ser usada em vários cenários.