Tags e Atributos no HTML

Prévia do material em texto

<p>Tópicos gerais sobre Tags e atributos no HTML</p><p>0. Tag nav utilizada para armazenar geralmente os principais links de navegação</p><p>https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/nav</p><p>0. Tag ul, utilizada para armazenar itens em uma lista não ordenada</p><p>https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/ul</p><p>0. Tag li, armazena cada item da lista não ordenada</p><p>https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/li</p><p>0. Tag label</p><p>https://css-tricks.com/html-inputs-and-labels-a-love-story/</p><p>0. Tag br para quebra de linha dentro da tag</p><p>https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/br</p><p>0. Link para a api do unsplash para colocar no background</p><p>https://source.unsplash.com/collection/39398953/400x400</p><p>https://www.youtube.com/watch?v=sUpTsBMOADE</p><p>0. Tags do tipo input junto com a label para dar acessibilidade</p><p>https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/input/radio?_x_tr_sl=en&_x_tr_tl=pt&_x_tr_hl=pt-BR&_x_tr_pto=sc</p><p>0. Diferença entre input submit e button submit</p><p>https://pt.stackoverflow.com/questions/12285/devo-usar-input-type-submit-ou-button-type-submit-nos-formul%C3%A1rios</p><p>0. Diferença entre os atributos name e id</p><p>https://cdfdigital.com.br/voce-sabe-quando-deve-usar-name-ou-id-no-html/</p><p>0. Atributo readonly na tag input permite apenas leitura</p><p>https://www.w3schools.com/tags/att_input_readonly.asp</p><p>0. Uso correto da tag aside para conteúdos a parte do conteúdo principal</p><p>https://ayltoninacio.com.br/blog/como-usar-tag-aside-do-html#:~:text=A%20tag%20do%20HTML,com%20propagandas%2C%20conhecida%20como%20sidebar.</p><p>0. Uso correto da tag span</p><p>https://www.freecodecamp.org/news/span-html-how-to-use-the-span-tag-with-css/</p><p>https://www.geeksforgeeks.org/html-span-tag/</p><p>0. Semântica do uso de button, a e div na construção de um botão</p><p>https://ux.shopify.com/semantic-html-the-unbearable-rightness-of-being-9b3c493e1791</p><p>0. Uso correto da tag main</p><p>https://www.quora.com/Should-you-place-the-header-tag-inside-a-main-tag-in-an-HTML-page</p><p>0. Tag details e summary</p><p>https://webdesign.tutsplus.com/pt/tutorials/explaining-the-details-and-summary-elements--cms-21999</p><p>https://css-tricks.com/how-to-animate-the-details-element/</p><p>0. Passando informações de email, conteúdo, título, destinatário no href da tag a href="mailto:nalbertc.p@gmail.com?subject=email%20subject"</p><p>https://developer.yoast.com/blog/guide-mailto-links/</p><p>0. Diferença entre rel=”icon” e rel=”shortcut icon” como atributo da tag</p><p>https://solidlystated.com/design/html-favicon-proper-usage/#:~:text=Differences%20Between%20%E2%80%9CShortcut%20Icon%E2%80%9D%20and%20%E2%80%9CIcon%E2%80%9D&text=Go%20figure%E2%80%A6,examples%203%20and%204%20above.</p><p>0. Usando o site abaixo é possível converter um png em ícone que é de fato um formato ícone e bom para SEO</p><p>https://www.favicon.cc/?</p><p>0. Atributo type na tag</p><p>https://html.com/attributes/link-type/</p><p>0. Tag table, tbody, thead, caption, tr, td e th explicadas</p><p>https://blog.betrybe.com/html/table-html/</p><p>0. Propriedade border-collapse utilizada na tag table</p><p>https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse</p><p>0. Radial gradient</p><p>https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient</p><p>0. Atributo srcset e porque o tipo de imagem e tamanho é definido na tag html img (pois a imagem é começada a baixar pelo browser antes mesmo de terminar o html e css por isso precisamos passar o srcset em linha de html pois o html já está baixado)</p><p>https://cloudfour.com/thinks/responsive-images-101-part-4-srcset-width-descriptors/</p><p>https://cloudfour.com/thinks/responsive-images-101-part-5-sizes/</p><p>0. Alternativa ao srcset dentro da tag , utilizando a tag</p><p>https://www.youtube.com/watch?v=d9i68C628Nk</p><p>0. Explicando a lógica por trás do srcset e como ele escolhe com base em tamanhos e DPR (razão de pixels do dispositivo)</p><p>https://www.youtube.com/watch?v=KwWv4H6LzGk</p><p>0. Entendendo o DPR (device pixel ratio, razão de quantos pixels físicos do dispositivo cabem em uma unidade de pixel lógico do CSS)</p><p>https://tomroth.com.au/dpr/#:~:text=The%20number%20of%20device%20pixels,devices%20have%20a%20higher%20DPR.</p><p>0. Initial, minimum e maximum scale da tag</p><p>https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag</p><p>0. Tag video e seus atributos (muted, loop, autoplay, controls, etc)</p><p>https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/video</p><p>https://web.dev/i18n/pt/video-and-source-tags/</p><p>0. Atributo step para gerar intervalos válidos dentro de inputs tipo numéricos</p><p>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step</p><p>0. Atributo autocomplete=”off” nas tags inputs para desabilitar a sugestão do windows</p><p>https://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tags</p><p>0. Autocomplete atributo para especificar o tipo de dado que deve ser sugerido pelo user agente (browser do usuário) para completar campos de formulário</p><p>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete</p><p>0. Comportamento da tag button quando não possui um tipo</p><p>https://dev.to/clairecodes/why-its-important-to-give-your-html-button-a-type-58k9</p><p>0. Atributos rowspan e colonspan para tags th e td em uma tabela</p><p>https://www.w3schools.com/html/html_table_colspan_rowspan.asp</p><p>0. Atributo loading nas tags img para melhorar o tempo de carregamento</p><p>https://www.geeksforgeeks.org/html-img-loading-attribute/</p><p>0. Tag filedset e legend para agrupar inputs de formulários extensos</p><p>https://www.google.com/search?q=tag+fieldset&oq=tag+fieldset&aqs=chrome..69i57j0i15i22i30j69i60l2j69i65j69i60j69i61j69i60.1483j0j7&sourceid=chrome&ie=UTF-8#fpstate=ive&vld=cid:ed35d6b6,vid:RMk2LWIY-oY</p><p>0. Utilidade do hash(#) em URLs</p><p>https://support.google.com/richmedia/answer/190941?hl=en#:~:text=In%20a%20URL%2C%20a%20hash,of%20the%20page%20or%20website.</p><p>https://www.oho.com/blog/explained-60-seconds-hash-symbols-urls-and-seo</p><p>https://stackoverflow.com/questions/21850093/usage-of-hash-in-url</p><p>0. Atributo rel=””</p><p>https://www.dofactory.com/html/rel</p><p>https://blog.hubspot.com/website/what-is-rel-in-html</p><p>https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel</p><p>https://www.contentkingapp.com/academy/link-rel/</p><p>https://www.youtube.com/watch?v=Bp3iL9paTCM</p><p>0. Diferenças entre nofollow noopener e noreferrer no atributo rel</p><p>https://clever-solution.com/everything-you-need-to-know-about-rel-noopener-noreferrer-tags-purpose-benefits-and-seo-impact/</p><p>https://matheusbavaresco.com.br/seo/uso-rel-nofollow-rel-noopener-rel-noreferrer-rel-exteral/</p><p>https://webmasters.stackexchange.com/questions/116168/what-is-the-difference-between-noopener-and-noreferrer</p>