Boas práticas para escrever um HTML profissional - Root #26

👩‍💻 Reunimos dicas de boas práticas para você seguir e usar na hora de escrever seu HTML, para que tenha um resultado profissional.
Junto com nosso educador Mayk Brito vamos conhecer habilidades e comportamentos que vão melhorar seu código, incluindo dicas de como escrever melhor seu HTML ou como funciona um HTML mais semântico, como criar páginas com melhores resultados nas páginas de busca do Google (SEO) e com melhor acessibilidade para os usuários.
💻 Acesse a página da aula no Notion:
maykbrito.notion.site/Boas-pr...
✅ Melhores vídeos relacionados com esse:
✅ Dicas para praticar e evoluir na programação web
• Dicas para praticar e ...
✅ Como organizar um cronograma de estudos de programação com Notion?
• Como organizar um cron...
✅ JAVASCRIPT: Vamos construir um WEB Component e aprender Shadow DOM
• JAVASCRIPT: Vamos cons...
✅ Embarque agora no Discover e melhore suas habilidades como profissional WEB
rocketseat.com.br/discover
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial
Linkedin: @rocketseat
Nos ouça também no Spotify:
- Podcast Faladev

[@leo1200012]

Pesquisei o que o Mayk comentou no vídeo e pra quem ficou com curiosidade: a diferença é que o atributo *defer* faz com que o script da página seja baixado paralelamente ao parsing da página e é executado somente após o fim deste processo, o *async* também faz o download do script junto com o parsing, mas é executado assim que possível.

[@ThiagoLucioBittencourt]

Um fato importante é que o defer informa que a montagem da DOM tem prioridade na execução em relação ao arquivo que contém o defer declarado.

[@thaleshenrique8616]

Ensinou em meia hora o que uma faculdade não ensina em 1 mês. Muito bom

[@BichinhoInflavioo]

Maikão sempre dando show nas aulas. Amo a leveza que ele ensina. Sou aluna no Discovery e super recomendo!

[@elenilsonmaciel]

Como sempre, Maikão dando um shoe de aula e dicas legais para iniciantes como eu. Parabéns!

[@dev.oliveira]

Didática impecável e um show de aula, obrigado professor.

[@meticuloso1000]

PARABÉNS MAIK PELA EXCELÊNCIA DE AULA EM HTML SHOW DEMAIS MESMO !!!

[@eduardohenriquedeassis9729]

Este canal é sensacional!!! Ou melhor ainda, é supimpa!!!

[@volneialvesoficial]

Grande MaykBrito, sempre com conteúdo de muita qualidade

[@acm.marques]

Muito bom Mayk Brito e eu já trabalho com desenvolvimento há 8 anos e algumas coisas eu já aprendi a fazer correto. LightHouse é uma mão na roda. Top D+

[@marcusduarte6543]

Maykão é excelente! Obrigado por mais essa aula.

[@alineeisraelporai]

Excelente vídeo! Vou começar a utilizar o Lighthouse e medir mais os desempenhos das minhas aplicações, show!

[@carlosamorim94]

Booooooooooooooooa Mayk! Já estou modificando alguns projetinhos meus com base no que vc ensinou! Obrigado!

[@marcelusmeridius]

Grande Mayk. Didática 100% !

[@julianabasilio3]

Vídeo sensacional. Obrigada Maik!

[@anapaulaalmeidapinheiromor3542]

Excelente video. Parabéns rocket, o Mayk dando show como sempre!

[@MateusNeryDurt]

exatamente o que eu estava procurando, agora so falta boas praticas no CSS :)

[@enzocasamasso1606]

Que didática incrível!

[@thescriptkiddie]

Gosto muito da didática do Mayk, tamo junto

[@guilhermecacador3607]

Muito fera, parabens pelo conteúdo, ces sao brabo!

[@robertofilho7932]

Top. Didática sensacional. Aprendizado constante 🎉

[@jorgebarboza290]

