Clicando na <li> o link <a> também funcionar

[lucascal 0]

Bom dia galera!

 

Sempre tenho essa dúvida, olhem só:

 

Tenho um menu, com ul e li:

 

<ul>
  <li><a href="/inicio">Inicio</a></li>
  <li><a href="/sobre">Sobre</a></li>
  <li><a href="/contato">Contato</a></li>
</ul>

Como faço, pra que, quando eu posicionar ou clicar na li  o link do a funcionar? Porque, por exemplo, só funciona se eu clicar no a, mas, se eu clicar fora, no caso, na li, não funciona, o a não ativa

[AlphaDev 4]

<

[Gabriel Heming 766]

@Renan Cardoso isso deixará o HTML inválido.

 

Mude o CSS do link (tag <a>) para que ele utilize todo o espaço do <li>. Somente é importante mudar o display da tag <a> para block. Assim seria o básico:

a {
    display: block;
    height: 100%;
    width: 100%;
}

 

[lucascal 0]

Como assim inválido, Gabriel? Pode explicar?

[Gabriel Heming 766]

Todo elementos HTML do tipo node (do tipo nó, que podem possuir outros elementos internos) possuem uma lista de elementos que são permitidos diretamente dentro deles.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

Permitted content - zero or more <li> elements, which in turn often contain nested <ol> or <ul> elements.
 

Ou seja, somente pode ser permitido elementos do tipo <li> e, por sua vez, elementos <li> só podem estar dentro de elementos <ol> ou <ul>.

 

O <li>, por sua vez, possui uma lista mais abrangente de elementos permitidos, por isso não há problema nenhum em colocar a tag <a> diretamente dentro dele:

Permitted content - Flow content.

 

Flow content:

Citar

Elements belonging to the flow content category typically contain text or embedded content. They are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and Text.

 

 

Tudo que for diferente das regras, deixa o HTML inválido. O HTML não estando válido, seu site terá problemas de renderização em diversos navegadores.

 

Alguns navegadores tendem a corrigir automaticamente esses erros, mas outros não. Essa é uma questão história por falta de padronização que ocorreu principalmente com o HTML 3 (onde a "zueira não tinha limites"). Com o HTML 4 surgiu o xHTML, que era uma forma mais rígida de construir o HTML. O HTML 5 abrangeu mais essa questão.

 

Os navegadores ainda corrigem certas situações por causa da retrocompatibilidade. Por outro lado, search engines tendem a ignorar sites inválidos.

[lucascal 0]

Muito obrigado, Gabriel! Ótimo dia pra você!