2

Bom dia a todos.

Estou dando uma estudada em semântica do html5 e acabei ficando com um nó na cabeça...

Gostaria de saber se estou aplicando corretamente a semântica.

  footer {
    position: relative;
    bottom: 0;
    width: 100%;
    background-color: #34495e;
    color: white;
  }

  .m5 {
    margin: 25px 0 25px 0;
  }

  .he1 {
    height: 100px;
  }

  .text-blue {
    color: #016bae;
  }

  .bg-blue {
    background-color: #2980b9;
  }

  .bg-orange {
    background-color: #f39c12;
  }

  footer p {
    height: 13px;
    color: white !important;
  }

  footer p a {
    color: white !important;
  }

  .menu-recursos {
    margin: 0;
    padding: 0;
    list-style-type: none !important;
  }

  .menu-recursos li a {
    position: relative;
    display: block;
    padding: 12px 20px;
    border: 1px solid transparent;
    color: #333;
    border-width: 1px 1px 0px 0px;
    border-style: solid;
    border-color: #d2d2d2;
    font-size: 15px;
  }

  .list-group-item {
    border-left: 0px !important;
  }

  .list-group a h2 {
    font-size: medium !important;
    font-weight: normal !important;
  }

  .list-group-item.active {
    background-color: #3498db !important;
    border-color: #3498db !important;
  }

  a.navbar-brand h1 {
    font-size: 0;
  }

  .row.titulo {
    background-color: #3498db;
    color: #FFF;
    padding-top: 8px;
  }

  h1.head {
    font-size: 0;
    margin: 0;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<?php include 'config.php'; ?>

<!doctype html>
<html lang="pt-br">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <?php include 'inc_head.php'; ?>

  <title>Sobre a empresa 7Carros - 7Carros</title>
</head>

<body>

  <header>
    <h1 class="head">Sobre a empresa 7Carros</h1>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">
            <img src="<?= $site; ?>/imagens/logo.png" width="" height="75" title="Sistema para locadora de veículos" alt="[Sistema para locadora de veículos]">
            <h1>Sistema para locadora de veículos</h1>
          </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

        <div class="collapse navbar-collapse d-lg-flex justify-content-end" id="navbarSupportedContent">
          <ul class="navbar-nav nav-pills">
            <li class="nav-item active"><a class="nav-link" href="<?= $site; ?>" title="Sistema para locadora de veículos">Inicio</a></li>
            <li class="nav-item"><a class="nav-link" href="<?= $site; ?>/empresa" title="Sobre o sistema de locadora de veíclulos">A empresa</a></li>
            <li class="nav-item"><a class="nav-link" href="<?= $site; ?>/recursos" title="Recursos do sistema de locadora de veículos">Recursos</a></li>
            <li class="nav-item"><a class="nav-link" href="<?= $site; ?>/planos" title="Planos do sistema de locadora de veículos">Planos</a></li>
            <li class="nav-item"><a class="nav-link" href="<?= $site; ?>/contato" title="Contato com 7Carros">Contato</a></li>
            <li class="nav-item"><a class="nav-link" href="https://painel.7carros.com.br" rel="nofollow" title="Acessar sistema 7Carros">Painel</a></li>
          </ul>
        </div>

      </div>
    </nav>

  </header>

  <main>
    <div class="row titulo">
      <div class="container">
        <div class="mb-3 text-right">
          <h1>Sobre a empresa 7Carros</h1>
        </div>
      </div>
    </div>

    <article>
      <div class="container">
        <div class="mb-3"></div>
        <div class="row">
          <div class="col-sm">
            <figure>
              <img src="imagens/hostcia.png" class="float-right" alt="A empresa">
            </figure>
          </div>
          <div class="col-sm">
            <p class="tagline">O sistema 7Carros iniciou em agosto de 2012. Vimos que os sistemas atuais era feito com tecnologias defasadas e que não existia possibilidades de expansão. <br><br> Pensando iniciamos desenvolvimento e focamos no constante aperfeisoamento
              do sistema, na segurança dos dados, rapidez no processamento e facilidade na visualização dos comandos. <br><br> Nosso sistema conseguiu simplificar os processos ao mesmo tempo alto controle das informações.<br><br> Temos um compromisso
              com nossos clientes em que estaremos em constantes aperfeisoamento.</p>
          </div>
        </div>


        <div class="p-5"></div>
      </div>
    </article>
  </main>




  <footer class="footer mt-auto py-3">
    <div class="container">
      <div class="row">
        <div class="col-sm-3">
          <div class="row">
            <img src="./imagens/logo.png" alt="Logo" width="100">
          </div>
          <div class="row">
            <h1 class="small">Solução completa para locadora de veículos</h1>
          </div>
        </div>

        <div class="col-sm-3">
          <h5><strong>Menu</strong></h5>
          <p>- <a href="#">Inicio</a></p>
          <p>- <a href="#">A empresa</a></p>
          <p>- <a href="#">Recursos</a></p>
          <p>- <a href="#">Planos</a></p>
          <p>- <a href="#">Contato</a></p>
          <p>- <a href="#">Painel</a></p>
        </div>

        <div class="col-sm-3">
          <h5><strong>Recursos</strong></h5>
        </div>

        <div class="col-sm-3">
          <h5><strong>Rede social</strong></h5>
          <p> <a href="#"><i class="fa fa-facebook-official"></i> Facebook</a></p>
          <p> <a href="#"><i class="fa fa-twitter"></i> Twitter</a></p>
          <p> <a href="#"><i class="fa fa-youtube-play"></i> Youtube</a></p>
        </div>
      </div>
    </div>

  </footer>
</body>

</html>

inserir a descrição da imagem aqui

4
  • 1
    bom dia, a primeira coisa que eu recomendaria é não usar o php assim, você irá gastar bastante recurso do seu servidor web e se pagar por recurso, ficará bem caro, a segunda é, da para dar uma guaribada no seu css, uma boa forma de estudar isso é usando um manual de alguma biblioteca/framework famosa como o less/sass, por exemplo, margem você faz assim .mt-1, mr-1, mb-1 e ml-1 e a mesma teoria com padding, height e width, já no html, a ordem está de boa
    – flourigh
    27/11/2019 às 9:00
  • @flourigh Obrigado. Tentei estudar Laravel, mas achei tão complicado, da tanta volta para criar uma coisa simples...rs
    – Tiago
    27/11/2019 às 9:21
  • Já ouviu falar sobre outline do HTML?
    – Woss
    27/11/2019 às 9:58
  • 1
    @Tiago o Laravel na primeira olhada é bem complicado mesmo mas para servir a API você pode usar vários outros recursos comp o próprio NodeJS para APIs mas o Laravel com Lumen também é bem legal
    – flourigh
    27/11/2019 às 11:30

1 Resposta 1

1

Sobre o CSS

Primeiro CSS não faz semântica, CSS pode ajudar ou atrapalhar a Acessibilidade, são coisas diferentes. Por exemplo vc usou font-size: 0, isso não é recomendado!

Ao que me parece vc está usando Bootstrap e o Bootstrap tem uma classe exclusiva para "esconder" o texto da tela, mas deixar acessível para os Screen Reades, e o nome da clase é sr-only :D https://v4-alpha.getbootstrap.com/getting-started/accessibility/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Repare que no CSS acima não tem font-size, display: none, opacity e coisas que poderia fazer os leitores de tela não enxergarem o texto.


Agora falando de HTML

Existem vários detalhes no código, vc pode começas validando o código no validados da W3C e de cara ele já deu duas sugestões semânticas.

Aqui vc tem dois warning, um sobre uma <article> que está sem header, no caso eles indicam que todo article precisa de uma tag de título <h 1,2,3,4,5,6> dentro.

E o <h1> é um elemento de alta hierarquia, "top level" e acredito não ser indicado estar dentro de um link, o link deveria estar dentro o h1, tipo assim h1 > a aqui tem um artigo sobre isso, mas não é conclusivo rss, afinal isso é só uma "sugestão" da W3C https://css-tricks.com/link-header-header-link/

Validado W3C https://validator.w3.org/nu/#textarea

inserir a descrição da imagem aqui

Repare que mesmo usando as classes do Bootstrap vc não é obrigado a usar <div> para declarar uma row, vc pode colocar a classe row em uma <section> sem problemas!

Isso:

  <main>
    <div class="row titulo">
      ....

Poderia ser isso:

  <main>
    <section class="row titulo">
      ....

E a tag <figure> normalmente é usada quando vc tem uma figura que faz parte de um contexto mas vc quer mostra-la fora do fluxo normal do conteúdo. Recomendo que leia isso para entender melhor Qual é a relação da tag <figure> com o fluxo principal no HTML?

Outra coisa, vc pode ter quantas <nav> quiser ou precisar em um mesmo documento, diferente da tag <main> vc pode ter várias <nav> em uma só página. Então aqui vc poderia por exemplo fazer

<div class="col-sm-3">
  <h5><strong>Menu</strong></h5>
  <nav>
    <p>- <a href="#">Inicio</a></p>
    <p>- <a href="#">A empresa</a></p>
    <p>- <a href="#">Recursos</a></p>
    <p>- <a href="#">Planos</a></p>
    <p>- <a href="#">Contato</a></p>
    <p>- <a href="#">Painel</a></p>
  </nav>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .