😲 article? section? div? nav? Qual tag HTML semântica escolher? 🤔

[@serliv]

Vem aprender HTML, CSS e Javascript comigo. SEM MENSALIDADE. Tem 30 dias para pedir o dinheiro de volta caso não fiquei totalmente satisfeito Curso Web Design Fundamentos. Aprenda HTML CSS e Javascript: serfrontend.com/cursos/web-fundamentos-html-css/index.html Curso Javascript Completo: serfrontend.com/cursos/javascript-completo/index.html Outros links que podem ser interessantes: Blog: serfrontend.com/blog/ Meus cursos: serfrontend.com/cursos/ Canais em redes sociais: Twitter: twitter.com/serlivcursos Linkedin: www.linkedin.com/in/serliv Instagram: instagram.com/serlivcursos Facebook: facebook.com/serlivcursos Instrutor: Daniel Tapias Morales Twitter: twitter.com/tapmorales Linkedin: www.linkedin.com/in/daniel-tapias-morales-87145621/ Medium: medium.com/@tapmorales Github: github.com/tapmorales

[@helenabrb07]

VÍDEO MARAVILHOSO! eu precisava tanto tirar dúvidas desse assunto e veio no time certo.

[@serliv]

Que bom Helena. Fico feliz em ajudar

[@ConhecimentoDev]

Exemplo: div class=`display`, ou div class="planodefundo", aí vc vai no css e coloca: .display, ou . planodefundo..

[@BernardoMB2]

Maratonando o canal nessa madrugada de sábado

[@serliv]

Aí sim. Muito obrigado pela confiança

[@jamesbecker9952]

Mto bom 👏🏻👏🏻👏🏻

[@serliv]

Obrigado 😃

[@fabioluiz3677]

Muito bom seu conteudo, obrigado!

[@serliv]

Eu que agradeço pelo feedback

[@tiagoribeiro7037]

Conteúdo muito relevante, pois ao mesmo tempo que precisamos usar tags semânticas, temos que usar de forma correta, isso facilita para usuários de leitores de tela.

[@serliv]

Exatamente 👏

[@polyanafeitosadasilva4097]

Geralmente eu me destraio facil com video de mais de 15 min, porem vi o seu e nem percebi o tempo passar, voce explica bem demais!!!

[@serliv]

Muito obrigado pela mensagem Polyana. Fique muito feliz com seu feedback

[@guilhermehenrique-md7pl]

top!!!!!

[@gabrielalves4119]

👏🏽👏🏽👏🏽

[@felpa.]

Um dos melhores videos do KZbin explicando essas Tag's !!! Explicação rápida e didatica! Muito bom para quem está começando na programação!

[@serliv]

show. Muito obrigado 😊

[@sollopiccolo2491]

Professor, por gentileza... o meu raciocínio está correto? Desde já agradeço! 7 DICAS PARA CUIDAR DA SAÚDE DE SEU CACHORRO 🐶💚 1- Adaptação do cachorro Quando receber um novo cãozinho em sua casa, prepare um lugar quentinho e confortável, que pode ser uma caixa ou uma caminha. Se puder, coloque objetos com o cheiro do lugar em que ele estava anteriormente, como um paninho, para que ele não estranhe muito o local. 2- Alimentação Deixe sempre água fresca para seu cachorro e longe do sol. Evite dar restos de comida, pois só a ração tem os nutrientes de que seu cão precisa em uma dosagem equilibrada 3- Casinha Coloque a casinha ou caminha de seu cachorrinho em uma área coberta, protegida do sol e da chuva - mesmo que a casinha do cachorro já tenha seu próprio telhado. 4- Higiene Escove os pelos do seu cachorro diariamente. Nos casos dos cães de pelos longos, considere tosá-los, principalmente no verão. 5- Brincadeiras Cães adoram brinquedos de morder: ossos de borracha, plástico ou náilon. Não dê a ele objetos que soltem lascas ou pedaços que possam ser engolidos. 6- Um cãozinho ou dois? Ter mais de um cachorro pode ser uma ótima ideia, pois além de ser mais uma companhia para a família, ele será também companhia para o outro cão. 7- Socialização Para acostumar seu cachorro a outras pessoas e animais, passeie sempre com ele, desde filhote.

[@serliv]

Pra mim esta ok. Eu só tentaria tirar as tags br´s e colocaria margin no css. A tag br deve ser usada para quebrar um linha de texto, e não para distanciar dois elementos. Blz?

[@sollopiccolo2491]

@@serliv, essa era a minha dúvida, não sabia se poderia colocar o . Sua didática é incrível; já adquiri o seu curso e tão logo o iniciarei . Feliz Páscoa, professor, muito obrigada mais uma uma vez! 🙏 🙏

[@soturnah]

Afff vc é demaiss, eu tava quebrando a cabeça e vc explicou perfeitamente, obrigada 🥰🥺

[@serliv]

Eu que agradeço pelo feedback 😉

[@brunosantanadev]

Pow era minha dúvida, essas duas tags valeu. Faça mais um video como esse mais apenas focado no layout igual usou no video, mais ai faz um geral com todas as novas tags, você foi o primeiro que vi fazendo um video assim.

[@serliv]

Show. Anotei aqui. Muito obrigado

[@eriveltondasilva6878]

Ótimo conteúdo 👏🏻👏🏻

[@serliv]

Muito obrigado. Abração

[@lucascirilo8929]

Excelente aula!!!

[@serliv]

Obrigado 😃

[@pensandobem1900]

Show de bola ajudou muito

[@serliv]

Que bom que ajudou

[@korvoalone]

a sua didatica é a melhor de todas

[@serliv]

Nossa. Muito obrigado mesmo. De coração

[@Tchosk]

obg pelas dicas de uso dessas tag.

[@serliv]

Imagina. TMJ

[@Tousen_]

nice

[@aricleciotanaarea5290]

😮😮😮aula top !

[@serliv]

Muito obrigado

[@daniell_nunes]

Muito esclarecedor, ajudou bastante. Grato!

[@serliv]

Eu que agradeço pelo feedback. Forte abraço

[@VemComAlex]

Foi cirúrgico nas explicações! Parabéns pelo conteúdo!

[@serliv]

Eu que agradeço Jayme. Muito obrigado

[@lucasalcantara4195]

CARA EU TE AMO, VOCE ME AJUDOU MUITO

[@serliv]

Muito obrigado Lucas. Fico muito feliz por ter ajudado 🙂

[@HBcanall]

ótimo conteúdo!

[@serliv]

Muito obrigado Henrique. Que bom que gostou

[@divulgaweb2391]

muito bom me ajudou muito com minhas duvidas !!!!

[@serliv]

Fico feliz. Muito obrigado pelo feeback.

[@marcia_fortuna]

Sou aluna desse curso, é fantástico, didático e os projetos desenvolvidos complementam a aplicação prática dos conteúdos. Gratidão professor.

[@serliv]

Muito obrigado pelo feedback Márcia. Forte abraço

[@marcia_fortuna]

@@serliv 🥰

[@marlondasilva6534]

Ajudou bastante

[@serliv]

Fico feliz. 😊

[@DjosyDiamantino]

Mim ajudou bastante❤🙏🏽

[@serliv]

Fico feliz :) Muito obrigado pela mensagem

[@devpaicansado]

Me ajudou muito, obrigado

[@serliv]

tmj

[@emersonoliver8572]

Iniciante escrevendo antes de assistir! Nas section eu planejo dividi-los por assunto separando por class ,se eu resolver fazer conteudos laterias que ocupam espaço vertical com mais de 2 section ,uso asside! Agora dando play pra corrigir meus erros!

[@emersonoliver8572]

Esqueci do article

[@emersonoliver8572]

@Gabriel Oliveira Eu sou novato,eu ví no Guanabara,só vi o basicão das semânticas! Header,futter e essas coisas!

[@serliv]

@user-fl9kq4zl9p exatamente. O nome confunde. Mas aside não significa "ao lado" em termos visuais. Mas sim "ao lado" em termos de conteudo

[@emersonoliver8572]

@Gabriel Oliveira Sempre que me ver pelos comentários, sinta se a vontade! Comunicação gera informação,informação é poder!

[@pyruk4_]

Muito bom!

[@serliv]

Muito obrigado

[@insanidade2653]

Em 21:45 poderia ser um article em todo o conteúdo e separar cada curso em uma section?

[@serliv]

acho mais semantico deixar cada curso numa article por ser um conteudo independente

[@angelicacoelho5752]

Maravilhoso conteúdo. Parabéns!!

[@serliv]

Muito obrigado Angélica. Abração

[@FGrassii]

baita explicação, parabéns... minha única dúvida seria sobre, se na parte onde tem os botões e links embaixo do bootcamp, não poderia ser outra nav com aria-label segundaria ?

[@serliv]

A tag nav representa uma seção de uma página que aponta para outras páginas ou para outras áreas da página, ou seja, uma seção com links de navegação. Mas mesmo que um documento pode ter vários elementos , por exemplo, um para navegação principal e outro para navegação secundária, é importante saber que nem todos os links de um documento devem estar dentro de um elemento , o qual é destinado apenas para grupos importantes de links de navegação.

[@raul6707]

Obrigado por dividir o conhecimento. Me ajudou muito!! 😍

[@serliv]

Fico feliz. Obrigado pelo feedback

[@matheusvieira3731]

Era essa aula que eu estava esperando hehe

[@serliv]

Boa. Já não precisa mais esperar heheheh

[@toninfps2]

Muito bom professor estou estudando por conta própria e vc ajudou muito a entender.

[@serliv]

Show. Muito obrigado pela mensagem. Abração

[@SantosFlavioMarcal]

Acredito que a pegada é saber quando usar article e section.

[@serliv]

Pois. Espero ter conseguido deixar um pouco mais claro com esse vídeo

[@dg.gamers9946]

Parabéns pelo canal, estou fazendo seu curso la na plataforma do udemy

[@serliv]

Muito obrigado pela mensagem e pela confiança no meu trabalho . Abração

[@_lowge]

Em 18:11 não poderia usar uma tag section para o conteúdo e uma tag aside para a imagem? Em 21:53 Todas as article que você disse não poderia tá dentro de uma tag main? Quando poderia usar a tag main nesse exemplo mostrado no vídeo?

[@serliv]

Olá. Sobre o aside não seria o ideal, pois esta tag representa um conteúdo tangencial ao conteúdo principal do sei seu site. Nesse exemplo, tudo o que não for header nem footer poderia estar contido dentro de uma tag main, blz?

[@_lowge]

@@serliv Obrigado, esclareceu bastante

[@alejandroluna_dev]

Maravilhoso conteúdo. Estou nos começos dos estudos sobre html, css e javascript. Justoe hoje estava pensando sobre este conteudo e achei seu video. Eu entendo que as tag do html sao importante de usar da melhor forma possível principalmente por como o navegador iteratua, faz a leitura do html. Que é a forma que ele melhor entende um site. É isso mesmo?

[@serliv]

Exatamente. Além disso, o HTML semântico vai ajudar também em questões de SEO (otimização para sites de busca) e também acessibilidade, o que é muito importante, pois assim você não impede o acesso às informações do seu site por pessoas que possuam algum tipo de necessidade especial

[@golpacto]

Estava procurando esse assunto, sou aluno pela Udemy e isso me tira a paz kkk

[@serliv]

Kkkkk. Pois é. Fiz esse vídeo com base em muitas perguntas que recebo sobre esse assunto

[@canalfernandooliveira]

Obrigado. Deus abençoe. Posso sugerir um conteúdo?

[@serliv]

Opa. Claro que sim. Até agradeço. E que Deus nos abençoe a todos nós

[@canalfernandooliveira]

@@serliv obrigado. Poderia criar, baseado nessa explicação, um vídeo de como podemos colocar no html mesmo as semânticas html. Básicas. Mas com editor de código. Essa é uma sugestão. Obrigado.

[@aaronvictor1951]

Mesmo ja estando no javascript eu tinha essa duvida , a estrutura eu conheço so não sabia como usar

[@serliv]

Boa. Espero ter ajudado a clarear as coisas

[@juniordantaspersonal]

Nossa... Clareou muitas dúvidas 😅👏 Só me restou uma kkk Para uma página só com um container contendo todas as informações (ex: Portfólio), é ideal separar as partes em section, mesmo que em uma delas fiquem apenas botões?

[@serliv]

Eu diria que sim Junior.

[@juniordantaspersonal]

@@serliv Show. Muito obrigado!

[@sollopiccolo2491]

Em 10:17 ficou confuso para mim. O que eu compreendi foi que dentro de uma section podemos utilizar div, mas desde que seja para estilizar um pequeno trecho. É isso?

[@serliv]

Você pode usar div dentro ou fora de qualquer tag, desde que seja com o simples objetivo de resolver algum questão visual, ou seja, usar a div para selecionar algum elemento no CSS a fim que atingir o design desejado

[@ConhecimentoDev]

Poxa div é fácil de ultilizar, a div , vc usa pra cria uma classe independente,pra vc usar no css ou JS

[@maathcmacieloliveira2297]

Tô fazendo seu curso e tava tendo essa dúvida tava usando tudo div kkkkk mas vou re ver pra aprender e usar o esse site pra estudar mais

[@serliv]

Que bom que ajudei

[@josemiguel103]

Boa noite amigo, quando eu devo aprender Javascript? Estou estudando html e css no momento

[@serliv]

Essa é uma excelente pergunta. Quando você se sentir confiante com o box-model e flexbox do CSS e conseguir desenvolver pequenas páginas, mesmo que simples, sem copiar/calor de tutoriais. Aí pode seguir para lógica de programação e javascript, se vc quiser. Essa é só a minha opinião, não a verdade absoluta, ok?

[@LipeSaint12]

Na área de cursos não poderia usar a tag main, já que é o conteúdo principal da página? 23:30

[@serliv]

pode sim Daniel. Parabéns pela perspicácia. Forte abraço

[@angelicacoelho5752]

Uma dúvida, nesta parte que estão os cursos, você disse que é a parte principal e para colocar uma section com várias artucules dentro, mas por ser a parte do conteúdo principal não poderia ser uma main com as articules dentro representando cada curso, e os preços com section?

[@serliv]

Normalmente a tag main engloba todo o conteudo da página e não só uma seção expecifica. Ou seja, o que não form nav, header, footer, aside etc, é main.

[@allancesar8906]

Boa-tarde, prof. O sra dá consultoria em seus cursos?

[@serliv]

O curso tem uma secção de perguntas e respostas onde sano dúvidas dos alunos. Todas as dúvidas são sanadas em até 24 horas, salvo algum imprevisto, em dias úteis

[@matematicasimples-q4e]

11:43 se preocupar a ponto de perder os cabelos, essa frase nunca fez tanto sentido agora

[@serliv]

hahahahaha boa

[@matematicasimples-q4e]

@@serliv kkkk

[@biancavieira6732]

Um menu lateral seria um aside, com um nav dentro? ou um menu com uma nav dentro?

[@serliv]

Não necessariamente. O aside não significa "ao lado" em termos visuais. É muito comum confundir isso por conta do nome da tag. A tag aside significa conteudo tangencial ao conteudo principal

[@JulioCesar-lu1ip]

Eu ja vi aqui Landpage so usado a semantica principal de DIV isso e certo? eu mesmo ja usei e errado ?

[@serliv]

div é uma tag que não possui significado algum. Se quiser deixar o código mais semântico, use as tags que foram criadas para isso a partir da HTML5

[@user20430-]

Por incrível que pareça, eu apanho mais no HTML do que o tão temido CSS .

[@serliv]

Muito obrigado pela mensagem. Se quiser, pode dar exemplos de onde está a dificuldade, assim posso pensar em fazer mais vídeos para te ajudar..

[@user20430-]

@@serliv a minha dificuldade era em deixar a página semantica com melhores práticas de SEO mas com seu vídeo me ajudou muito!

[@thommy_80]

Article seria pro html o que os componentes são pro react😅😅😅

[@serliv]

Não necessariamente

[@thommy_80]

@@serliv mas article se voce tirar do seu site e usar ele sozinho em outro ele funciona, igual um componente 😛😛😛

[@coquealto]

Muito bom!!

[@serliv]

Muito obrigado 😊