O padrão HTML5





HTML5 é a mais recente versão da linguagem de marcação web.

Porém o que causa confusão é o fato de que HTML5 tornou-se mais do que uma linguagem, virou um padrão de desenvolvimento. Isso ocorreu por um simples fato: o HTML agora possui suporte direto para o uso em conjunto com CSS3 e Javascript. Quando muitos autores referem-se a HTML5, estão se referindo de forma direta ao conjunto HTML5, CSS3 e Javascript, e não apenas a linguagem de marcação. Por isso é bom revisar o que cada elemento trata dentro do "padrão HTML5". A linguagem HTML, refere-se especificamente a estrutura ou esqueleto da página web. Os novos elementos header, section, article e footer são bons exemplos para lembrar disso, pois foram criados especialmente para estruturar a página de forma que se possa utilizar a semântica.


<!DOCTYPE html>
<html>
 <head>
<title>Título da página</title>
</head>
 <body>
  <header>
    <h1>Título</h1>
<article id="main"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dignissim quis enim sit amet pellentesque. Phasellus sit amet arcu dolor. Vivamus suscipit tincidunt elit quis egestas. Phasellus et dolor lacus. Praesent ac feugiat est, a dignissim ex. Praesent sem felis, interdum eget nisi ac, tempor tempor ligula.</p></article>
</header>
  <section>
    <aside>
        <ul id="menu">
</ul>
<li>Novos</li>
            <li>Antigos</li>
    </aside>
  </section>
<footer>
    <h5>Rodapé - 2014</h5>
  </footer>
</body>
</html>



Tags que tratavam apenas a parte visual dentro do código, como a tag font, não devem mais ser utilizadas (ainda que possuam suporte), toda a formatação visual do documento fica por conta do CSS.


header, footer  { text-align: center; font-family: "Helvetica", "Comic Sans", Impact; 
                  color: #FFFF88;border-bottom: 1px solid #FF3300 ; 
                  background-color: #FF0008; width: 100%;
}
article#main p  {font-family: Arial;}
section         {width: 100%}
article#main    {float:left; width: 70%}
footer          {float: right}
aside           {float:right; width:30%}
aside ul#menu   {list-style: none; font-weight: bold;}


O resultado dos dois códigos em separado é uma estrutura HTML, estilizada pelo CSS.

Neste padrão o Javascript torna-se o responsável pela interação da página com o usuário, e para isso é utilizado o Modelo de Objeto de Documento ou DOM, que nada mais é do que a interface de ligação entre o HTML e o Javascript. Através de eventos do documento, como clicar em um botão ou passar o passar do cursor são disparadas as funções programadas.


function myFunction() {
document.getElementById("demo").style.color = "red";
}






Podemos desta forma resumir o padrão Html5 como: um padrão web que usa a estrutura do HTML, estilizado pelo CSS, e que utiliza o Javascript para interação com o usuário.

Tenha uma visão geral do HTML5 e suas características Clicando aqui!

Comentários

Postagens mais visitadas deste blog

Xubuntu: título e botões de janela no painel

DataScraping utilizando PHP - Introdução

Personalizando o GRUB no Ubuntu, sem programas