Rafaela Ferro - Nest SI 20
HTML é fácil
e Indulgente
HTML é a parte mais importante de uma página Web
HTML é…
Estrutura.
SIGNIFICADO.
HIERARQUIA.
Estrutura.
<header> <main> <footer> <section> <aside> <nav>
!= <div>
<button> <a> <input> <select> <textarea>
!= <div> <span>
SIGNIFICADO.
<h1 - 6> <p> <ul> <ol> <label>
!= <div> <span>
HIERARQUIA.
<div class="container" id="header">
<div class="header header-main">Super duper best blog ever</div>
<div class="site-navigation">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</div>
</div>
<div class="container" id="main">
<div class="article-header-level-1">
Why you should buy more cheeses than you currently do
</div>
<div class="article-content">
<div class="article-section">
<div class="article-header-level-2">
Part 1: Variety is spicy
</div>
</div>
<div class="article-section">
<div class="article-header-level-2">
Part 2: Cows are great
</div>
</div>
</div>
</div>
<div class="container" id="footer">
Contact us!
<div class="contact-info">
<p class="email">
<a href="mailto:us@example.com">us@example.com</a>
</p>
<div class="street-address">
<p>123 Main St., Suite 404</p>
<p>Yourtown, AK, 12345</p>
<p>United States of America</p>
</div>
</div>
</div>
<header>
<h1>Super duper best blog ever</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</nav>
</header>
<main>
<article>
<header>
<h1>Why you should buy more cheeses than you currently do</h1>
</header>
<section>
<header>
<h2>Part 1: Variety is spicy</h2>
</header>
</section>
<section>
<header>
<h2>Part 2: Cows are great</h2>
</header>
</section>
</article>
</main>
<footer>
<section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
<h2>Contact us!</h2>
<address property="email">
<a href="mailto:us@example.com">us@example.com</a>
</address>
<address property="address" typeof="PostalAddress">
<p property="streetAddress">123 Main St., Suite 404</p>
<p>
<span property="addressLocality">Yourtown</span>,
<span property="addressRegion">AK</span>,
<span property="postalCode">12345</span>
</p>
<p property="addressCountry">United States of America</p>
</address>
</section>
</footer>
Erros comuns
Usar <div> e <span> para elementos interativos
Não adicionar o atributo alt nas imagens
Usar <h> em elementos por terem um elevado font-size
Escrever maiúsculas no HTML sem ser em siglas/acrónimos
🙅♀️👎
Adicionar elementos desnecessários
Vantagens práticas
Acessibilidade.
"Using HTML as intended helps create webpages that are understood by a wide range technologies for a wide range of people in a wide range of circumstances."
@ Mandy Kerr
Performance.
Elementos nativos vêm com muita funcionalidade gratuita. Precisam de menos HTML, CSS e JS.
- Atributos
- Interação com teclado
- Validações
- …
Performance.
Recomendações da Google:
- Menos de 1500 nodes.
- Max depth de 32 nodes.
- Cada parent node não ter mais de 60 child nodes.
Manutenção.
Um código com boas práticas é mais fácil de ler e manter, de introduzir a novos membros.
Semantic HTML — 2020
By Ana Rafaela Ferro
Semantic HTML — 2020
- 1,682