Estrutura HTML5: Como criar o primeiro template HTML5
Neste artigo, apresentarei a estrutura HTML5 mais usada, através da qual você conhecerá o significado de algumas tags HTML que acabaram de ser adicionadas ao HTML5.
Quando você consultar alguns sites escritos em HTML5, você verá tags como header , nav , section , footer , … Essas tags não existiam antes, mas desde que o HTML5 nasceu, as pessoas as usam. Se você sabe inglês, pode adivinhar o significado de cada cartão rapidamente.
Antes de começarmos, gostaria de apresentar algumas posições comuns em um site.
1. A estrutura HTML de uma página da Web típica
Cada site terá uma interface diferente. No entanto, em termos de UI, eles são obrigados a ter alguns cargos como segue:
Quando não houver HTML5, cada posição usaremos uma tag div para cercá-la, depois usaremos ID ou Class para declarar essas posições.
<body> <div id="header"> HEADER </div> <div id="menu"> MENU </div> <div id="main"> <div id="content"> MAIN CONTENT </div> <div id="sidebar"> MAIN SIDEBAR </div> </div> <div id="footer"> FOOTER </div> </body>Mas quando aparece o HTML5, é diferente, usaremos tags separadas, cada posição terá uma tag correspondente. Isso é em termos de significado, mas em termos de natureza, essas tags não são diferentes das tags div , apenas nomes diferentes.
Agora vamos estudar como converter essa estrutura para HTML5.
2. Estrutura HTML5 mais comum
HTML5 é muito legal, as tags terão o nome certo para o que se propõe a ser. Por exemplo, a tag de header é usada na posição de cabeçalho, a tag de footer é usada na posição de rodapé…
Você vê a parte HTML5 que eu construí para a interface acima:
<!doctype html> <html lang="vi"> <head> <meta charset="utf-8" /> <title>Chương Trình HTML Đầu Tiên</title> </head> <body> <header> <h1>Phần header</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serie</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Ebook</a></li> </ul> </nav> <section> <section> Phần nội dung chính trang web </section> <aside> Phần bên phía sidebar </aside> </section> <footer> Copyright 2014 By web888.vn </footer> </body> </html>Esta é uma estrutura padrão para um modelo construído com HTML5. Falo por mim, não por toda a comunidade de escrita HTML5.
Você considera a primeira linha <!doctype html> , que é uma declaração obrigatória se um modelo for construído com HTML5. O próximo é o <html lang="vi"> , você também deve colocar lang na tag html para maior clareza.
A parte da head abaixo não é controversa, certo? Esta é a declaração de informação para o site.
<head> <meta charset="utf-8" /> <title>Chương Trình HTML Đầu Tiên</title> </head> Na parte do body é a mais importante, na parte do corpo eu uso as seguintes tags:
A tag de header é usada para conter todo o cabeçalho do seu site. Se você usou a tag div antes, com HTML5 você usará essa tag.
<header> <h1>Phần header</h1> </header> Nav tag, esta tag é frequentemente usada para conter partes de navegação, como menus.
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serie</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Ebook</a></li> </ul> A tag de section é uma tag usada para conter o conteúdo principal do site. Se você não usa HTML5, pode usar a tag div#content para cercá-lo.
Dentro desta seção, eu a divido em 2 posições, a primeira é o conteúdo principal do site, a segunda é a barra lateral.
<section> <section> Phần nội dung chính trang web </section> <aside> Phần bên phía sidebar </aside> </section> A tag de aside , essa tag é frequentemente usada para conter quadros de barra lateral, como left-sidebar , right-sidebar .
<aside> Phần bên phía sidebar </aside> E a última tag é a tag footer , em vez de declarar uma div e formatar, usamos a tag footer para envolvê-la.
<footer> Copyright 2014 By web888.vn </footer>Veja bem, se usarmos essas tags padrão HTML5 , não precisamos comentar qual parte é o cabeçalho e qual parte é o rodapé, certo? Muito intuitivo e fácil de atualizar.
Execute-o e aqui está o resultado do nosso modelo html5:
Oh, por que a interface parece tão brega? A razão é que não usamos CSS para decorar a interface. Isso mostra que, embora as tags HTML5 tenham seus próprios nomes, elas são essencialmente iguais a uma tag div normal.
3. Conclusão
É isso, eu apresentei a estrutura HTML5 que é frequentemente encontrada em uma página da web. Ainda existem muitas outras tags HTML como artigo, svg, .. e vamos aprender sobre isso nos próximos artigos.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
