B E L M I T E C

Loading

Introdução ao HTML5

  1. Home
  2. Categorias

Introdução ao HTML5

Olá, Saraiva aqui! Neste artigo apresento um resumo, iniciando uma jornada especial sobre o HTML5. Vamos adiante!

O HTML5 não é apenas uma nova versão da linguagem HTML enriquecida com novos elementos e atributos, mas um conjunto de tecnologias para construir sites e aplicativos mais poderosos e diversificados, que suportam multimídia, interagem com interfaces de software, etc.

Benefícios do HTML5

Os principais benefícios do HTML5 estão listados abaixo:

  • O HTML5 é suportado por todos os navegadores modernos.
  • HTML5 é mais amigável para dispositivos. É fácil de usar.
  • O HTML5 pode ajudar a criar sites atraentes com CSS , JavaScript , etc.
  • O HTML5 suporta SVG ( Scalable Vector Graphics - Wikipedia ) e outros gráficos virtuais. Nas versões anteriores, o uso de gráficos vetoriais só era possível em combinação com tecnologias como Flash, VML, etc.
  • O código fica mais limpo principalmente devido à substituição das tags div por elementos semânticos , que ajudam a estruturar melhor o conteúdo da página da web e melhorar a legibilidade.
  • O HTML5 oferece suporte à geolocalização, o que possibilita determinar a localização dos usuários.
  • Os novos padrões foram especificados para reproduzir multimídia (animação, áudio, vídeo) diretamente no navegador sem a necessidade de instalar plug-ins adicionais.
  • O suporte para armazenamento na web introduzido no HTML5 torna possível armazenar grandes quantidades de dados de aplicativos localmente, sem afetar o desempenho de seu aplicativo da web. Os dados no armazenamento local persistirão mesmo quando o navegador do usuário for fechado e reaberto.

Desvantagens do HTML5:

  • É suportado apenas por navegadores modernos.
  • Você deve escrever códigos longos que consomem muito tempo.

Modelos de conteúdo HTML5

Em HTML5, o conteúdo de uma página web pode ser dividido em grupos semânticos, que descrevem seu conteúdo. Esses grupos são chamados de modelos de conteúdo. Cada um desses modelos descreve o tipo de elementos que contém. O modelo de conteúdo pode conter texto e elementos filhos. O elemento pode pertencer a uma ou mais categorias de conteúdo.

Os modelos de conteúdo HTML5 estão listados abaixo:

  • conteúdo de metadados
  • fluxo de conteúdo
  • Conteúdo de seccionamento
  • Conteúdo do título
  • Categorias de conteúdo
  • Conteúdo incorporado
  • Conteúdo interativo
  • Conteúdo palpável

 

Os modelos de conteúdo podem se sobrepor e isso significa que os elementos pertencem a várias categorias nesse meio tempo. Por exemplo, seções, títulos, frases, incorporados, interativos e uma parte do conteúdo de metadados referem-se ao conteúdo do fluxo. Metadados e conteúdo interativo em certos casos podem se referir a conteúdo de frase.

Existem também elementos que são usados ​​para fins específicos, por exemplo, para definir formulários. Esse tipo de elemento não se refere a nenhum dos modelos de conteúdo mencionados acima.

Conteúdo de metadados.

Os elementos pertencentes à categoria de conteúdo de metadados contêm informações sobre documentos HTML, estabelecem links para outros recursos, definem a apresentação ou o comportamento dela. Esses elementos não são exibidos na página da web.

Os elementos da categoria do modelo de conteúdo são: <base> , <link> , <meta> , <noscript> , <script> , <style> , <template> e <title> .

Exemplo de elementos pertencentes ao conteúdo de metadados:

<head>
  <title>Titulo deste documento</title>
  <meta charset="UTF-8">
  <style>
    * {
      color: #1c87c9;
    }
  </style>
</head>

Fluxo de conteúdo

Elementos pertencentes à categoria de conteúdo de fluxo são normalmente aqueles usados ​​no corpo de um documento HTML (incluídos nas tags <body></body>).

Os elementos da categoria do modelo de fluxo são: <a>, <abbr>,  <address>, <article> , <aside> , <audio>, <b>, <bdi> , <bdo> , <blockquote> , <br> , <button> , <canvas> , <cite> , <code> , <data> , <datalist> , <del> , <details> , <dfn> , <diálogo> , <div> , <dl>, <em> , <embed> , <fieldset> , <figura> , < rodapé> , <formulário> , <h1> , <h2>,  <h3> , <h4> , <h5> , <h6> , < header> , <hr> , <i> , <iframe> , <img> , <input> , <ins> , <kbd> , <label> , <main> , <mapa> , <marca> , <menu> , <meter> , <nav> , <noscript> , <object> , <ol> , <output> , <p> , <picture> , <pre> , <progress> , <q> , <ruby> , <s> , <samp> , <script> , <seção> , <selecionar> , <pequeno> , <span> , <strong> , <sub> , <sup> , <svg> , <table> , <template> , <textarea> , <time> , <u> , <ul> , <var> , <video> , <wbr> .

