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

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ม.ค. 2025

ความคิดเห็น • 130

  • @serliv
    @serliv  ปีที่แล้ว +6

    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

  • @guttitea
    @guttitea 2 วันที่ผ่านมา +1

    que vídeo, meu amigo. explêndido. vídeo completo, denso e limpo.

    • @serliv
      @serliv  2 วันที่ผ่านมา +1

      Muito obrigado 😊

  • @kaelanysoares1128
    @kaelanysoares1128 3 วันที่ผ่านมา

    Melhor aula do youtube sobre o assunto!

    • @serliv
      @serliv  3 วันที่ผ่านมา

      Muito obrigado 😊

  • @helenabrb07
    @helenabrb07 ปีที่แล้ว +12

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

    • @serliv
      @serliv  ปีที่แล้ว +1

      Que bom Helena. Fico feliz em ajudar

  • @focandoanoticia6262
    @focandoanoticia6262 3 วันที่ผ่านมา

    Show de bola, vídeo maravilhoso

    • @serliv
      @serliv  3 วันที่ผ่านมา

      Muito obrigado

  • @BernardoMB2
    @BernardoMB2 8 หลายเดือนก่อน +2

    Maratonando o canal nessa madrugada de sábado

    • @serliv
      @serliv  8 หลายเดือนก่อน

      Aí sim. Muito obrigado pela confiança

  • @tiagoribeiro7037
    @tiagoribeiro7037 ปีที่แล้ว +2

    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
      @serliv  ปีที่แล้ว

      Exatamente 👏

  • @fabioluiz3677
    @fabioluiz3677 3 หลายเดือนก่อน

    Muito bom seu conteudo, obrigado!

    • @serliv
      @serliv  3 หลายเดือนก่อน

      Eu que agradeço pelo feedback

  • @soturnah
    @soturnah 8 หลายเดือนก่อน +1

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

    • @serliv
      @serliv  8 หลายเดือนก่อน

      Eu que agradeço pelo feedback 😉

  • @brunosantanadev
    @brunosantanadev ปีที่แล้ว +3

    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
      @serliv  ปีที่แล้ว

      Show. Anotei aqui. Muito obrigado

  • @polyanafeitosadasilva4097
    @polyanafeitosadasilva4097 5 หลายเดือนก่อน

    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
      @serliv  5 หลายเดือนก่อน +1

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

  • @jamesbecker9952
    @jamesbecker9952 4 หลายเดือนก่อน

    Mto bom 👏🏻👏🏻👏🏻

    • @serliv
      @serliv  4 หลายเดือนก่อน +1

      Obrigado 😃

  • @eriveltondasilva6878
    @eriveltondasilva6878 ปีที่แล้ว +1

    Ótimo conteúdo 👏🏻👏🏻

    • @serliv
      @serliv  ปีที่แล้ว

      Muito obrigado. Abração

  • @VemComAlex
    @VemComAlex ปีที่แล้ว

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

    • @serliv
      @serliv  ปีที่แล้ว +1

      Eu que agradeço Jayme. Muito obrigado

  • @felpa.
    @felpa. ปีที่แล้ว

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

    • @serliv
      @serliv  ปีที่แล้ว +1

      show. Muito obrigado 😊

  • @lucascirilo8929
    @lucascirilo8929 9 หลายเดือนก่อน

    Excelente aula!!!

    • @serliv
      @serliv  9 หลายเดือนก่อน

      Obrigado 😃

  • @lucasalcantara4195
    @lucasalcantara4195 ปีที่แล้ว

    CARA EU TE AMO, VOCE ME AJUDOU MUITO

    • @serliv
      @serliv  ปีที่แล้ว

      Muito obrigado Lucas. Fico muito feliz por ter ajudado 🙂

  • @daniell_nunes
    @daniell_nunes ปีที่แล้ว

    Muito esclarecedor, ajudou bastante. Grato!

    • @serliv
      @serliv  ปีที่แล้ว

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

  • @aricleciotanaarea5290
    @aricleciotanaarea5290 ปีที่แล้ว

    😮😮😮aula top !

    • @serliv
      @serliv  ปีที่แล้ว +1

      Muito obrigado

  • @guilhermehenrique-md7pl
    @guilhermehenrique-md7pl 10 หลายเดือนก่อน +1

    top!!!!!

  • @angelicacoelho5752
    @angelicacoelho5752 ปีที่แล้ว

    Maravilhoso conteúdo. Parabéns!!

    • @serliv
      @serliv  ปีที่แล้ว

      Muito obrigado Angélica. Abração

  • @pensandobem1900
    @pensandobem1900 9 หลายเดือนก่อน

    Show de bola ajudou muito

    • @serliv
      @serliv  9 หลายเดือนก่อน

      Que bom que ajudou

  • @Tchosk
    @Tchosk ปีที่แล้ว

    obg pelas dicas de uso dessas tag.

    • @serliv
      @serliv  ปีที่แล้ว

      Imagina. TMJ

  • @HBcanall
    @HBcanall ปีที่แล้ว

    ótimo conteúdo!

    • @serliv
      @serliv  ปีที่แล้ว

      Muito obrigado Henrique. Que bom que gostou

  • @raul6707
    @raul6707 ปีที่แล้ว

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

    • @serliv
      @serliv  ปีที่แล้ว

      Fico feliz. Obrigado pelo feedback

  • @marcia_fortuna
    @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
      @serliv  ปีที่แล้ว +1

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

    • @marcia_fortuna
      @marcia_fortuna ปีที่แล้ว

      @@serliv 🥰

  • @divulgaweb2391
    @divulgaweb2391 ปีที่แล้ว

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

    • @serliv
      @serliv  ปีที่แล้ว

      Fico feliz. Muito obrigado pelo feeback.

  • @insanidade2653
    @insanidade2653 ปีที่แล้ว +1

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

    • @serliv
      @serliv  ปีที่แล้ว

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

  • @DjosyDiamantino
    @DjosyDiamantino ปีที่แล้ว

    Mim ajudou bastante❤🙏🏽

    • @serliv
      @serliv  ปีที่แล้ว

      Fico feliz :) Muito obrigado pela mensagem

  • @matheusvieira3731
    @matheusvieira3731 ปีที่แล้ว

    Era essa aula que eu estava esperando hehe

    • @serliv
      @serliv  ปีที่แล้ว

      Boa. Já não precisa mais esperar heheheh

  • @korvoalone
    @korvoalone ปีที่แล้ว

    a sua didatica é a melhor de todas

    • @serliv
      @serliv  ปีที่แล้ว

      Nossa. Muito obrigado mesmo. De coração

  • @toninfps2
    @toninfps2 ปีที่แล้ว

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

    • @serliv
      @serliv  ปีที่แล้ว

      Show. Muito obrigado pela mensagem. Abração

  • @LipeSaint12
    @LipeSaint12 ปีที่แล้ว +1

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

    • @serliv
      @serliv  ปีที่แล้ว

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

  • @ConhecimentoDev
    @ConhecimentoDev 10 หลายเดือนก่อน +1

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

  • @devpaicansado
    @devpaicansado ปีที่แล้ว

    Me ajudou muito, obrigado

    • @serliv
      @serliv  ปีที่แล้ว

      tmj

  • @gabrielalves4119
    @gabrielalves4119 5 หลายเดือนก่อน +1

    👏🏽👏🏽👏🏽

  • @FGrassii
    @FGrassii 4 หลายเดือนก่อน

    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
      @serliv  4 หลายเดือนก่อน

      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.

  • @_lowge
    @_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
      @serliv  ปีที่แล้ว +1

      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
      @_lowge ปีที่แล้ว

      @@serliv Obrigado, esclareceu bastante

  • @pyruk4_
    @pyruk4_ ปีที่แล้ว

    Muito bom!

    • @serliv
      @serliv  ปีที่แล้ว

      Muito obrigado

  • @marlondasilva6534
    @marlondasilva6534 ปีที่แล้ว

    Ajudou bastante

    • @serliv
      @serliv  ปีที่แล้ว

      Fico feliz. 😊

  • @dg.gamers9946
    @dg.gamers9946 ปีที่แล้ว

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

    • @serliv
      @serliv  ปีที่แล้ว

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

  • @canalfernandooliveira
    @canalfernandooliveira ปีที่แล้ว

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

    • @serliv
      @serliv  ปีที่แล้ว +1

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

    • @canalfernandooliveira
      @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.

  • @emersonoliver8572
    @emersonoliver8572 ปีที่แล้ว +1

    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
      @emersonoliver8572 ปีที่แล้ว

      Esqueci do article

    • @emersonoliver8572
      @emersonoliver8572 ปีที่แล้ว

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

    • @serliv
      @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
      @emersonoliver8572 ปีที่แล้ว

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

  • @sollopiccolo2491
    @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
      @serliv  ปีที่แล้ว +2

      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

  • @Tousen_
    @Tousen_ ปีที่แล้ว

    nice

  • @alejandroluna_dev
    @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
      @serliv  ปีที่แล้ว +1

      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
    @golpacto ปีที่แล้ว

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

    • @serliv
      @serliv  ปีที่แล้ว

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

  • @aaronvictor1951
    @aaronvictor1951 ปีที่แล้ว

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

    • @serliv
      @serliv  ปีที่แล้ว

      Boa. Espero ter ajudado a clarear as coisas

  • @juniordantaspersonal
    @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
      @serliv  ปีที่แล้ว +1

      Eu diria que sim Junior.

    • @juniordantaspersonal
      @juniordantaspersonal ปีที่แล้ว

      @@serliv Show. Muito obrigado!

  • @josemiguel103
    @josemiguel103 8 หลายเดือนก่อน

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

    • @serliv
      @serliv  8 หลายเดือนก่อน +1

      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?

  • @maathcmacieloliveira2297
    @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
      @serliv  ปีที่แล้ว

      Que bom que ajudei

  • @sollopiccolo2491
    @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
      @serliv  ปีที่แล้ว +1

      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
      @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! 🙏
      🙏

  • @allancesar8906
    @allancesar8906 ปีที่แล้ว

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

    • @serliv
      @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

  • @angelicacoelho5752
    @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
      @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.

  • @SantosFlavioMarcal
    @SantosFlavioMarcal ปีที่แล้ว

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

    • @serliv
      @serliv  ปีที่แล้ว

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

  • @ConhecimentoDev
    @ConhecimentoDev 10 หลายเดือนก่อน +1

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

  • @vintagelols
    @vintagelols ปีที่แล้ว

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

    • @serliv
      @serliv  ปีที่แล้ว +1

      hahahahaha boa

    • @vintagelols
      @vintagelols ปีที่แล้ว

      @@serliv kkkk

  • @JulioCesar-lu1ip
    @JulioCesar-lu1ip 11 หลายเดือนก่อน

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

    • @serliv
      @serliv  11 หลายเดือนก่อน +1

      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

  • @biancavieira6732
    @biancavieira6732 ปีที่แล้ว

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

    • @serliv
      @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

  • @jf.bitencourt
    @jf.bitencourt วันที่ผ่านมา

  • @thommy_80
    @thommy_80 ปีที่แล้ว

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

    • @serliv
      @serliv  ปีที่แล้ว

      Não necessariamente

    • @thommy_80
      @thommy_80 ปีที่แล้ว

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

  • @user20430-
    @user20430- ปีที่แล้ว

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

    • @serliv
      @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-
      @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!

  • @coquealto
    @coquealto 6 หลายเดือนก่อน

    Muito bom!!

    • @serliv
      @serliv  6 หลายเดือนก่อน

      Muito obrigado 😊