HTML5: Uma breve introdução

HTML é uma linguagem de marcação de páginas WEB, essa tecnologia está presente em inúmeros sites por toda a imensidão da Internet. Veremos nesse artigo um pouco sobre o HTML 5 e ainda vamos te ajudar a se aprofundar no assunto.

Para que serve o HTML?

HTML é uma linguagem de marcação assim como várias outras, ela tem por objetivo definir blocos com informações que serão exibidas na tela através de um navegador de Internet. Outra linguagem de marcação é o XML, porém, o foco não é mostrar uma interface para o usuário, mas sim contribuir para a entrega de dados pela Internet.

Basicamente quando um site quer exibir uma informação na tela do usuário, seja uma imagem, tabela, texto ou link, por exemplo, é a linguagem HTML que está atuando aos fundos. 

É o desenvolvedor front-end o responsável por criar e gerenciar como os elementos serão estruturados, porém, juntamente com a linguagem de estilização CSS é que o site ganha cor e um design mais atrativo.

Devo aprender o HTML 4 para depois aprender HTML 5?

Com certeza não! O HTML é uma coisa só, a numeração a sua frente define a versão atual. A cada nova atualização da linguagem, novos elementos podem ser adicionados ou removidos, então é muito importante se atentar em sempre testar e verificar quais os navegadores que suportam as novas tecnologias.

Do HTML 4 para o HTML5, muitas tags foram descontinuadas, sendo consideradas obsoletas e tendo como recomendação da W3C que a sua utilização seja rejeitada.

O que é a W3C?

W3C é uma abreviação para World Wide Web Consortium, que é uma organização responsável por regulamentar as tecnologias por trás da Internet, como o HTML e o CSS. É mantido por várias empresas, como Google, Microsoft e Mozilla.

Após a chegada do HTML, seu criador Tim Berners-Lee viu a necessidade de uma organização que fosse responsável por coordenar e gerenciar as mudanças da linguagem, assim como os inúmeros recursos disponíveis até hoje, então, o mesmo autor do HTML decidiu criar a W3C.

É difícil aprender HTML?

Difícil não é, HTML tem uma curva de aprendizado rápida e fácil, visto que seus reportórios de tags e atributos, por exemplo, são limitados e de fácil memorização.

Não se preocupe em decorar palavras, foque em entender o que cada instrução faz e o porque da sua utilização, assim, com o tempo após as utilizações, as informações vão ficar gravadas na sua cabeça.

De forma resumida, sempre que você precisar inserir uma imagem, vai ser a tag <img> que deve ser utilizada, então, se for necessário incluir 10 imagens na página, você vai codificar 10 vezes a mesma coisa, mudando apenas o valor dos atributos, incluindo os textos e link para as imagens.

Muito além do que mostrar recursos no navegador

O profissional que atualmente vai trabalhar com o HTML5 tem muitas responsabilidades que vão além de apenas exibir uma imagem ou link na tela, é necessário projetar e codificar páginas que tenham uma boa performance nos buscadores, seja semântica e acessível para pessoas com deficiência visual.

Semântica é a forma de atribuir tags e marcações que façam sentido para o navegador, Google e qualquer outro dispositivo que vai fazer a leitura do nosso HTML. Por exemplo, quando houver um menu de navegação, vamos incluir seu conteúdo dentro da tag <nav>, já que ela informa aos interessados que seu conteúdo refere-se ao menu do site, conforme o exemplo abaixo.

    <nav>
        <ul>
            <li><a href="#">Meu site</a></li>
            <li><a href="#">Outro site</a></li>
            <li><a href="#">Mais um site</a></li>
        </ul>
    </nav>

Informações compactadas

Mesmo nos dias atuais, na qual a Internet tem sua velocidade muito maior quando comparada com a data de criação do HTML em 1991, as tags e atributos no geral são criados para serem abreviados, diminuindo o tamanho dos textos gerados e consequentemente temos uma página web mais leve.

Note que, HTML é um documento de texto salvo em alguma extensão, normalmente em .html, então, certifique-se sempre de nunca estar utilizando marcações desnecessárias, nos dias atuais, devemos economizar o máximo de bytes possível.

Entramos nesse assunto, pois em um primeiro momento ao ver a marcação abaixo, ela não tem nomes atrativos nem faz muito sentido, confira:

    <table>
        <tr>
            <th>Produto</th>
            <th>Preço</th>
        </tr>

        <tr>
            <td>Curso HTML 5</td>
            <td>Gratuito</td>
        </tr>
    </table>

Agora vamos ver como ficaria a página se não houvessem abreviações nas tags:

    <table>
        <table-row>
            <table-header>Produto</table-header>
            <table-header>Preço</table-header>
        </table-row>

        <table-row>
            <table-data>Curso HTML 5</table-data>
            <table-data>Gratuito</table-data>
        </table-row>
    </table>

Deu para a perceber o quanto a gente iria ter que escrever de forma repetitiva a mesmo coisa e ainda digitar bastante caracteres? Por isso as tags e atributos em sua maioria são abreviados, para diminuir o tamanho do texto e facilitar a vida de quem está criando a página.

A guerra dos navegadores

Para quem está chegando agora deve acreditar que esse mar está calmo, não é mesmo? Mas nem sempre foi assim, muitas empresas queriam criar seus próprios remos (navegadores de Internet), que geraram inúmeros problemas para nós desenvolvedores (Microsoft estamos olhando para você!).

No passado era praticamente comum desenvolver um site exclusivo para o Internet Explorer, pois a Microsoft estava destinada a remar sozinha em seu próprio rumo, em contra partida, Google Chrome e a Mozilla, por exemplo, praticamente não apresentavam problemas.

O acontecia que um layout ficava muito bem em vários navegadores, porém, quando o site era acessado no Internet Explorer, as coisas estavam muito diferentes do que foi projetado originalmente, fazendo com que os elementos mudassem de lugar, enquanto outros nem eram se quer exibidos.

Vamos resumir esse assunto, pois ele é muito grande, mas basicamente a Microsoft perdeu essa guerra, e na data de escrita desse artigo, o Internet Explorer já foi decretado como morto, agora a Microsoft vai trabalhar apenas no navegador Edge, que utiliza o mesmo motor que o Google Chrome.

Essa história dos navegadores é algo muito importante que você conheça, pois ainda hoje nós temos uma divergência entre softwares, inclusive, nos dispositivos móveis. Recomendamos que você leia o artigo “O dia em que um grupo de desenvolvedores matou o Internet Explorer 6 sem dó nem pena”, publicado pelo Código Fonte.

Ainda para fixar melhor seu aprendizado, veja um breve documentário que narra como essa guerra foi feia lá no passado.

Aprenda HTML5 agora mesmo gratuitamente

A Academy SatellaSoft preparou um curso completo e gratuito de HTML5, lá você aprende desde o básico. O material foi criado pensando em pessoas que tenham pouco ou nenhum conhecimento sobre a tecnologia, é apresentado como baixar e instalar o editor para codificar as páginas, abrir o documento no navegador, criar diferentes recursos com diferentes tags, entre muitos outros assuntos.

Agora não tem mais desculpas para não aprender HTML5, basta acessar o link abaixo, fazer a sua matrícula e aprender de uma vez HTML5 e se tornar um profissional diferenciado no mercado.

O curso vai receber várias atualizações incluindo tópicos mais avançados, dicas de SEO, entre muitos outros conteúdos.

Matrículas abertas em: https://academy.satellasoft.com/course/v/html5-o-guia-definitivo

Vamos ficando por aqui, a gente se vê logo mais.