Um pouco da história do HTML e HTML5

O que é HTML?

Html é a abreviatura de Hyper Text Markup Language, LINGUAGEM DE HIPERTEXTO BASEADA EM CODIGOS, ou melhor um conjunto de estilos como cabeçalhos parágrafos, listas e tabelas que compõe uma página assim estilizando nosso documento web.

Mais quando iniciou isso?

Em 1980 Tim Berners-Lee propôs um projeto baseado no conceito de hipertexto denominado ENQUIRE. O projeto foi todo desenvolvido inicialmente em Pascal (linguagem de programação), e em 1989 ele com a ajuda do Robert Cailliu conseguiu implementar a primeira comunicação bem sucedida entre cliente HTTP e um servidor através da internet. Surgiu o www, World Wide Web. Porém o protocolo HTTP só foi implementado em fevereiro de 1993.

A primeira versão do html foi baseada na linguagem SHML. Ele era utilizado para a estruturação de documentos e foi dele que o HTML herdou várias tags, <h1> a <h6>, <head> e o <p>. A maior diferença entre essas duas linguagens de marcação é que o HTML implementava a tag <a> com o atributo href, permitindo a ligação entre uma página e outra usando links. 

O HTML surgiu em 1990 e até o seu quinto ano de vida vem sofrendo inúmeras revisões e alterações, nesse tempo quem controlava o padrão adotado era o CERN e a IFTF, e só depois de 1995 foi regularizado pela W3C, que é a responsável pela regularização dos padrões web.

Em 1993, Dave Raggett queria evoluir o HTML para HTML+ assim elevando o seu padrão mais essa proposta nunca foi aceita.

Quem realmente foi o sucessor do HTML foi o HTML 2.0 que foi apresentada na primeira World Wide Web Conference. Essa versão do HTML pode ser vista como uma correção da versão anterior.

Depois veio algumas versões e em uma delas que foi o HTML 3.2 teve implementações como tabelas, applets e texto flutuantes em volta da imagem. A partir dai veio o HTML 4 que foi de suma importância onde ajudou o desenvolvimento de linguagens como XHTML, XForms, MathML e outras especificações da W3C.

Em dezembro de 1999 o HTML 4.01 foi publicado trazendo como principal premissa a compatibilidade com as suas versões anteriores através de:

Scrict, implementação na qual fica proibida a utilização de elementos obsoletos da linguagem;

Transitional, implementação na qual os elementos obsoletos são permitidos;

Frameset, implementação direcionada para site que usem frames.

A linguagem HTML possui algumas regras de sintaxe que devemos seguir para obter o resultado desejado, que é <etiqueta></etiqueta>, que corresponde a abertura e fechada do objeto.

O padrão de uma página HTML é:

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

O HTML tem as principais tags:

<h1> a <h6>

<p> parágrafo 

<br> quebra de linhas

<!— comentários —>

<b> negrito 

<hr> filete horizontal 

<big> texto grande 

<em> enfatizado 

<i> itálico 

<smal> texto pequeno 

<strong> texto forte 

<sub> texto subescrito 

<sup> texto superiscrito 

<ins> texto inserido

<del> texto cancelado

<a href=“#"> link

<!— tags de molduras —>

<frameset> conjunto de molduras

<frame> subjanela

<noframes> seção noframe para navegadores que não manejam molduras

<iframe> subjanela de molsura inline

<!— tabela —>

<table> define uma tabela

<th> define o cabeçalho

<th> define uma linha da tabela

<td> define uma célula de tabela

<caption> titulo da tabela

<colgroup> grupo de tabelas

<col> valores de atributo para uma ou mais em uma tabela

<thead> cabeçalho da tabela

<tbody> corpo da tabela

<tfoot> rodapé da tabela

<!— listas —>

<ol> lista ordenada

<ul> lista não ordenada

<li> item da lista

<dl> lista de definições

<dt> termo de definição

<dd> descrição de definição

<!— formulários —>

<form> define um formulário para entrada de usuário

<input> campo de entrada

<textarea> área de texto

<label> rótulo de controle

<fieldset> conjunto de campos

<legend> título para um conjunto de campos

<select> lista selecionável

<optgroup> grupo de opção

<option> opção em uma caixa drop-down

<button> botão para pressionar

<!— imagens —>

<img> define uma imagem

<map> define um mapa de imagem

<area> define uma área de um mapa de imagem

O HTML5 e suas mudanças

Quando o HTML4 foi lançado, o W3C alertou os desenvolvedores sobre algumas boas práticas que deveriam ser seguidas ao produzir códigos client-side. Desde este tempo, assuntos como a separação da estrutura do código com a formação e princípios de acessibilidade foram traduzidos para discussões e a atenção dos fabricantes e desenvolvedores.

Assim o HTML4 não trazia diferencial real para a semântica do código e não facilitava a manipulação dos elementos via Js ou CSS.

Afinal o que é HTML5?

O HTML5 é a nova versão do HTML4. Enquanto o WHATWG define as regras de marcação que usaremos no HTML5 e no XHTML, eles também definem APIs que formarão a base da arquitetura web, onde essas APIs são conhecidas como DOM Level 0.

Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento possibilitando o desenvolvedor modificar as características dos objetos de forma não intrusiva e de maneira que seja transparente para o usuário final.

Ao contrário das versões anteriores, o HTML5 fornece ferramentas para CSS e JavaScript fazerem seu trabalho da melhor maneira possível. Ele permite por meio de suas APIs a manipulação das características destes elementos, de forma que o site ou aplicação continue leve e funcional.

O HTML5 também cria novas tags e modifica a função de outras. As versões anteriores não continham um padrão universal para a criação de seções de nomenclatura de IDS, Classes ou tags. Não havia um método de capturar de maneira automática as informações localizadas nos rodapés dos sites.

O HTML5 modifica a forma de como escrevemos o código e organizamos as informações da página, podemos explicar melhor da forma que com o HTML5 é mais semântica e menos código.

Vamos ver as novidades do HTML5

<!— Scripting —>
<template> container para conteúdo no lado do cliente instanciado em tempo de execução usando JavaScript

<!— Seções —>
<section> define a seção do documento
<nav> define uma seção que contém apenas links de navegação
<article> define que pode existir de forma independente do resto do conteúdo. Essa tag poderia ser um post em fórum, um artigo de revista e etc…
<aside> define um conteúdo reservado do resto do conteúdo da página
<header> define o cabeçalho de uma página ou seção
<footer> define o rodapé de uma página ou seção
<main> define o conteúdo principal ou importante no documento. *Existe apenas um elemento <main> no documento

<!— semântica textual —>
<time> representa um valor de data e hora

<!— conteúdo embutido —>
<embed> integração com um conteúdo externo
<video> representado pelo video e é associado por arquivos de audio com captions e é preciso que tenha uma interface de play.
<audio> representa sound ou anaudio stream
<source> todos os autores são especificados pelos elementos de media <video> ou <audio>
<canvas> responsável por renderizar um gráfico, imagens flutuantes e etc
<svg> define um vetor svg de imagem

Existe algumas outras que em breve vamos abordar a prática usando os novos elementos do HTML5.

fonte: http://tiagoserra.com.br/um-pouco-da-historia-do-html-e-html5/

Deixar um comentário