TAGS HTML

Prévia do material em texto

TAG: <span> Definição e Uso
A <span>tag é um contêiner inline usado para marcar uma parte de um texto ou uma parte de um documento.
A <span>tag é facilmente estilizada por CSS ou manipulada com JavaScript usando o atributo class ou id.
A <span>tag é muito parecida com o elemento <div> , mas <div> é um elemento de block-level e <span>é um elemento inline.
Exemplo
Um elemento <span> que é usado para colorir uma parte de um texto:
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
Elementos inline
Um elemento inline não começa em uma nova linha.
Um elemento inline ocupa apenas a largura necessária.
Este é um elemento <span> dentro de um parágrafo.
Exemplo
<span>Hello World</span>
TAG: <div> Definição e Uso
A <div>tag define uma divisão ou uma seção em um documento HTML.
A <div>tag é usada como um contêiner para elementos HTML - que são estilizados com CSS ou manipulados com JavaScript.
A <div>tag é facilmente estilizada usando o atributo class ou id.
Qualquer tipo de conteúdo pode ser colocado dentro da <div> tag! 
Nota: Por padrão, os navegadores sempre colocam uma quebra de linha antes e depois do <div>elemento.
Exemplo
Atributos Globais
A <div>tag também suporta os Atributos Globais em HTML .
Atributos do Evento
A <div>tag também oferece suporte aos atributos de evento em HTML .
Páginas Relacionadas
Tutorial HTML: HTML e elementos block-level e inline
Tutorial HTML: Layout HTML
Referência HTML DOM: Objeto Div
HTML e elementos Block-level e inline
Cada elemento HTML tem um valor de exibição padrão, dependendo do tipo de elemento.
Existem dois valores de exibição: bloco e embutido.
Elementos block-level
Um elemento block-level sempre começa em uma nova linha e os navegadores adicionam automaticamente algum espaço (uma margem) antes e depois do elemento.
Um elemento block-level sempre ocupa toda a largura disponível (estende-se para a esquerda e para a direita o máximo possível).
Dois block-level comumente usados ​​são: <p> e <div>.
O <p>elemento define um parágrafo em um documento HTML.
O <div>elemento define uma divisão ou uma seção em um documento HTML.
O elemento <p> é um elemento de block-level.
O elemento <div> é um elemento block-level.
Exemplo
<p>Hello World</p>
<div>Hello World</div>
Lista de elementos block-level
Aqui estão os elementos block-level em HTML:
Elementos inline
Um elemento inline não começa em uma nova linha.
Um elemento inline ocupa apenas a largura necessária.
Este é um elemento <span> dentro de um parágrafo.
Exemplo
<span>Hello World</span>
Lista de elementos inline
Aqui estão os elementos inline em HTML:
Nota: Um elemento inline não pode conter um elemento block-level!
Elementos e técnicas de layout HTML
Os sites geralmente exibem conteúdo em várias colunas (como uma revista ou um jornal).
Exemplo
Elementos de Esquema HTML
HTML tem vários elementos semânticos que definem as diferentes partes de uma página web:
	
	· <header>- Define um cabeçalho para um documento
· ou uma seção.
· <nav>- Define um conjunto de links de navegação.
· <section>- Define uma seção em um documento.
· <article>- Define um conteúdo independente e 
· Independente.
· <aside>- Define o conteúdo além do conteúdo 
· (como uma barra lateral).
· <footer>- Define um rodapé para um documento 
· ou uma seção.
· <details>- Define detalhes adicionais que o usuário
· pode abrir e fechar sob demanda.
· <summary>- Define um título para o <details>elemento
· Você pode ler mais sobre elementos semânticos em
· nosso capítulo Semântica HTML .
Técnicas de Layout HTML
Existem quatro técnicas diferentes para criar layouts de várias colunas. Cada técnica tem seus prós e contras:
· estrutura CSS
· Propriedade flutuante do CSS
· CSS flexbox
· Grade CSS
Objeto HTML DOM Div
Objeto Div
O objeto Div representa um elemento HTML <div>.
Acessar um Objeto Div
Você pode acessar um elemento <div> usando getElementById():
Exemplo
var x = document.getElementById("myDIV");
Criar um objeto Div
Você pode criar um elemento <div> usando o método document.createElement():
Exemplo
var x = document.createElement("DIV");
Propriedades do Objeto Div
	Property
	Description
	align
	Not supported in HTML5. Use style.textAlign instead.
Sets or returns the value of the align attribute of the <div> element
Propriedades e eventos padrão
O objeto Div também suporta as propriedades e eventos padrão .