Design páginas da web usando o código semântico HTML5

Autor：Eve Cole Data da Última Atualização：2025-03-27 06:00:02

Primeiro, queremos declarar e criar o tipo de documento, não usamos mais o HTML 4 ou XHTML 1.0 como o público -// W3C // DTD XHTML 1.0 Transitional ..... Declaração, podemos escrever da seguinte maneira:

 <! Doctypehtml>

Dê uma olhada, é simples e óbvia, insensível ao caso. Torna mais fácil ser compatível com versões anteriores. Pelo menos pode economizar algum tempo na digitação.

Agora definimos o tipo para o documento HTML 5. Tudo correu bem até agora. Agora, vamos dar uma olhada nas novas tags do HTML5. Antes de navegarmos na nova guia, vamos dar uma olhada em como geralmente escrevemos:

 <html>
 <head>
 ...outro...
 </head>
 <Body>
 <divid = cabeçalho>
 <H1> CSS3-HTML5 HOME </H1>
 </div>
 <divid = Nav>
 <ul>
 <li> Home </li>
 <li> Sobre </li>
 <li> Contate </li>
 </ul>
 </div>
 <divid = content>
 <H1> Título </h1>
 <p> ... </p>
 </div>
 <divid = rodapé>
 <p> Informações de direitos autorais </p>
 </div>
 </body>
 </html>

Usar <div> no exemplo acima é uma prática muito comum agora. Seu objetivo é duplo. Primeiro, ele fornece um ID de identidade exclusivo que pode ser aplicado especificamente aos capítulos da página da web. Segundo, a identificação é como uma estrutura pseudo-semântica primitiva. Os nomes de identificação em cada site podem ser diferentes, por isso é difícil para nós entender o que esses IDs significam.

Tag <header>:

A tag <weweler> é equivalente àquela que geralmente definimos com <div id = cabeçalho>. Se o seu site ainda estiver definido assim com <div id = cabeçalho>, agora podemos substituí -lo por <adring>.

Tag <VN>:

<VN> é a etiqueta de navegação, assim como costumamos usar:

<ul>

<li> ÍNDICE </li>

<li> Notícias </li>

...

</ul>

</div>

Agora use <Nand>:

 <MAV>
 <ul>
 <li> <href = index.html> home </a> </li>
 <li> <AHREF =/Sobre/Sobre/Sobre </a> </li>
 <li> <ahref =/blog/> blog </a> </li>
 </ul>
 </Arn>

Tag <section> Tag: a tag <Section> pode ser um grupo de conteúdo ou grupos de tópicos, geralmente com uma tag de partida e uma etiqueta final. Obviamente, essa tag também pode ser aninhada.

Tag <Artigo>: Pode haver uma seção de conteúdo dentro da tag <Artigo>.

<oswer>

Tag <weeber> Tag: <wower> Tag, se você não diz, pode entender para que serve isso. Também pode haver múltipla, geralmente na parte inferior do site.

Vamos dar uma olhada no último código:

 <! Doctypehtml>
 <html>
 <head>
 ...coisa...
 </head>
 <Body>
 <header>
 <H1> mysite </h1>
 </header>
 <MAV>
 <ul>
 <li> Home </li>
 <li> Sobre </li>
 <li> Contate </li>
 </ul>
 </Arn>
 <Section>
 <H1> myarticle </h1>
 <Artigo>
 <p> ... </p>
 </artigo>
 </seção>
 <wower>
 <p> ... </p>
 </rodapé>
 </body>
 </html>

Através do código, é mais conciso e mais fácil de entender, certo?