Parabéns pelo vídeo, foi muito didático e explicativo.

[@jair-araujo]

Maykão top o vídeo, trás sim um vídeo sobre Gulp e Webpack se possível também... Vou curtir muito o conteúdo, como desse vídeo aqui... vlw um forte abraço!!!

[@RenanVital]

Vídeo top Maykão, mandou ver!

[@adrianosantos9908]

Incrível 👏👏👏👏

[@andrelima8462]

Boa mayk, sensacional!!!

[@richardparkson9053]

Essa última dica foi ótimo, obrigado professor !! 👏

[@luispaulocavalcante1459]

Que aula meus amigos, que aula!

[@lucascavalcante2053]

Ótimo video Mayk, como sempre! Traz um vídeo sobre Gulp e Webpack

[@eudanielsilveira]

Excelente conteúdo Maikao! Abraço!

[@edsonhh]

Totalmente excelente!

[@jacquelinesantos773]

Mais uma excelente aula 😄

[@lucasmelo1039]

Interessante, pensei que esse onclick apenas era inserido dentro de um documento javascript separado. Também não conhecia a respeito do tabindex, legal como sempre tem um detalhe novo.

[@zehelio4982]

muito boa aula amigo. valeu

[@thyagowillians]

Sou iniciante neste universo e estou em uma imersão louca. Achei incrível essa aula, que por sinal é a primeira que vi deste canal. Já salvei para assistir novamente e já me inscrevi para assistir outros. Parabéns pela didática.

[@luanmori5204]

ve o canal do rodolfo mori, um dos que tem a melhor didatica

[@thyagowillians]

@@luanmori5204 vou dar uma olhada!

[@LucasLima-hj5sg]

Eu todo feliz por saber pra que serve async e defer porque escrevi um post sobre isso semana passada :>

[@rodrigomarquesdelima6134]

Bom demais!

[@mininusequeci]

Obrigado!

[@MarcosOliveira-pn8xm]

Ótimo vídeo, Mayk. Trás vídeos sobre Compress HTML sim, seria muito bom.

[@LucasCarvalho-pt3yd]

Ótimo conteúdo 👌

[@mateusluizsilva5234]

16:40 Assunto de acessibilidade.

[@alexandrebaccarim7505]

Bacana 👏👏👏

[@josileudorodrigues7818]

Vocês precisam trazer conteúdo de Angular também !!!

[@Rapha_Dev]

otimo video

[@cadfgbo]

top demais

[@felipehuffner6440]

Salve grande Maikão!

[@lino1678]

Obrigado pelo conteudo!

[@rocketseat]

💜 🚀

[@studentdev2570]

Inglês é fácil quero ver saber escrever o português corretamente rsrs... Vc é demais...

[@GaiProgramador]

Mais um vídeo incrível do nosso querido Maykão... Mayk oque você usar pra criar esses slides lindos? Abraço!

[@maykbrito]

Notion. Eu criei um projeto em Electron pra injetar css e js no Notion. O projeto está aberto no meu GitHub github.com/maykbrito

[@Nydrix]

Valeu

[@marcoguilhermedebritomarti8671]

esse script que foi colocado na linha 14 é um hack para impedir alguns problemas só que é uma pratica ruim, porem como boa pratica se coloca ele no head mesmo e utilizando o async como padrão, porque funciona assim "parsing do html/request do arquivo - execução do javascript - termino do parsing do html". (caso seu script tenha uma codiçao de onload ele vai carregar no final porem) Caso você precisa que o dom esteja todo carregado para assim carregar o javascript ai você usa o defer, que tem esse comportamento. "parsing do html/request do arquivo - execução do javascript". Com a tecnica usada no video ele vai ter esse comportamento. "parsing do html - request do arquivo js - execução do arquivo javascript". Porem na maioria dos casos, colocar o defer vai ser mais eficiente.

[@xaveko]

Queria ser igual ao Mayk!!!!