Exemplo de elementos pertencentes ao conteúdo do fluxo:

<!DOCTYPE html>
<html>
  <head>
    <title>Titulo deste documento</title>
  </head>
  <body>
    <p><abbr title="Localizador universal de URLs, LINKS, PATHS">URL</abbr> - Esta é uma forma especial de designar um endereço de um link (url), paths (caminho, local de arquivos etc) individual na Internet </p>
    <hr/>
    <div>
      <p>
        O que é um parágrafo?<br>
        Um parágrafo é uma divisão de um texto escrito, indicada pela mudança de linha, cuja função é mostrar que as frases aí contidas mantêm maior relação entre si do que com o restante do texto.<br>

Normalmente, os parágrafos não devem ser muito longos, exceto quando for extremamente necessário, pois caso contrário podem confundir e tirar a atenção do leitor.  
      </p>
      <hr/>
      <ol type="A">
        <li>Brasil</li>
        <li>Portugal</li>
        <li>Angola</li>
      </ol>
    </div>
  </body>
</html>

Os seguintes elementos pertencem ao conteúdo do fluxo, mas somente se uma condição específica for atendida:

  • <area> , somente dentro de <mapa>,
  • <link> , somente se o atributo itemprop for especificado,
  • <meta> , somente se o atributo itemprop for especificado,
  • <style> , somente se o atributo com escopo for especificado.

Conteúdo de seccionamento

Os elementos pertencentes ao conteúdo de seccionamento são aqueles que criam seções independentes na estrutura de um documento HTML (por exemplo, cabeçalho, rodapé, etc.). Observe que cada seção pode ter seu cabeçalho e contorno.

Os elementos do modelo de conteúdo de seccionamento são: <article> , <aside> , <nav> e <section> .

Exemplo de elementos pertencentes ao conteúdo de seccionamento:

<!DOCTYPE html>
<html>
  <head>
    <title>Titulo deste documento</title>
  </head>
  <body>
    <section>
      <h1>Artigo sobre HTML5</h1>
      <article>
        <h2>Roses</h2>
        <p>HTML5 - A versão mais recente do código: HyperText Markup Language, também conhecido como Linguagem de Marcação de Hipertexto. É fundamental para a internet.
Originalmente proposto por Opera Software. É a quinta versão da linguagem HTML.
        </p>
      </article>
    </section>
  </body>
</html>

Conteúdo do título

Os elementos pertencentes ao modelo de conteúdo de seção criam uma seção na estrutura de tópicos atual que define o escopo dos elementos <header>, elementos <footer> e conteúdo do cabeçalho.

Os elementos do conteúdo do cabeçalho são: <h1> , <h2> , <h3> , <h4> , <h5> , <h6> e <hgroup> .

Exemplo de elementos pertencentes ao conteúdo do título:

<!DOCTYPE html>
<html>
  <head>
    <title>Titulo deste documento</title>
  </head>
  <body>
    <hgroup>
      <h1>Bem vindo à BelmiteSD</h1>
      <h2>Nos artigos sibre HTML5 você aprenderá a base desta incrível tecnologia.</h2>
      <h3>Aqui pode conter um texto ou subtítulo.<h3>
    </hgroup>
  </body>
</html>

Conteúdo Fraseado

Os elementos pertencentes ao conteúdo da frase definem e marcam o texto. Eles são <abbr> , <audio> , <b> , <bdo> , <br> , <button> , <canvas> , <cite> , <code> , <command> , <data> , <datalist> , <dfn> , <em> , <embed> , <i> , <iframe> , <img> , <input> , <kbd> , , <math>, <meter> , <noscript> , <object> , <output> , <progress> , <q> , <ruby> , <samp> , <script> , <select> , <small> <span > , <strong> , <sub> , <sup> , <svg> , <textarea> , <time> , <var> , <video> e <wbr> .

Exemplo de elementos pertencentes ao conteúdo do fraseado:

<!DOCTYPE html>
<html>
  <head>
    <title>Titulo deste documento</title>
  </head>
  <body>
    <h1>Exemplo com tags HTML</h1>
    <p>
      Aqui um texto simples <sub> usando a tag sup</sub>.
    </p>
    <p>A tag <sup> é usada para definir um texto sobrescrito ...</p>
    <p>O texto aparece meio caractere acima da linha regular...</p>
    <p>é renderizado menor que o restante do texto...</p>
    <p>A tag é comumente usada para definir notas de rodapé e fórmulas...</p>
    <p>Você deve usar a tag <sup> apenas por motivos tipográficos. Não deve ser usado para fins de estilo. Se você deseja alterar a posição vertical de um texto, pode usar a propriedade CSS vertical-align com o valor "super"...</p>
  </body>
