HTML Semântico: O que você tem a ver com isso?

Sempre ouvimos falar que ter um site semanticamente organizado é bom, mas por que isso é verdade? Nessa talk veremos quais os benefícios reais que podemos ter com isso, e como podemos otimizar nosso HTML para alcançar tais benefícios.

Talk apresentada no Meetup HTML-SP.

Transcript

1. HTML SEMÂNTICO: O QUE VOCÊ TEM A VER COM ISSO?
2. <h1>?
3. COMO SURGIU O HTML? HyperText Markup Language ou (linguagem de marcação de hipertexto) - Pensada como meio de organizar e acessar informações e dados de pesquisas; No começo da web (1989): - Pesquisas tinham referências entre si; - Hypertext? SGML?
4. COMO SURGIU O HTML? SGML
5. COMO SURGIU O HTML? HTML
6. <aside> <figcaption> <nav> <footer> <article> <figure> <mark> <time> <section> <header> <main> <div> <fieldset> <legend> <abbr> <address> <dfn> <details> <area> <data> <dialog> <audio> <progress> <datalist> <ins> <kbd> <bdi> <code> <track> <bdo> <cite> <video> <caption> <summary>
7. Com toda a certeza! É possível fazer um site usando apenas a tag <div>?
8. É bom fazer um site usando apenas a tag <div>? Provavelmente… não.
9. AFFORDANCES O QUE SÃO AFFORDANCES? ▸ Affordance é uma característica de um objeto que sinaliza como o objeto pode ser utilizado pelo usuário.
10. AFFORDANCES O QUE SÃO AFFORDANCES? ▸ Affordance é uma característica de um objeto que sinaliza como o objeto pode ser utilizado pelo usuário.
11. AFFORDANCES AFFORDANCES EM INTERFACES ▸ Affordances representam ações que podemos realizar com os elementos. ▸ Podem ser ambíguas por não haver um objeto físico com o qual interagir.
12. AFFORDANCES AFFORDANCES EM INTERFACES ▸ Identificamos o contexto de uso porque podemos ver esses elementos. ▸ Definição não visual de uma affordance é chamada de semântica.
13. AFFORDANCES AFFORDANCES EM INTERFACES ▸ Identificamos o contexto de uso porque podemos ver esses elementos. ▸ Definição não visual de uma affordance é chamada de semântica. Por favor, não faça isso!
14. SEMÂNTICA HTML SEMÂNTICO? ▸ Elementos (tags) que têm, de fato, um significado específico e relevante. <button> um elemento que fará alguma ação ao ser clicado. <div> significa apenas uma divisão no HTML, não adiciona significado ao conteúdo.
15. SEMÂNTICA HTML SEMÂNTICO? ▸ Elementos (tags) que têm, de fato, um significado específico e relevante. <nav> representa um elemento de navegação (menu, paginação, etc) <div> significa apenas uma divisão no HTML, não adiciona significado ao conteúdo.
16. SEMÂNTICA HTML SEMÂNTICO? ▸ Elementos (tags) que têm, de fato, um significado específico e relevante. <aside> um bloco que é relacionado ao conteúdo principal, mas não faz parte dele. <div> significa apenas uma divisão no HTML, não adiciona significado ao conteúdo.
17. SEMÂNTICA HTML SEMÂNTICO? ▸ Facilita a manutenção e compreensão do documento; ▸ Indica como programas de leitura de sites utilizados por deficientes visuais devem interpretar o conteúdo; ▸ Facilita o reconhecimento de informações e relevância do conteúdo por robôs de busca que fazem a indexação da sua página.
18. Três coelhos com uma cajadada só! É por isso que importa!
19. E AÍ? LINKS RECOMENDADOS A importância da semântica no HTML - parte I Semântica, padrões e o que você tem a ver com isto HTMLreference.io Como aplicar semântica e acessibilidade ao projeto? Curso Web Accessibility - Udacity
20. E AÍ? OBRIGADA! @_JHorse nayara.me