HTML5 - Elementos Semanticos

Disclaimer: This post is in Brazilian Portuguese 🇧🇷

Agora que você decidiu aprender programação, você escutará e lerá bastante o termo boa prática, exercida pelo mercado e pela comunidade a fim de organizar o código e deixar mais legível para quem for fazer a manutenção depois.

Embora HTML não seja uma linguagem de programação(Linguagem de Marcação de Hipertexto), e sim uma linguagem de marcação, ela éfundamental para o funcionamento da WEB como conhecemos hoje.

Uma boa prática de programação é separar a estrutura (HTML), estilo (CSS) e comportamento (JavaScript).

vantagens가 HTML semântico를 수행하는 것처럼:

통역사

Melhoria na qualidade de SEO do site(posicionamento em sites de pesquisa)

Melhor entendimento para leitores de acessibilidade

컴퓨터로 이해하기 쉬운 것

Anatomia de uma 페이지 HTML5

<!DOCTYPE html>
<html>
  <head>
        <meta charset="utf-8">
    <title>Titulo da Pagina</title>
  </head>
  <body>
        <!--No header fica o cabeçalho do site -->
    <header></header>

        <!-- Na main fica o conteúdo da página -->
        <main>

            <section>
                <article>
                    <figure>
                        <img>
                        <figcaption></figcaption>
                    </figure>
                </article>
            </section>

        </main>

        <!-- No footer fica o rodapé da página -->
        <footer>&copy; Direitos reservados</footer>
  </body>
</html>

Anatomia de uma página sem HTML semântico

<!DOCTYPE html>
<html>
  <head>
        <meta charset="utf-8">
    <title>Titulo da Pagina</title>
  </head>
  <body>
        <div id="header"></div>
        <div id="main">
                <div class="section">
                <div class="article">
                    <div class="figure">
                        <img>
                        <div class="figcaption"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer"></div>
    </body>
</html>

Qual é mais fácil de ler?

No HTML semântico temos um código mais consistente, o que é diferente quando estamos colocando divs em todos os lugares da página, sem saber qual elemento está fechando quem ou o que. Além de melhorar profundamente acessibilidade do site.

Isso quer dizer que o div não deve ser utilizado? 나오. Embora não possua valor semântico, pode ser utilizado e ter outros fins.

Lembre-se que quando você estiver desenvolvendo sua página HTML ela poderá ser visualizada por pessoas com diminuição de alguma capacidade, é seu papel trabalhar e atuar com a universalização do acesso e a garantia de abranger o maior número possível do público.

Todos tem direito a consumir conteúdo de qualidade e cabe a você proportcionar uma estrutura bem organizada e coesa.

HTML5를 수행하는 Elementos semanticos

헤더

Geralmente é encontrado no topo da página, é onde conterá o cabeçalho da sua página, com a logo e o sistema de navegação.

<header>
    <h1>Marca</h1>
    <ul>
        <li><a href="#">Index</a></li>
        <li><a href="/projetos">Projetos</a></li>
        <li><a href="/sobre">Sobre</a></li>
    </ul>
</header>

메인

페이지의 교장을 정의하십시오.

Aqui tudo que for referente ao conteúdo da sua página, se você estiver desenvolvendo um 포트폴리오, ficará a descrição sobre você, seus projetos, sua página de sobre.

바닥글

Geralmente encontrado ao final da página, or rodapé. É onde, normalmente, se encontram as informações legais, detalhes do autor.

섹션 e 기사

마지막으로 다른 점은 무엇입니까? 품질이 좋은가요?

Ambos são usados para definir o espaço de um conteúdo, podendo ser usados de forma intercalada sem mudança aparente no site. Eles surgiram com o HTML5 para substituir o div .

Uma boa regra que você pode pensar na hora de aplicar, é:

기사, 독립 및 재활용(caixas em azul).

섹션, servem como temas para um conteúdo(caixa em vermelho).

E os outros elementos?

Recomendo uma lida noMDN que trará descrições sobre o nav, side de forma mais clara, assim como os elementos strong, small, mark que sãofundamentais para uma boa acessibilidade ao site que você estiver desenvolvendo.

아테 마이스

Essa foi uma introdução sobre elementos semânticos, em breve volto com um novo post sobre elementos não-semanticos.

Reference

이 문제에 관하여(HTML5 - Elementos Semanticos), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mathsort/html5-semantico-48nm

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)