</html>

Os seguintes elementos pertencem ao conteúdo da frase, mas somente se uma condição específica for atendida:

  • <a> , se contiver apenas conteúdo de frase,
  • <area> apenas dentro do elemento <map> ,
  • <del> , se contiver apenas conteúdo de frase,
  • <ins> , se contiver apenas conteúdo de frase,
  • <link> se o atributo itemprop for especificado,
  • <map> , se contiver apenas conteúdo de frase,
  • <meta> se o atributo itemprop for especificado.

Conteúdo incorporado

O conteúdo incorporado importa outro recurso ou insere conteúdo de outra linguagem de marcação ou namespace no documento. Este modelo de conteúdo inclui os seguintes elementos: <audio> , <canvas> , <embed> , <iframe> , <img> , <math>, <object> , <picture> , <svg> e <video> .

Exemplos de elementos pertencentes ao conteúdo incorporado:

<!DOCTYPE html>
<html>
  <head>
    <title>Titulo deste documento</title>
  </head>
  <body>
    <h1>Exemplos de elementos HTML:</h1>
    <h2>Exemplo HTML&lt;canvas&gt; tag:</h2>
    <canvas id="canvasExample" width="400" height="200"></canvas>
    <script>
      var canvas = document.getElementById('canvasExample');
      var context = canvas.getContext('2d');
       context.font = '30pt Calibri';
       context.fillStyle = '#1c87c9';
       context.fillText('Exempos de Canvas !', 50, 100);
    </script>
    <h2>Exemplo de HTML&lt;img&gt; tag:</h2>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
    <h2>Exemplo de HTML&lt;svg&gt; tag:</h2>
    <svg width="350" height="150">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#32ff00" />
    </svg>
    <br/>
  </body>
</html>

Conteúdo interativo

O modelo de conteúdo interativo inclui elementos projetados especificamente para interação do usuário. Eles são <a> (se o atributo href for especificado), <button> , <details> , <embed> , <iframe> , <keygen> , <label> , <select> e <textarea> .

Exemplo de elementos pertencentes ao conteúdo interativo:

<!DOCTYPE html>
<html>
  <head>
    <title>Titulo deste documento</title>
  </head>
  <body>
    <h1>Exemplo de conteúdo interativo</h1>
    <form>
      <select>
        <option value="flutter">Flutter</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
      <br><br>
      <textarea name="comment" rows="12" cols="35">Envie seu comentário sobre este artigo.</textarea>
      <br>
      <button type="button">Enviar</button>
    </form>
  </body>
</html>

Os seguintes elementos pertencem ao modelo de conteúdo interativo, mas somente se uma condição específica for atendida:

  • <audio> , se o atributo de controles for especificado,
  • <img> , se o atributo usemap for especificado,
  • <input> , se o atributo type não estiver oculto,
  • <menu> , se o valor do atributo type for “toolbar”,
  • <object> , se o atributo usemap for especificado,
  • <video> , se o atributo de controles for especificado.

Conteúdo palpável

O conteúdo é palpável quando não está vazio nem oculto; este é o conteúdo que é apresentado e é substantivo. Os elementos cujo modelo é conteúdo de fluxo ou conteúdo de frase devem ter pelo menos um nó que seja palpável e que não possua nenhum atributo cujo valor esteja definido como oculto.

Esta não é uma condição obrigatória; há casos em que o elemento pode estar vazio. Por exemplo, pode ser preenchido após a execução de um script externo.

As categorias de conteúdo secundário

As categorias de conteúdo secundário são aquelas que suportam scripts. Os elementos de suporte de script não contribuem diretamente para a saída renderizada de um documento, mas suportam scripts, seja contendo ou especificando código de script diretamente ou especificando dados que serão usados ​​por scripts. Os elementos de suporte de script são <script> e <template> . Os elementos <blockquote> , <body> , <details> , <dialog> , <fieldset> , <figure> e <td> são chamados de raízes de seccionamento. Os elementos pertencentes ao modelo de conteúdo transparente são <a> , <canvas> , <del> , <ins> , <map> , <object> e <video> . Esses elementos herdam o tipo do elemento pai e podem conter o conteúdo permitido em seu elemento pai.

Bem, este foi um breve resumo sobre o HTML5. Há muito o que aprender sobre essa incrível ferramente usada em toda a web. Siga aprendendo e crescendo. Vamos adiante!

Você achou esse artigo útil?


Artigos relacionados