[@user-wc2bw9iw3h]

cara, nunca imaginei que eu estaria comendo um lamen tão gostoso antes, gosto impressionante que leva sua alma a declineo por ser um gosto maravilhoso

[@raffaeleloi]

Se tem mayk tem like

[@MatheusPereira-nn9dj]

muito bom esse conteudo deixa eu perguntar : acha que seria uma boa pratica ou um metodo sob demanda trabalhar a sua aplicação web com referencia em um saas como wordpress junto com editor elementor ? um exemplo , estou fazendo um site via wordpress, ele vai me entregar semanticas e codigos css , e uma estrutura facilitada por uma interface , quando isso vou analisando como vai ficando o site e a partir dai vou criando do zero aprendendo com a aplicação saas .

[@FunctionDev]

show demais!! qual sua webcam ???

[@josewilsonsouzasantos3401]

Eu uso o Doctype em todas as minhas páginas html

[@joseol1ve1ra22]

Excelente aprendizado obs: aquela borda no canto da tela me assustou demais

[@carlosabqf]

Fiquei curioso sobre a ferramenta que usa para manter a imagem da câmera sempre no topo... pareceu bem mais simples que OBS. Pode compartilhar o nome?!

[@RenanSantos7]

Já que não encontrei ninguém falando: 16:35 tbm não era pra usar onclick. O mais apropriado é usar addEventListener lá no script.

[@sidekool]

Qual programa usou pra gravar o vídeo?

[@MrPanrox]

Mayk, parabéns pelo video de boas práticas. E com isso, tenho uma dúvida que talvez você consiga responder de forma definitiva. Vejo pelo youtube muita gente fazendo formulários separando inputs com divs. Sei que funciona perfeitamente, mas isso não seria uma má prática, já que o form tem sua semântica? Obrigado por disponibilizar teu conhecimento.

[@luisfelipe7009]

Fala sobre o Gulp

[@ivangoetze3094]

Uma vez um guru de semantica em português ensinou; todos que buscavam aprender HTML. Guri se você errar na semantica de português todos iram chamá-lo de analfabeto, mas caso erres na semantica de HTML; no problema! Seu imprego é garantido. F11

[@samueloliveira4465]

Mayk trás conteúdo sobre o Gulp e Webpack, seria muito bom. Obrigado!

[@dautarinosvaldocarvalhodea3167]

Acho que pretier não funciona bem se ativarmos o auto-save do vsCode

[@ivangoetze3094]

Jureba no mercado online.

[@pedro99nice]

Aquele T faltando no section foi uma tortura kkkkkkkkkk

[@wyslanalves6704]

Olá, tudo bem ? Gostaria de uma dica, como pego meu código e faço um post para mostrar o que aprendi

[@wyslanalves6704]

@@Junior-pe8rz não pow, eu digo posts mostrando o código explicando oq o código faz. Seria tipo eu mostrando o que eu aprendi !

[@qwertt14]

@@wyslanalves6704 um blog? as tags e ?

[@wyslanalves6704]

@@qwertt14 sim

[@leopsantosrj]

Olá meu amigo, no seu vídeo vc comenta sobre o Prettier, mas ao salvar com a formatação dele algumas tags recebem espaço e barra antes do seu fechamento " />" como pode ser observado tb no seu vídeo momento 23:18 nas linhas de meta - 4, 5, 7, link - 9, img 21. Essas tags sem a formatação pelo prettier mantém seu fechamento de maneira simples, mas com o prettier sempre são adicionados " />". Qual o problema de ter as tags com essa formatação?

[@samueloliveira4465]

Defer faz o script ser executado depois que o HMTL tenha carregado. Async(Assíncrono) é executado em paralelo ao HTML. 👍

[@LimaGabriel1]

#Gulp pls

[@Belotec]

E eu que coloquei pra escutar em quanto estou dormindo

[@renan7785]

Tabindex

[@johnycruz3631]

"pt-br"