Tags Estruturais [HTML][Aula 03]

<!DOCUMENT html>
<html>
  <head>  <!-- Tags Comuns  -->
    <meta charset="utf-8" />
    <meta name="author" content="Henrique Silva" />
    <meta name="keywords" content="HTML5,WEB,INTERNET" />
    <meta name="description" content="Estrutura básica do html5." />
    <title> Aula 03 - Tags Estruturais </title>
  </head>

  <body>
    <!-- Tags Espcificos -->

    <header> <!-- utilizado para criar um cabeçalho contextual para a página, secções, articles, etc..
                  delimitando titulos ou menus, funciona de forma semelhante ao hgroup no entanto não é obrigatório -->
      <nav> <!-- Utilizado para definir areas de menus  -->

        <ul> <!-- Define uma lista de itens, nesse caso uso como uma lista de links, mais detalhes proxima aula  -->

          <li> <!-- li é a cada elemento individual da lista  -->
            <a href="#"> Página Inicial </a> <!-- esta tag é a que cria o link, com o nome e a url de destino  -->
          </li>

          <li> <a href="#link"> Link de Exemplo </a> </li>
        </ul>
      </nav>
    </header>

     <!--
      Este elemento cria um bloco para conteudos ou funcionalidades extras no
      site, como exemplo, uma coluna lateral onde ficam propagandas, imagens,
      menus,formulários para pesquisa entre outros.
      -->
    <aside>
      <h1>Estude! Estudar faz bem :D</h1>
      <a href="#estude.html">Link para Estudar</a>
    </aside>

    <!--
      Tags de Títulos as tags h1 á h6 são para titulo, sendo
      h1 a maior e h6 a menor, no marketing digital existe algo
      chamando relevancia de tag, onde h1 tem maior relanvancia que h2,
      h2 que h3 e assim por diante.
    -->

      <h1>O Maior Titulo e o mais relevante</h1>
      <h2>Começou a diminuir!</h1>
      <h3>Não leia o ultimo titulo</h1>
      <h4>você está perto do ultimo titulo, não leia!</h1>
      <h5>tem certeza que irá ler ?</h1>
      <h6>Seu curioso eu já disse para não ler!</h1>

      <hr /> <!-- hr é uma linha horizontal para separar conteudos -->

      <pre> <!-- exibe o conteudo na forma que foi escrito -->
        Primeira linha
          Segunda Linha, repare que não precisarei usar alguma tag para mudar de linha
              Terceira linha, agora fiz com tabulação
      </pre>

      <!-- blockquote é uma area para citações -->
      <blockquote cite="link da referencia">
       <p> Estou citando alguma coisa aquii!</p>
      </blockquote>

      <!--
        DIV é uma tag para conteúdos diversos como texto, imagens, links, etc.
        é normalmente utilizada para estruturar o layout do site, em linhas,
        colunas ou seções por exemplo.
      -->
      <div>
        Conteúdo diversos, posso fazer muitas coisas essa tag DIV.
      </div>

      <figure><!-- elemento para definir informações sobre uma imagem -->
        <figcaption>Titulo de uma imagem</figcaption>
        <!--
          img é a tag que insere uma imagem na página, src é o atributo
          do endereço da imagen, e alt um texto para caso a imagem não possa
          ser carregada
        -->
        <img src="linha da imagem" alt="texto alternativo, para caso a imagem nao possa ser exibida">
      </figure>

    <article> <!-- Define um area para um artigo do site -->

      <hgroup> <!-- Agrupamento do titulo e subtitulo -->
        <h1>Título do Artigo</h1>
        <h2>Subtitulo do Artigo</h2>
      </hgroup>

      <p>Esta é uma tag de paragrafo! para descrição do artigo</p>

      <section><!-- Define uma seção de algum assunto dentro do artigo -->
        <h1>Título do Assunto 1</h1>
        <p>Texto sobre o assunto 1</h1>
      </section>

      <section>
        <h1>Título do Assunto 2</h1>
        <p>Texto sobre o assunto 2</h1>
        <footer>
          <p>
            <a href="http://url_de_exemplo.com.br">Mais Informações</a>
          </p>
        </footer>
      </section>
    </article>

    <!--
      FOOTER
      Usada para o rodape da paágina, de secções ou de articles,
      irá depender do contexto de utilização, ele pode ser usado para
      diversas finalidades, a principal é reunir informações sobre o
      conteudo que ela referencia, por exemplo a autoria e criação do site
    -->
    <footer>
      <p>Copyright 2017 - Henrique Silva</p>
    </footer>

  </body>
</html>