Diferença entre DIV e SPAN

e são tags HTML que definem elementos no código HTML.

HTML (Hypertext Markup Language) é um código estruturado usado para criar e exibir as páginas da Web que visitamos on-line, todos os dias, em qualquer dispositivo.

Outras tecnologias e linguagens de programação podem ser integradas ao HTML para fornecer recursos dinâmicos e avançados em um site.

Compreendendo HTML

Linguagem de marcação de hipertexto (HTML) é uma linguagem de marcação amplamente usada e se refere à estrutura e ao código 'por trás' de uma página da web, exibida em um navegador da web.

HTML é um arquivo de texto usando código específico (sintaxe) para definir o estilo, o conteúdo, o layout e o formato de uma página. o Marcação O termo indica que o texto / código está sendo preparado para processamento e apresentação, ou seja, em uma página da web, em um navegador da web.

O World Wide Web Consortium (W3C) [i] reconhece o HTML como uma linguagem formal de marcação no desenvolvimento de páginas da Web e, portanto, o HTML é suportado pela maioria dos navegadores. Assim, as páginas da web podem ser desenvolvidas em um idioma reconhecido, facilmente interpretado por diferentes navegadores para renderizar a página conforme pretendido pelo designer..

A versão atual ainda usada é o HTML4, mas está sendo gradualmente eliminada à medida que o HTML5 ganha mais suporte e adoção para páginas da web dinâmicas e responsivas.

A capacidade de resposta está se tornando um componente fundamental no desenvolvimento da web para fornecer uma experiência mais fácil e dinâmica ao usuário, que deve ser acomodada em vários dispositivos, como smartphones, tablets e laptops.

Folhas de estilos em cascata (CSS) está se tornando parte integrante da criação de páginas dinâmicas e responsivas. É um arquivo separado que define atributos para cada elemento, como fonte, cor, alinhamento - para que o desenvolvedor não indique o estilo do elemento toda vez que for usado no código HTML.

Estrutura básica do HTML

Para tirar o máximo proveito de qualquer linguagem de desenvolvimento, seguir a estrutura padrão de arquivos e considerar o melhor uso da sintaxe é essencial para fornecer conteúdo da Web estável, objetivo e visualmente atraente.

Uma página HTML possui uma estrutura definida por elementos (também chamados de tags). Ao escrever o código HTML, esses elementos são mostrados em pares - ou seja, toda tag precisa de uma abertura e um fechamento. Um começo e um fim.

Um elemento é aberto com a sintaxe: e fechado com.  o / linha inclinada indica o final da definição desse elemento.

Os atributos e o conteúdo do elemento são definidos entre esses dois pontos.

o elementos mínimos necessárias para um arquivo HTML são a definição, (somente HTML4) e tags.

• Definição de DOCTYPE

A definição (DTD) deve primeiro ser declarada como a primeira tag em um arquivo HTML; portanto, quando a página é processada, o navegador da web sabe que tipo de arquivo é e, portanto, pode interpretar e exibir a página corretamente..

No HTML4, existem variações da DTD (dependendo dos atributos e elementos da página), mas as instruções mais típicas seriam incluídas como:

ou

O DTD em HTML5 é muito mais simples:

· HTML, HEAD e CORPO

• A tag indica que é um arquivo HTML e essa é a raiz do elemento HTML que contém todos os outros elementos subseqüentes definidos nele; e incluir um atributo de idioma é recomendado como prática recomendada; por exemplo:

• É obrigatório em HTML4, mas não obrigatório em HTML5. É um elemento que contém outros elementos relevantes para esta parte do documento, como título, scripts de referência, definição de estilos e metadados. A etiqueta fechada deve ser usada antes de definir o 
• O elemento contém o conteúdo principal da página, incluindo tabelas, imagens, texto, listas etc. Depois que a tag é fechada, o elemento agora pode terminar. O uso do novo elemento HTML5 é opcional para a página ou para outra parte do conteúdo.

Elementos HTML

O HTML5 produziu novos elementos para facilitar o desenvolvimento e o design, além de remover os elementos usados ​​no HTML4. A lista de diferenças entre HTML4 e HTML5 é publicada pelo World Wide Web Consortium (W3C) [ii].

TAG DIV HTML

Juntamente com os aprimoramentos e os novos elementos, combinados com os avanços do CSS, certos elementos podem ser usados ​​de maneiras diferentes e melhores do que antes, e as páginas da Web estão se tornando mais rápidas, mais ricas e bonitas de se ver! com CSS, usado com HTML5 pode substituir certos elementos que foram excessivamente usados, como .

A tag é popular ao segregar conteúdo em uma página. Ao criar esse elemento, ele insere automaticamente uma quebra
para manter o texto ou o conteúdo juntos, em vez de passar o texto pela página.

Com a acessibilidade do site e a otimização do mecanismo de pesquisa, as técnicas estão se tornando bastante científicas e recomendadas pelo WC3 para não voltar sempre ao uso no HTML5.

Como exemplo de um formato de blog bem estruturado, mas simples, considere os novos elementos HTML5 com CSS em vez de usar o elemento; use o elemento para o conteúdo principal, o elemento para destacar ou separar qualquer conteúdo na página, cabeçalho ou rodapé (em qualquer lugar!) e o elemento pode ser usado para manter um menu ou links de grupo para navegar na página.

Esses novos elementos identificam facilmente o tipo de conteúdo usando HTML5. No entanto, a tag também é usada com CSS para criar sites responsivos.

Criando cada elemento (com seu 'próprio ID ou classe), o arquivo CSS pode ser definido para manipular cada elemento.

O exemplo de HTML abaixo mostra um exemplo de uso de vários elementos:

Meus exemplos

Os elementos podem ter atributos diferentes, especificamente tamanhos diferentes para interação responsiva, dependendo do tamanho da tela do dispositivo que está sendo usado..

Aqui está um exemplo de como cada elemento pode ser estilizado no arquivo CSS correspondente do HTML - referenciando cada tag.

#Header

largura: 800 px;

height: auto

margem esquerda: auto;

margem esquerda: auto;

#Destaque

altura: 150px;

Cor de fundo: #CCC;

TAG DE SPAN HTML

O elemento é um elemento embutido e não quebra em linhas, a menos que a interrupção
é usada e o texto definido (conteúdo) entre as tags de abertura e fechamento é exibido como uma linha (por padrão, sem o uso de outros elementos).

Elementos embutidos são elementos de texto no arquivo HTML e podem ser definidos na linha de outro elemento.

Como, o elemento não tem significado para referência ideal. Basicamente, mostra o conteúdo do elemento como está, mas todas as instâncias podem ser definidas em CSS para estilizar, se marcadas corretamente e enriquecidas com outros atributos ou manipuladas com JavaScript..

No exemplo abaixo, o texto em azul destaca como o elemento span pode ser aninhado como um elemento inline com atributos diferentes do seu elemento pai - o parágrafo p>:

Para abrir o exemplo, clique no ícone na parte inferior da página.

Quando visualizado em um navegador da web, o texto no elemento acima será exibido em uma fonte diferente do parágrafo para enfatizar onde o usuário deve clicar para acessar o exemplo.

Observe que não há diferenças entre HTML4 e HTML5.