A parte do documento, a parte do corpo, contém o conteúdo que os visitantes podem ver. Os documentos tradicionais de HTML geralmente organizam estruturas de documentos por meio de elementos DIV e, juntamente com as tabelas de estilo apropriadas. No entanto, o problema do elemento div está sem informações semânticas. Especialmente se a estrutura do tecido da página HTML não for boa, ela causará facilmente confusão. Nesse sentido, muitos elementos semânticos são adicionados ao HTML5 para substituir os elementos da div e separar a semântica e a apresentação.
Todos os elementos semânticos têm uma característica significativa: eles realmente não fazem nada, têm pouco impacto no conteúdo da aparência e até não têm efeito. Existem várias razões para a existência de elementos semânticos:
1) Fácil de modificar e manter. Através do elemento semântico do HTML5, informações estruturadas adicionais podem ser transmitidas, o que facilita a compreensão das pessoas o layout geral do documento e o papel de diferentes blocos.
2) NÃO -OBSTACLE. Um tema importante do web design moderno é permitir que qualquer pessoa acesse a página da web sem obstáculos, ou seja, as pessoas que usam leitores de tela e outras ferramentas auxiliares podem navegar livremente na página.
3) Otimização do mecanismo de pesquisa. O uso do HTML5 permite que os mecanismos de pesquisa entendam melhor o seu site e permitam que eles coletem mais informações em suas páginas de índice.
4) Função futura. Novos navegadores e ferramentas de edição da Web definitivamente usarão elementos semânticos no futuro. Por exemplo: a parte principal do documento é apresentada.
O mais importante é que, se você usar elementos semânticos corretamente, poderá criar uma estrutura de página mais clara e se adaptar à tendência de desenvolvimento de futuros navegadores e ferramentas de web design. A seguir, introduzirá elementos semânticos para estruturas de documentos organizacionais.
Estrutura do documento HTML5A página antiga HTML usa elementos de div, juntamente com tabelas de estilo apropriadas, mas o problema do elemento div é que ele não reflete nenhuma informação relacionada à página. A página HTML5 é substituir esses elementos div por elementos semânticos descritivos. O exemplo a seguir contém os principais elementos semânticos usados no HTML5 para descrever a estrutura do documento.
<body> <weweler> <hgroup> <h1> coisas que eu gosto </h1> <h2> por Adam Freeman </h2> </hgroup> <darde> perguntas e comentários? > </dedent> <Nand> <h1> conteúdo </h1> <li> <a href =#fruitsilike> frutas eu gosto </a> </li> <ul> <li> <a href =#maisfruit> adicional de </a> </li> </ul> <li> <a href =#atividades que eu gosto </a> </li> <li> <li> <li> <li> <li> <li > <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> < li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <ul> <li> <li> <li> <l > <li> <li> <li> <li> <a href =#tritypes> tipos de triatlo </a> </li> <li> <a href =#mytri> O tipo de triatlo que estou buscando < /a> </li></ul> </ul> </ Navent> </weweler> <sala main = main> <staradicle> <header> ...... </header> <fast> <h1 > Por que de Is Healthy </h1> <section> aqui é três razões pelas quais todos devem comer mais frutas: <ol> <li> Fruta contém muitas vitaminas </li> <li> Fruta é uma fonte de fibra </li> <li> A fruta contém os chamados </li> </ol> <section> << seção> <p> Gosto de nadar, andar de bicicleta e correr /p> <summary> Tipos de triatlo </summary> Existem diferentes tipos de triatlo -sprint, lympic e assim por diante. Li> <li> Ciclo de 40km </li> <li> 10km Run </li> </ol> </tailtaws> </section> </artigo> </main> <VN> Mais informações: <a href = http: // frut. Freeman.
O documento acima contém muitos elementos HTML5.
títuloO HTML define um sistema de elemento intitulado, de H1 a H6, e H1 é o mais alto. O título do mesmo nível é geralmente usado para dividir o conteúdo em várias partes, cada parte de um tema. O título em todos os níveis é geralmente usado para representar todos os aspectos do mesmo tema. Eles juntos constituem o esboço do documento, para que os usuários possam entender inicialmente seus cuidados e estruturas, desde que naveguem o título do documento, e os usuários podem navegar rapidamente para interessar o conteúdo através do sistema de títulos.
<body> <h1> frutas que eu gosto </h1> ...... </body>Legenda
O elemento Hgroup pode ser usado como um processamento geral (se o elemento Hgroup não for usado, o título principal e as legendas serão usados como dois títulos e, após o uso do HGroup, o título e as legendas serão tratados como um título) para evitar o esboço de perturbando o documento HTML.
<body> <hgroup> <h1> frutas que eu gosto </h1> <h2> como aprendi a amar citrus </h2> </hgroup> ...... </body> </body> </body >
Aqui, como eu aprendo a amar os citros como um sub -título de frutas que eu gosto.
A área principal da página de marcaGeralmente, existe apenas uma parte da página que representa seu conteúdo principal.
<Body> ...... <ROPEL MAIN = MAIN> <TRATLELE> ...... </artigo> </rain> ...... </body>
Função = principal pode ajudar a área principal da página de posicionamento do leitor de tela.
Crie um artigoO elemento do artigo representa um conteúdo independente no elemento HTML. O artigo pode ser aninhado em outro artigo. Uma página pode ter vários elementos de artigo, cada artigo pode ser formado de forma independente e um artigo pode conter um ou mais elementos da seção (consulte a próxima seção).
<Body> ...... <main fun = main> <stRadicle> <weweler> ...... </weweler> <fast> ... </fast> <section> ... ... </section> </arty> <sttern <sttern> ...... </weweler> <fast> ...... </fast> <section> .../seção> </artigo>. .. </ main> ...... </body>seção
O elemento da seção é recém -adicionado HTML5 para representar uma seção no documento. Não há especificação clara para usar o elemento de seção, mas geralmente o elemento de seção deve ser usado para incluir que deve ser incluído no esboço do documento ou no diretório. A seção pode pertencer a um determinado artigo e um artigo pode conter uma ou mais seções. Os elementos da seção geralmente contêm um ou mais parágrafos e um título, mas o título não é necessário.
<Body> <Seção <Hgroup> <h1> frutas que eu gosto </h1> <h2> Como aprendi a amar citros </h2> </hgroup> eu gosto de maçãs e laranjas. , Mangas, cerejas, damascos, ameixas, pêssegos e uvas.
O acima define 3 seções, camadas aninhadas, o título de cada seção é H1. No entanto, em diferentes navegadores, a aparência padrão da estrutura hierárquica da seção será diferente, e esse problema pode ser resolvido criando um estilo personalizado. A diferença entre seção e artigo é que a seção é mais organizada e estrutural em essência e pode ser considerada um parágrafo independente, enquanto o artigo representa um contêiner contido.
Primeiro e caudaO elemento do cabeçalho representa a primeira seção, que pode incluir o cabeçalho e o logotipo. O elemento de cabeçalho geralmente contém um elemento de título ou um elemento Hgroup e também pode conter os elementos de navegação desta seção. Uma página pode conter um número arbitrário de elementos de cabeçalho, e seu significado pode ser diferente de acordo com seu contexto.
O elemento FOOS representa a cauda da seção, que geralmente contém as informações de resumo da seção, e também pode incluir a introdução do autor, informações de direitos autorais, links para conteúdo relacionado, logotipo e declarações isencionais.
<body> <header> <hgroup> <h1> coisas que eu gosto </h1> <h2> por Adam Freeman </h2> </hgroup> </whewer> <eader> <hgroup> <h1> frutas que eu gosto < /h1> <h2> como aprendi a amar citrus </h2> </hgroup> </weader> ...... </section> <eader> <h1> atividades que eu gosto </h1> > ...... <Section> <idiota idiota = Mainfooter> © 2011, Adam Freeman.
Este exemplo define 3 elementos de cabeçalho. O elemento cabeçalho dos elementos do corpo é o primeiro de todo o documento.
Nota: Você não pode ser aninhado com cabeçalho ou outro rodapé no rodapé, nem pode ser aninhado no cabeçalho ou no elemento de endereço.
Área de navegaçãoOs elementos NAV representam a área de navegação no documento, que contém links para outras partes de outras páginas ou outras partes da mesma página. Nem todos os links precisam ser colocados nos elementos de NAV.
<body> <whewer> <hgroup> <h1> coisas que eu gosto </h1> <h2> por Adam Freeman </h2> </hgroup> <dav> <h1> conteúdo </h1> <ul> <li> <A href =#frutitsilike> frutas que eu gosto </a> </li> <ul> <li> <a href =#mais frutas> frutas adicionais </a> </li> </ul> <li> <a href =#AtividadesLike> Atividades que eu gosto </a> </li> <li> <a href =#tritypes> tipos de triatlo </a> </li> <li> <a href =#mytri> o tipo de Triathlon que estou buscando </a> </li></ul> </ul> </ Navent> </ header> <section> ...... </section> <section> .. ... mais informações: <a href = http://fruit.org> Saiba mais sobre frutas </a> > </nav> <Footer id = mainfooter> ...... </dower> </body>
Dois elementos de NAV são usados aqui.
Cuidado para não colocar todos os links no bloco NAV, o NAV geralmente deve ser usado apenas na maior e mais importante área de navegação da página. Por exemplo, a navegação do documento fornecida acima é necessária para colocá -la no bloco NAV, mas se for apenas algumas informações sobre as informações de licença e contato, não há necessidade de colocá -lo no bloco NAV.
Barra de anotaçãoO elemento de lado é usado para indicar o conteúdo que está ligeiramente manchado com o conteúdo circundante, semelhante à barra lateral no livro ou revista. Conteúdo principal.
<body> <weweler> ...... </weweler> <startadicle> <weweler> ...... </weweler> <fast> <h1> por que a fruta está saudável </h1> <section> aqui Atualmente, a RazoeyOne shuld coma mais frutas: <ol> <li> Fruta contém muitas vitaminas </li> <li> Fruta é uma fonte de fibra </li> <li> Fruta contém poucos casos </li> </li> </li> <li> ol> <Section> </side> ...... </artigo> <Footer id = mainfooter> ...... </dower> </body>
Você pode usar elementos de lado como uma barra de notas em um assunto impresso, pode apresentar outro tópico relacionado através dele ou explicar o ponto de vista proposto no documento principal. Você também pode usar elementos de lado para armazenar anúncios, links de conteúdo relacionados etc.
informações de contatoO elemento de endereço é usado para representar as informações de contato do documento ou elemento do artigo. Se o elemento de endereço for um sub -elemento do elemento do artigo, as informações de contato que ele fornecem são consideradas como o artigo; O elemento de endereço não pode ser usado para representar o endereço além das informações de contato do documento ou artigo, como: não pode ser usado para representar o endereço do cliente ou usuário.
<Body> <weader> ...... <darde> Perguntas e comentários?> ...... </body>Área de detalhes
Os elementos de detalhes geram uma área no documento e os usuários podem iniciá -lo para entender mais detalhes sobre um tema. Os elementos de detalhes geralmente contêm um elemento resumido para gerar uma etiqueta ou título de descrição para a área de detalhes.
<Body> <weweler> ...... </weadr> <Trcticle> <weweler> ...... </adring> <section> <p> Gosto de nadar, andar de bicicleta e correr Treinamento para o meu primeiro triatlo, mas é um trabalho árduo. : <ol> <li> 1,5 km de natação </li> <li> Ciclo de 40km </li> <li> 10km Run </li> </ol> </section> </</</ </body>
Os elementos de detalhes têm a aparência padrão no navegador.
Os elementos de detalhes serão dobrados por padrão.
<Detalhes Open> <summary> tipos de triatlo </summary> Existem diferentes tipos de triatlo -sprint, olímpico e assim por diante. /li> <li> 10km Run </li> </ol> </FeFails>
O efeito é o seguinte:
resumoOs elementos semânticos do HTML5 são definidos com base em seus inventores no estudo das páginas da Web existentes. Se você estiver interessado, pode visualizá -lo aqui (o site do Google, não pode visualizá -lo diretamente).
Atualmente, os elementos semânticos do HTML5 foram suportados em todos os navegadores modernos, mas para algumas versões antigas do navegador (principalmente o Internet Explorer do IE9), são necessárias algumas medidas corretivas. Como os próprios elementos semânticos não fazem nada, eles precisam apoiá -los, desde que o navegador possa tratá -los como elementos de div e o restante do trabalho é adicionar algumas regras de estilo a eles. problemático. Felizmente, esses trabalhos Modernizr o ajudaram a alcançá -lo.