[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"cheatsheet:\u002Fcheatsheets\u002Fhtml5-semantic-tags-seo":3,"categories-en":1249},{"id":4,"slug":5,"title":6,"description":7,"category":8,"level":9,"codeLanguage":10,"views":11,"updatedAt":12,"tags":13,"sections":25,"snippetCount":1248},"48c378f7-218c-441b-a7df-22b41a7b59e0","html5-semantic-tags-seo","HTML5: Semantic Tags & SEO","Google hates \u003Cdiv>. Use the right semantic structure to rank your site at the top without spending on ads.","frontend","advanced","html",5,"2026-04-11T15:57:11.593358+00:00",[14,8,15,16,17,18,19,20,21,22,23,24],"HTML5","estrutura","semântica","formulários","multimídia","SEO","acessibilidade","webdev","desenvolvimento-web","tags-html","atributos-html",[26,74,107,154,187,241,288,328,375,422,476,516,556,603,650,690,751,805,845,892,925,958,996,1036,1069,1102,1142,1182,1215],{"id":27,"title":28,"description":29,"snippets":30},"84bee47f-8937-41f2-a70c-ef609ab3739b","🏗️ Basic Document Structure","Fundamentals for creating any HTML page, including document declaration, essential metadata, and base body elements.",[31,39,46,53,60,67],{"id":32,"title":33,"description":34,"code":35,"language":10,"filename":36,"whenToUse":37,"highlighted":38},"771a9853-f2c7-40d0-9fad-7ba4992fb82a","DOCTYPE Declaration","Declares the document type and HTML version the browser should use to render the page. Essential to ensure the standard HTML5 rendering mode and avoid \"quirks\" mode, which can cause visual inconsistencies.","\u003C!DOCTYPE html>",null,"When starting any HTML document to define the HTML version.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">DOCTYPE\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> html\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":40,"title":41,"description":42,"code":43,"language":10,"filename":36,"whenToUse":44,"highlighted":45},"f08ea240-a13c-445c-b666-0d85eeaafa49","HTML Root Element","The root element of the entire HTML page. The `lang` attribute defines the primary language of the document's content (in this case, Brazilian Portuguese), which is crucial for accessibility (screen readers) and search engines (SEO).","\u003Chtml lang=\"pt-BR\">","Always as the first element inside the DOCTYPE.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">html\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"pt-BR\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":47,"title":48,"description":49,"code":50,"language":10,"filename":36,"whenToUse":51,"highlighted":52},"06c747ca-0387-4a06-a14a-d10549ff0dc6","Document Metadata (Head)","Contains metadata about the document, such as title, links to stylesheets, scripts, SEO information, and other settings that are not directly displayed on the page but are important for the browser and search engines.","\u003Chead>","To include all non-visible information of the page.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">head\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":54,"title":55,"description":56,"code":57,"language":10,"filename":36,"whenToUse":58,"highlighted":59},"90637d1e-46f4-44f8-acad-690eec85822b","Visible Content (Body)","Contains all visible content of the web page, including text, images, links, videos, and other interactive elements. Everything the user sees and interacts with is within this tag.","\u003Cbody>","To wrap all content that will be displayed in the browser.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">body\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":61,"title":62,"description":63,"code":64,"language":10,"filename":36,"whenToUse":65,"highlighted":66},"9ec4d881-b851-44ae-858e-48ff8dc22b21","Character Encoding","Defines the document's character encoding as UTF-8, which supports most characters in all languages, including accents and special characters. Ensures that text is displayed correctly across different operating systems and browsers.","\u003Cmeta charset=\"UTF-8\">","Always at the beginning of the \u003Chead> to prevent encoding issues.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> charset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"UTF-8\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":68,"title":69,"description":70,"code":71,"language":10,"filename":36,"whenToUse":72,"highlighted":73},"caa04bbf-2056-4c16-bfe5-83889007fc87","Viewport Configuration","Configures the viewport for mobile devices, controlling the width of the visible area (`width=device-width`) and the initial zoom level (`initial-scale=1.0`). Essential to ensure the page design is responsive and adapts to different screen sizes.","\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">","On all pages to ensure responsiveness on mobile devices.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"viewport\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"width=device-width, initial-scale=1.0\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":75,"title":76,"description":77,"snippets":78},"2b923620-f10f-4117-b242-ffca46ed2ede","Headings, Paragraphs and Breaks","Essential elements for structuring text, defining heading hierarchy, and controlling content flow.",[79,86,93,100],{"id":80,"title":81,"description":82,"code":83,"language":10,"filename":36,"whenToUse":84,"highlighted":85},"0a013fbe-0cba-4008-a667-bb9c4f536b82","Títulos de Seção (H1-H6)","Define títulos de diferentes níveis de importância. `\u003Ch1>` é o título mais importante (geralmente o título principal da página), e `\u003Ch6>` é o menos importante. Usados para estruturar o conteúdo semanticamente e são relevantes para SEO.","\u003Ch1> a \u003Ch6>","Para definir a hierarquia e estrutura de cabeçalhos em seu conteúdo.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">> a <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":87,"title":88,"description":89,"code":90,"language":10,"filename":36,"whenToUse":91,"highlighted":92},"08fdf379-2dd1-4227-bdf6-2c2984c89a7f","Text Paragraph","Represents a paragraph of text. It is the fundamental element for blocks of text in an HTML document, separating content into readable units.","\u003Cp>","For any block of text that forms a paragraph.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":94,"title":95,"description":96,"code":97,"language":10,"filename":36,"whenToUse":98,"highlighted":99},"752796b4-b033-4687-86b2-08d4d933539c","Line Break","Inserts a simple line break, moving subsequent content to the next line without creating a new paragraph. Used for line breaks within the same block of text (e.g., in an address).","\u003Cbr>","When a line break is needed, but a new paragraph is not semantically appropriate.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">br\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":101,"title":102,"description":103,"code":104,"language":10,"filename":36,"whenToUse":105,"highlighted":106},"d49d447d-bcd0-4767-b3e5-30e29c5bcae4","Horizontal Line (Thematic Break)","Represents a thematic break between paragraphs of content, indicating a change of subject or section. Usually rendered as a horizontal line by the browser, but its purpose is semantic.","\u003Chr>","To indicate a change of topic or section within the content.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">hr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":108,"title":109,"description":110,"snippets":111},"35bdbb1e-99b2-4601-8dd5-b8d9a575e84e","Text Formatting and Emphasis","Tags for applying formatting and giving semantic meaning to specific parts of text.",[112,119,126,133,140,147],{"id":113,"title":114,"description":115,"code":116,"language":10,"filename":36,"whenToUse":117,"highlighted":118},"d56f1829-5ee1-4a55-bd13-23ebc71d6f08","Important Text (Strong)","Indicates that the contained text is of great importance, relevance, or urgency. Usually rendered in bold by browsers. It has a stronger semantic meaning than just `\u003Cb>`.","\u003Cstrong>","To highlight critical or high-priority content.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">strong\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":120,"title":121,"description":122,"code":123,"language":10,"filename":36,"whenToUse":124,"highlighted":125},"ed2771e8-0012-49cf-8d5c-f2f2de0a1534","Emphasized Text","Indicates that the contained text should be emphasized, usually to give a different meaning or to express a tone. Generally rendered in italics by browsers. It has a stronger semantic meaning than just `\u003Ci>`.","\u003Cem>","To emphasize a word or phrase that changes the meaning of the sentence.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">em\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":127,"title":128,"description":129,"code":130,"language":10,"filename":36,"whenToUse":131,"highlighted":132},"868c22ee-2090-4f0d-ba3e-60ffc0fe0f19","Highlighted Text (Mark)","Highlights or emphasizes a piece of text, as if marked with a yellow highlighter. Used to draw attention to specific parts of the content that are relevant to the user's current context.","\u003Cmark>","To highlight relevant text in a specific context, such as search results.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">mark\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":134,"title":135,"description":136,"code":137,"language":10,"filename":36,"whenToUse":138,"highlighted":139},"da8ced1b-2bc8-4522-ac24-1f6401d2085c","Smaller Text (Small)","Represents secondary comments, copyrights, footer text, and other information considered 'small' in relation to the main text. Usually rendered with a smaller font.","\u003Csmall>","For copyright information, legal notices, or footer text.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">small\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":141,"title":142,"description":143,"code":144,"language":10,"filename":36,"whenToUse":145,"highlighted":146},"c7478e6d-1133-46b6-9730-00bf83afbc64","Deleted Text (Deleted)","Represents text that has been deleted from a document or is no longer relevant. Usually rendered with a line through the text (strikethrough), indicating it has been removed.","\u003Cdel>","To show changes in a document, such as old prices.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">del\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":148,"title":149,"description":150,"code":151,"language":10,"filename":36,"whenToUse":152,"highlighted":153},"867b9d11-97a4-4f0d-8599-1d82be63f860","Inserted Text (Inserted)","Represents text that has been inserted into a document. Usually rendered with an underline, indicating it has been added. Used in conjunction with `\u003Cdel>` to show revisions.","\u003Cins>","To show text that has been added to a revised document.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ins\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":155,"title":156,"description":157,"snippets":158},"8d4c7eb7-ce55-481e-8c6f-dc7b1e38229e","Links and Images","Elements for creating hyperlinks and embedding images in web pages, essential for navigation and visual content.",[159,166,173,180],{"id":160,"title":161,"description":162,"code":163,"language":10,"filename":36,"whenToUse":164,"highlighted":165},"26043cbc-744a-4d08-988e-43cdc09d9f40","Basic Link (Anchor)","Creates a hyperlink to another page, resource, or part of the same document. The `href` (Hypertext REFerence) attribute specifies the destination URL the link points to.","\u003Ca href=\"url\">","To create navigation links or external references.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> href\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"url\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":167,"title":168,"description":169,"code":170,"language":10,"filename":36,"whenToUse":171,"highlighted":172},"87c270f9-9f3c-4121-80b1-81eaaa133814","Link in New Tab","Creates a hyperlink that, when clicked, opens the specified resource in a new browser tab or window. The `target=\"_blank\"` attribute is used for this behavior.","\u003Ca href=\"url\" target=\"_blank\">","To open external links without taking the user away from the current page.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> href\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"url\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"_blank\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":174,"title":175,"description":176,"code":177,"language":10,"filename":36,"whenToUse":178,"highlighted":179},"7ba30198-227c-47d2-a01b-448d98d31b6a","Embed Image","Embeds an image in the document. The `src` (SouRCe) attribute specifies the path to the image file, and `alt` (ALTernative text) provides an alternative textual description, essential for accessibility (screen readers) and SEO.","\u003Cimg src=\"caminho\" alt=\"descrição\">","To display images on your page.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">img\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> src\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"caminho\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> alt\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"descrição\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":181,"title":182,"description":183,"code":184,"language":10,"filename":36,"whenToUse":185,"highlighted":186},"eea650d4-e2ce-49c3-aed3-cf668d20b9be","Responsive Images (Picture)","A container that allows specifying multiple image sources (`\u003Csource>`) for different conditions (such as screen sizes, pixel densities, or image formats), and an `\u003Cimg>` element as a fallback. Helps optimize image loading and adapt them to various devices.","\u003Cpicture>","To serve images optimized for different viewports or formats.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">picture\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":188,"title":189,"description":190,"snippets":191},"91f01cbb-8dc7-4e58-a467-dde0bb6fb0ea","🎯 Semantic Structure Elements","Elements that provide structural meaning to content, improving accessibility, SEO, and code maintenance.",[192,199,206,213,220,227,234],{"id":193,"title":194,"description":195,"code":196,"language":10,"filename":36,"whenToUse":197,"highlighted":198},"5b269fe2-e317-45d6-a55f-3b65707e3687","Page\u002FSection Header","Represents the introductory content of a section or the entire document, usually containing titles, logos, navigation, and\u002For a search field. Not to be confused with `\u003Ch1>-\u003Ch6>` headings.","\u003Cheader>","To group introductory elements, such as the top of a page or section.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":200,"title":201,"description":202,"code":203,"language":10,"filename":36,"whenToUse":204,"highlighted":205},"0ebcbde0-aad1-4400-872c-6ac05998c61f","Main Navigation","Represents a section of navigation links, such as menus, indexes, or tables of contents. Intended for the main site navigation or an important section.","\u003Cnav>","To wrap blocks of primary navigation links.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">nav\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":207,"title":208,"description":209,"code":210,"language":10,"filename":36,"whenToUse":211,"highlighted":212},"a2792ae1-e408-4c22-a312-331918996f40","Main Content","Represents the dominant content of the document's `\u003Cbody>`. There should be only one `\u003Cmain>` element per document, and its content should be unique to that page, excluding sidebars, navigation, etc.","\u003Cmain>","To delimit the main and unique content of your page.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">main\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":214,"title":215,"description":216,"code":217,"language":10,"filename":36,"whenToUse":218,"highlighted":219},"089a36c9-28b8-4021-b382-ee82e7573a5e","Generic Section","Represents a generic section of thematically grouped content. It usually contains a heading (h1-h6) and can be used to divide the main content into logical and coherent parts.","\u003Csection>","To group related content that forms a logical section.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":221,"title":222,"description":223,"code":224,"language":10,"filename":36,"whenToUse":225,"highlighted":226},"997ddef0-e4d7-4120-a488-b028dcc415b4","Independent Content (Article)","Represents independent and self-contained content, such as a blog post, a newspaper article, a user comment, or an interactive widget. Can be distributed and reused independently of the rest of the page.","\u003Carticle>","For content that can be read independently, such as a blog article.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">article\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":228,"title":229,"description":230,"code":231,"language":10,"filename":36,"whenToUse":232,"highlighted":233},"ae88d028-96f3-4206-a68a-ce0d4ed94fb9","Secondary Content (Aside)","Represents content that is tangentially related to the main content of the document, but can be considered separate. Often used for sidebars, pull quotes, or ad blocks.","\u003Caside>","For sidebars, pull quotes, or related information.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">aside\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":235,"title":236,"description":237,"code":238,"language":10,"filename":36,"whenToUse":239,"highlighted":240},"5e5b3979-b302-470f-aff2-8a8096bfc3d1","Rodapé da Página\u002FSeção","Representa o rodapé de uma seção ou de todo o documento. Geralmente contém informações sobre o autor, direitos autorais, links relacionados, informações de contato ou navegação secundária.","\u003Cfooter>","Para agrupar informações de rodapé, como direitos autorais e links de contato.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">footer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":242,"title":243,"description":244,"snippets":245},"ee72acd8-904c-47f5-ba01-db4445f6554e","Semantic Text Elements","Tags that add structural and contextual meaning to specific text blocks.",[246,253,260,267,274,281],{"id":247,"title":248,"description":249,"code":250,"language":10,"filename":36,"whenToUse":251,"highlighted":252},"d7808bc6-e0d0-4954-a781-4ebf43703707","Long Quote (Blockquote)","Indicates that the contained text is a long quote from another source. Usually rendered with an indent by the browser. The `cite` attribute can be used to point to the source of the quote.","\u003Cblockquote>","To quote blocks of text from other sources.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">blockquote\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":254,"title":255,"description":256,"code":257,"language":10,"filename":36,"whenToUse":258,"highlighted":259},"7056d04e-ab73-4048-a9e8-34f8f1983c9a","Work Title (Cite)","Used to cite the title of a creative work (book, film, music, painting, etc.) or the name of the source of a quotation. The content is usually rendered in italics.","\u003Ccite>","To reference the title of a cited work.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">cite\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":261,"title":262,"description":263,"code":264,"language":10,"filename":36,"whenToUse":265,"highlighted":266},"c306f382-8186-48b2-85c5-48b59f45ec31","Computer Code","Displays a small fragment of computer code. The content is usually rendered in a monospace font, indicating it is code. Can be used within `\u003Cpre>` for larger blocks of code.","\u003Ccode>","To display inline code snippets or within a paragraph.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":268,"title":269,"description":270,"code":271,"language":10,"filename":36,"whenToUse":272,"highlighted":273},"0c1548dc-5a92-4a90-91a0-10e73ac4edd8","Preformatted Text","Displays preformatted text. Text within this tag is displayed in a monospace font and preserves whitespace and line breaks exactly as written in the source code. Useful for displaying code or ASCII art.","\u003Cpre>","To display blocks of code or text that require exact formatting.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">pre\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":275,"title":276,"description":277,"code":278,"language":10,"filename":36,"whenToUse":279,"highlighted":280},"b6356c76-b411-4795-afb1-04fe676ad8d7","Abbreviation","Represents an abbreviation or an acronym. The `title` attribute can be used to provide the full expansion of the abbreviation, improving accessibility and user understanding.","\u003Cabbr>","To mark abbreviations and provide their full meaning.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">abbr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":282,"title":283,"description":284,"code":285,"language":10,"filename":36,"whenToUse":286,"highlighted":287},"ce4bcc3a-ab78-452c-b67c-13baba396db8","Contact Information","Provides contact information for the author\u002Fowner of the document or the nearest section. May include name, physical address, email, phone, URL, etc.","\u003Caddress>","To display contact information semantically.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">address\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":289,"title":290,"description":291,"snippets":292},"5f01c8c8-8290-4bb3-b5b9-ef4796c063a1","Media and Embedded Content","Elements for embedding figures, captions, and other external content types into the page.",[293,300,307,314,321],{"id":294,"title":295,"description":296,"code":297,"language":10,"filename":36,"whenToUse":298,"highlighted":299},"fce551d4-d46d-48a3-aadd-e2641493c1c0","Figure Container","Used to group self-contained content, such as images, diagrams, photos, code blocks, etc., along with its caption (`\u003Cfigcaption>`), making it independent of the main document flow and referencable.","\u003Cfigure>","To group an image, code, or other content with its caption.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">figure\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":301,"title":302,"description":303,"code":304,"language":10,"filename":36,"whenToUse":305,"highlighted":306},"5941905c-7e7c-4972-8d3a-14c8b5bc5717","Figure Caption","Provides a caption or description for the content of a `\u003Cfigure>` element. It should be the first or last child of a `\u003Cfigure>`.","\u003Cfigcaption>","To add a descriptive caption to a \u003Cfigure> element.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">figcaption\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":308,"title":309,"description":310,"code":311,"language":10,"filename":36,"whenToUse":312,"highlighted":313},"4cd2d080-ff14-4189-9761-c95dc00651cc","External Content (Iframe)","Embeds another HTML document within the current document. Used to display content from other sources, such as YouTube videos, Google Maps, or content from other websites, in an isolated manner.","\u003Ciframe>","To embed content from other sources or HTML documents.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">iframe\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":315,"title":316,"description":317,"code":318,"language":10,"filename":36,"whenToUse":319,"highlighted":320},"ddf46e39-f5c9-4947-9e83-842563f79a5c","Embedded Content (Embed)","Embeds external content from a specified insertion point in the document. Used to integrate third-party plugins or non-HTML content, such as PDFs, audio\u002Fvideo files, or Flash animations (though its use has declined).","\u003Cembed>","To embed content from external plugins or non-HTML media.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">embed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":322,"title":323,"description":324,"code":325,"language":10,"filename":36,"whenToUse":326,"highlighted":327},"37881e6c-a3ae-47fa-bdaa-aa1a9107ddc8","Multimedia Object (Object)","Embeds an external object (such as a plugin, PDF, Flash, or even another HTML document) into the HTML document. Offers more fallback and content control options than `\u003Cembed>`, but is less common nowadays.","\u003Cobject>","To embed external objects with more control over fallbacks.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">object\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":329,"title":330,"description":331,"snippets":332},"978711f4-9c2a-42ce-92b7-a054d3125879","📋 List Types","Elements for organizing information in ordered, unordered, or definition lists.",[333,340,347,354,361,368],{"id":334,"title":335,"description":336,"code":337,"language":10,"filename":36,"whenToUse":338,"highlighted":339},"c464ad02-7756-4ecc-96f2-07cffdaf5be1","Unordered List","Creates an unordered list of items. List items are usually marked with bullets (dots, squares, etc.), indicating that the order is not semantically important.","\u003Cul>","For lists where the order of items is not relevant (e.g., shopping list).","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":341,"title":342,"description":343,"code":344,"language":10,"filename":36,"whenToUse":345,"highlighted":346},"12be1f63-fd45-498a-a543-82ca15e6670d","Ordered List","Creates an ordered list of items. List items are usually marked with numbers or letters, indicating a sequence or hierarchy.","\u003Col>","For lists where the order of items is important (e.g., recipe steps).","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ol\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":348,"title":349,"description":350,"code":351,"language":10,"filename":36,"whenToUse":352,"highlighted":353},"4344fc7f-e70c-4d37-a337-d0aa1e57c4ac","List Item","Represents an individual item within a list (`\u003Cul>` or `\u003Col>`). Must be a direct child of `\u003Cul>`, `\u003Col>`, or `\u003Cmenu>`.","\u003Cli>","For each item within an ordered or unordered list.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":355,"title":356,"description":357,"code":358,"language":10,"filename":36,"whenToUse":359,"highlighted":360},"0f95933b-5026-41aa-8434-9721c7d113e0","Definition List","Creates a definition list, which is a list of terms and their respective descriptions. Useful for glossaries, Q&A, or metadata.","\u003Cdl>","To create glossaries or lists of terms and their definitions.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">dl\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":362,"title":363,"description":364,"code":365,"language":10,"filename":36,"whenToUse":366,"highlighted":367},"63bfacd5-07a1-42b8-82cd-9b45bd49ba95","Definition Term","Represents a term to be defined within a definition list (`\u003Cdl>`). Each `\u003Cdt>` is usually followed by one or more `\u003Cdd>` elements.","\u003Cdt>","To define the term in a definition list.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">dt\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":369,"title":370,"description":371,"code":372,"language":10,"filename":36,"whenToUse":373,"highlighted":374},"3a0a87d8-8a1b-4728-921c-f2a251b1a6d2","Definition Description","Represents the description or definition of a term (`\u003Cdt>`) within a definition list (`\u003Cdl>`).","\u003Cdd>","To provide the description or explanation of a term in a definition list.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">dd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":376,"title":377,"description":378,"snippets":379},"4e6ad5cf-4d2c-4c17-8802-2889e221b531","List Attributes","Attributes for customizing the appearance and behavior of ordered and unordered lists.",[380,387,394,401,408,415],{"id":381,"title":382,"description":383,"code":384,"language":10,"filename":36,"whenToUse":385,"highlighted":386},"b32e8ac4-65e5-4205-9817-97c03d541a71","Standard Numbered List","Defines an ordered list that uses Arabic numerals (1, 2, 3...) as markers. This is the default type and can be omitted.","\u003Col type=\"1\">","For ordered lists with standard numbering.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ol\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"1\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":388,"title":389,"description":390,"code":391,"language":10,"filename":36,"whenToUse":392,"highlighted":393},"70b2dbe7-fbe5-4a48-a0f8-5339b6aa24e5","Uppercase Letter List","Defines an ordered list that uses uppercase letters (A, B, C...) as markers for the list items.","\u003Col type=\"A\">","For ordered lists that use uppercase letters as markers.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ol\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"A\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":395,"title":396,"description":397,"code":398,"language":10,"filename":36,"whenToUse":399,"highlighted":400},"09660b3d-0217-4321-b72d-a9ee0d0e82d2","Lowercase Letter List","Defines an ordered list that uses lowercase letters (a, b, c...) as markers for the list items.","\u003Col type=\"a\">","For ordered lists that use lowercase letters as markers.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ol\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"a\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":402,"title":403,"description":404,"code":405,"language":10,"filename":36,"whenToUse":406,"highlighted":407},"8b8efc91-7605-46b8-b2fb-4a2ce883b42f","Roman Numeral List","Defines an ordered list that uses uppercase Roman numerals (I, II, III...) as markers for the list items.","\u003Col type=\"I\">","For ordered lists that use Roman numerals as markers.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ol\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"I\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":409,"title":410,"description":411,"code":412,"language":10,"filename":36,"whenToUse":413,"highlighted":414},"50e6f6d8-9915-4366-b358-dbef205856e2","Ordered List Start","Starts the count of an ordered list from a specific number (in this case, 5), instead of starting from 1. The value can be any integer.","\u003Col start=\"5\">","To continue a list from a specific point or when the logical order requires a different start.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ol\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"5\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":416,"title":417,"description":418,"code":419,"language":10,"filename":36,"whenToUse":420,"highlighted":421},"ea6c13b7-c3fe-4dbe-8860-5d62f6718326","Unordered List (No Markers)","Removes the default markers from an unordered list, allowing full customization via CSS. This is an example of inline styling, but external CSS is preferred.","\u003Cul style=\"list-style-type: none;\">","When you want to remove default markers and style the list with CSS.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"list-style-type: none;\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":423,"title":424,"description":425,"snippets":426},"1fe96de9-20db-4cdb-a6ac-b8ee42735429","Table Structure","Fundamental elements for creating and organizing data in tabular format.",[427,434,441,448,455,462,469],{"id":428,"title":429,"description":430,"code":431,"language":10,"filename":36,"whenToUse":432,"highlighted":433},"b54e0b01-1fa4-4a61-b935-e507b6b7190f","Table Container","The main container for tabular data. Defines an HTML table, grouping all its elements (header, body, footer, rows, and cells).","\u003Ctable>","To create any data table.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">table\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":435,"title":436,"description":437,"code":438,"language":10,"filename":36,"whenToUse":439,"highlighted":440},"439d09a7-1685-4003-94b1-fe04719a2289","Table Header","Groups the header content of a table. Contains the column header information, usually using `\u003Cth>` elements.","\u003Cthead>","To define the semantic header of a table.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">thead\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":442,"title":443,"description":444,"code":445,"language":10,"filename":36,"whenToUse":446,"highlighted":447},"cc7780fa-44b1-43ba-b285-dc91fc346758","Table Body","Groups the body content of a table. Contains the main data rows of the table, using `\u003Ctr>` and `\u003Ctd>` elements.","\u003Ctbody>","To define the main data body of a table.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">tbody\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":449,"title":450,"description":451,"code":452,"language":10,"filename":36,"whenToUse":453,"highlighted":454},"f24bbb4f-29e4-4e40-b636-62d399d28b44","Table Footer","Groups the footer content of a table. Typically contains summaries, totals, or additional information related to the table body data.","\u003Ctfoot>","To define the semantic footer of a table, such as totals or notes.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">tfoot\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":456,"title":457,"description":458,"code":459,"language":10,"filename":36,"whenToUse":460,"highlighted":461},"1ada9f69-c60d-408b-b0ac-db52ff21ac4f","Table Row","Defines a row of cells in a table (Table Row). Each `\u003Ctr>` must contain one or more `\u003Cth>` (header cells) or `\u003Ctd>` (data cells) elements.","\u003Ctr>","For each new row of data or header in the table.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">tr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":463,"title":464,"description":465,"code":466,"language":10,"filename":36,"whenToUse":467,"highlighted":468},"29918bcb-9c0d-4952-afea-5166ec758001","Header Cell","Defines a header cell in a table (Table Header). Content is usually centered and bold by default, and semantically represents a header for a column or row, improving accessibility.","\u003Cth>","For cells that serve as column or row headers.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">th\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":470,"title":471,"description":472,"code":473,"language":10,"filename":36,"whenToUse":474,"highlighted":475},"0295cd1c-9efa-4973-b235-3d06d73be1cd","Data Cell","Defines a standard data cell in a table (Table Data). It contains the actual table data. It is the most basic element for displaying content within a row.","\u003Ctd>","For each common data cell in a table.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">td\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":477,"title":478,"description":479,"snippets":480},"90d1a592-ffa1-4503-834f-e65a83531c8a","Table Attributes","Attributes for controlling the presentation and layout of cells in HTML tables.",[481,488,495,502,509],{"id":482,"title":483,"description":484,"code":485,"language":10,"filename":36,"whenToUse":486,"highlighted":487},"6b14da42-8527-4f65-9b0e-4547cb9e2825","Table Border (Deprecated)","Adds a 1-pixel border around the table and its cells. This attribute is deprecated in HTML5; border styling should be applied exclusively via CSS for better separation of concerns.","\u003Ctable border=\"1\">","Avoid using. Prefer CSS for border styling.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">table\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\"> border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"1\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":489,"title":490,"description":491,"code":492,"language":10,"filename":36,"whenToUse":493,"highlighted":494},"93e5b76e-8564-4313-95ed-5794e793912c","Merge Columns (Colspan)","Makes a data cell span (merge) two or more adjacent columns in the table. The attribute value indicates the number of columns to be merged.","\u003Ctd colspan=\"2\">","To merge cells horizontally, spanning multiple columns.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">td\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> colspan\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"2\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":496,"title":497,"description":498,"code":499,"language":10,"filename":36,"whenToUse":500,"highlighted":501},"5afd4cfe-67eb-4ca9-b7ac-41b582559433","Merge Rows (Rowspan)","Causes a data cell to occupy (merge) three or more adjacent rows in the table. The attribute value indicates the number of rows to be merged.","\u003Ctd rowspan=\"3\">","To merge cells vertically, spanning multiple rows.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">td\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> rowspan\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"3\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":503,"title":504,"description":505,"code":506,"language":10,"filename":36,"whenToUse":507,"highlighted":508},"d0a6aa19-b285-4550-ba66-e8d23dc46356","Header Scope (Column)","Indicates that the header cell (`\u003Cth>`) provides a header for all cells in the same column. Essential for accessibility, as screen readers can associate data with their respective headers.","\u003Cth scope=\"col\">","To indicate that a \u003Cth> is the header for an entire column.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">th\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> scope\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"col\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":510,"title":511,"description":512,"code":513,"language":10,"filename":36,"whenToUse":514,"highlighted":515},"f6237f6a-ec9d-4a09-be89-00ec6c05bfac","Header Scope (Row)","Indicates that the header cell (`\u003Cth>`) provides a header for all cells in the same row. Essential for accessibility, especially in complex tables.","\u003Cth scope=\"row\">","To indicate that a \u003Cth> is the header for an entire row.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">th\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> scope\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"row\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":517,"title":518,"description":519,"snippets":520},"a662cd6e-000d-4cce-8f58-7503e93c3b10","📝 Form Structure","Basic elements for building HTML forms and logically grouping their fields.",[521,528,535,542,549],{"id":522,"title":523,"description":524,"code":525,"language":10,"filename":36,"whenToUse":526,"highlighted":527},"67f43356-7996-44fe-8ec1-f2b03f75376f","Form Container","Defines an HTML form to collect user input. All input elements of a form (inputs, textareas, selects, buttons) must be contained within this tag so that their data can be submitted.","\u003Cform>","To start creating a form for data collection.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">form\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":529,"title":530,"description":531,"code":532,"language":10,"filename":36,"whenToUse":533,"highlighted":534},"a6396d06-93db-4f45-b698-aad6f78c6452","Form with Action and Method","Defines a form that will submit its data to the URL `\u002Fsubmit` using the HTTP POST method. The `action` attribute specifies the target URL and `method` the HTTP method (GET\u002FPOST) for data submission.","\u003Cform action=\"\u002Fsubmit\" method=\"post\">","To configure how and where form data will be submitted.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">form\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> action\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u002Fsubmit\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> method\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"post\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":536,"title":537,"description":538,"code":539,"language":10,"filename":36,"whenToUse":540,"highlighted":541},"1763bb81-fb58-437c-9745-95ec867bf73a","Field Group (Fieldset)","Groups related elements within a form, creating a visual box around them. Helps organize complex forms into logical sections and improves accessibility for screen readers.","\u003Cfieldset>","To logically group related fields in a form.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">fieldset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":543,"title":544,"description":545,"code":546,"language":10,"filename":36,"whenToUse":547,"highlighted":548},"5f697fb5-e0ce-46da-aac2-0a8b5e4da482","Group Caption (Legend)","Provides a caption or title for the content of a `\u003Cfieldset>` element, describing the purpose of the group of fields. It is displayed on the border of the fieldset.","\u003Clegend>","To give a title to a group of fields within a \u003Cfieldset>.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">legend\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":550,"title":551,"description":552,"code":553,"language":10,"filename":36,"whenToUse":554,"highlighted":555},"f525b577-f21b-4004-822f-65519e725d45","Field Label (Label)","Associates a text label with a form field (such as `\u003Cinput>`, `\u003Ctextarea>`, `\u003Cselect>`). The `for` attribute must match the field's `id` to ensure accessibility, allowing the user to click the label to focus the field.","\u003Clabel for=\"id\">","To provide accessible labels for all form fields.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"id\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":557,"title":558,"description":559,"snippets":560},"deb45952-a946-4192-8c5e-3ee2e25c4f0d","Basic Input Fields","Most common input field types for collecting different types of user data.",[561,568,575,582,589,596],{"id":562,"title":563,"description":564,"code":565,"language":10,"filename":36,"whenToUse":566,"highlighted":567},"29cefcb0-b8ed-481b-a38e-46e7f4f9c422","Text Field","Creates a single-line text input field for general data, such as names, surnames, or short addresses.","\u003Cinput type=\"text\">","For generic single-line text input.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":569,"title":570,"description":571,"code":572,"language":10,"filename":36,"whenToUse":573,"highlighted":574},"3604cf9a-0a56-4af7-a680-0a8b28c4c600","Email Field","Creates an input field for email addresses. Browsers may offer basic email format validation and, on mobile devices, activate an optimized keyboard for emails.","\u003Cinput type=\"email\">","To collect email addresses.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"email\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":576,"title":577,"description":578,"code":579,"language":10,"filename":36,"whenToUse":580,"highlighted":581},"a15ca0ad-d94a-4358-a3eb-0d7e541030c3","Password Field","Creates an input field for passwords. Typed characters are masked (usually with asterisks or dots) to hide the input, but the value is sent as plain text.","\u003Cinput type=\"password\">","To collect passwords or sensitive information that should be masked.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"password\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":583,"title":584,"description":585,"code":586,"language":10,"filename":36,"whenToUse":587,"highlighted":588},"d580f76e-2894-4730-ab54-6cd91f794602","Number Field","Creates an input field for numbers. Browsers can display controls to increase\u002Fdecrease the value (spin buttons) and validate that the input is numeric. Can use `min`, `max`, `step` attributes.","\u003Cinput type=\"number\">","To collect numerical inputs, such as age or quantity.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"number\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":590,"title":591,"description":592,"code":593,"language":10,"filename":36,"whenToUse":594,"highlighted":595},"d7774814-8351-45bb-ad1c-7a83d1279c1e","Telephone Field","Creates an input field for phone numbers. On mobile devices, it can activate an optimized numeric keypad. It does not have native phone format validation, which must be done with `pattern` or JavaScript.","\u003Cinput type=\"tel\">","To collect phone numbers.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"tel\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":597,"title":598,"description":599,"code":600,"language":10,"filename":36,"whenToUse":601,"highlighted":602},"1139efcc-a713-4068-a8a6-6149283dd4ce","URL Field","Creates an input field for URLs. Browsers may offer basic URL format validation. On mobile devices, it can activate a URL-optimized keyboard.","\u003Cinput type=\"url\">","To collect website addresses or links.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"url\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":604,"title":605,"description":606,"snippets":607},"15fe05cc-b425-4e5e-8945-923af6618896","Form Selection Fields","Elements allowing users to choose from predefined options in a form.",[608,615,622,629,636,643],{"id":609,"title":610,"description":611,"code":612,"language":10,"filename":36,"whenToUse":613,"highlighted":614},"429c938b-b034-4f9b-8d3b-df7fb18474ef","Checkbox","Creates a checkbox that allows the user to choose zero or more options from a set. Each checkbox is independent, unless semantically grouped.","\u003Cinput type=\"checkbox\">","When the user can select multiple options from a list.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"checkbox\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":616,"title":617,"description":618,"code":619,"language":10,"filename":36,"whenToUse":620,"highlighted":621},"8fe74f45-91cf-4b4b-9eec-9edc382ae0ae","Radio Button","Creates a radio button that allows the user to select only one option from a mutually exclusive set. Radio buttons with the same `name` attribute form a group, ensuring that only one can be selected.","\u003Cinput type=\"radio\">","When the user must select only one option from a group.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"radio\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":623,"title":624,"description":625,"code":626,"language":10,"filename":36,"whenToUse":627,"highlighted":628},"9bce65e9-2e7e-4528-aea9-59e530f6042d","Dropdown List (Select)","Creates a dropdown list of options. The user can select one option by default, or multiple if the `multiple` attribute is added. Each option is defined by an `\u003Coption>` tag.","\u003Cselect>","To allow the user to select one or more options from a long list.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":630,"title":631,"description":632,"code":633,"language":10,"filename":36,"whenToUse":634,"highlighted":635},"1003406b-4ca6-4746-ad0e-4fc6f6505750","Dropdown List Option","Defines an individual option within a `\u003Cselect>` or `\u003Cdatalist>` element. The text between the `\u003Coption>` tags is what the user sees, and the `value` attribute is what is sent to the server.","\u003Coption>","For each selectable item within a \u003Cselect>.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">option\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":637,"title":638,"description":639,"code":640,"language":10,"filename":36,"whenToUse":641,"highlighted":642},"8a73867c-8d40-44f6-9266-9566f15d120d","Option Group (Optgroup)","Groups related options within a `\u003Cselect>` element, creating a heading for the option group. The `label` attribute defines the group's heading text.","\u003Coptgroup>","To organize options in a \u003Cselect> into logical categories.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">optgroup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":644,"title":645,"description":646,"code":647,"language":10,"filename":36,"whenToUse":648,"highlighted":649},"88d6400a-28af-40f4-85b4-e7da9ec9cf9d","Multiline Text Area","Creates a multiline text area for longer text input, such as comments or messages. The `rows` and `cols` attributes define its initial visible dimensions (rows and columns).","\u003Ctextarea>","To collect long text inputs, such as comments or descriptions.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">textarea\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":651,"title":652,"description":653,"snippets":654},"59666cf0-03da-4063-902a-e1a5a259c19c","Buttons and Form Controls","Elements for submitting, resetting, or performing other form actions.",[655,662,669,676,683],{"id":656,"title":657,"description":658,"code":659,"language":10,"filename":36,"whenToUse":660,"highlighted":661},"da30d7fd-3d6a-4796-8186-cae3688f46cc","Submit Button (Button)","Creates a button that, when clicked, submits form data to the server. It is the most common type of button to finalize form interaction. Allows HTML content inside the tag.","\u003Cbutton type=\"submit\">","To submit form data.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"submit\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":663,"title":664,"description":665,"code":666,"language":10,"filename":36,"whenToUse":667,"highlighted":668},"9b05035d-a008-4336-b688-e2229ebe245e","Reset Button","Creates a button that, when clicked, resets all form fields to their initial values. Useful to allow the user to start over.","\u003Cbutton type=\"reset\">","To allow the user to clear and restart the form.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"reset\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":670,"title":671,"description":672,"code":673,"language":10,"filename":36,"whenToUse":674,"highlighted":675},"12250765-3eb7-43a8-bb0c-78e2daa47706","Generic Button (Button)","Creates a generic button that has no default submit or reset behavior. Used to trigger JavaScript scripts or other custom actions without submitting the form.","\u003Cbutton type=\"button\">","For buttons that execute JavaScript actions without submitting the form.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":677,"title":678,"description":679,"code":680,"language":10,"filename":36,"whenToUse":681,"highlighted":682},"a36a0099-56d8-46a6-8969-69faeae1cf1d","Submit Button (Input)","Creates a form submission button with the appearance of an `input`. Functionally similar to `\u003Cbutton type=\"submit\">`, but does not allow HTML content inside the tag, only the `value` attribute's value as text.","\u003Cinput type=\"submit\">","To submit form data, as an alternative to \u003Cbutton type=\"submit\">.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"submit\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":684,"title":685,"description":686,"code":687,"language":10,"filename":36,"whenToUse":688,"highlighted":689},"d5bd86ac-1cf2-465e-9a1e-ed425f0d3f55","Reset Button (Input)","Creates a form reset button with the appearance of an `input`. Functionally similar to `\u003Cbutton type=\"reset\">`, but does not allow HTML content inside the tag.","\u003Cinput type=\"reset\">","To allow the user to clear and reset the form, as an alternative to \u003Cbutton type=\"reset\">.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"reset\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":691,"title":692,"description":693,"snippets":694},"8fe9a536-456a-45a2-88f1-53b0d9c124ff","🚀 Modern HTML5 Fields","New HTML5 input types for collecting specific data with enhanced validation and user interfaces.",[695,702,709,716,723,730,737,744],{"id":696,"title":697,"description":698,"code":699,"language":10,"filename":36,"whenToUse":700,"highlighted":701},"20935aeb-67ed-4fff-bfa6-a67ba7299c47","Date Picker","Creates an input field for selecting a date (day, month, year). Browsers usually provide a native calendar selector (date picker) to facilitate selection.","\u003Cinput type=\"date\">","To collect a specific date from the user.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"date\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":703,"title":704,"description":705,"code":706,"language":10,"filename":36,"whenToUse":707,"highlighted":708},"9dc3b457-4983-4116-96f9-c59de7b8386a","Time Selector","Creates an input field for selecting a time (hours and minutes). Browsers may offer an optimized time control.","\u003Cinput type=\"time\">","To collect a specific time from the user.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"time\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":710,"title":711,"description":712,"code":713,"language":10,"filename":36,"whenToUse":714,"highlighted":715},"42b2c7de-0137-46b6-aca9-ed777d966969","Local Date and Time Selector","Creates an input field for selecting a local date and time, without timezone information. Combines the functionalities of `type=\"date\"` and `type=\"time\"`.","\u003Cinput type=\"datetime-local\">","To collect a combined local date and time.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"datetime-local\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":717,"title":718,"description":719,"code":720,"language":10,"filename":36,"whenToUse":721,"highlighted":722},"dad4c092-0139-4e1c-9394-0a7cde9d8f25","Month Selector","Creates an input field for selecting a month and year. Useful for credit card expiration dates or time periods.","\u003Cinput type=\"month\">","To collect only the month and year.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"month\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":724,"title":725,"description":726,"code":727,"language":10,"filename":36,"whenToUse":728,"highlighted":729},"54cb93da-a24e-4f14-b359-c53ae051208d","Week Selector","Creates an input field for selecting a week and year. The display format may vary between browsers.","\u003Cinput type=\"week\">","To collect a specific week of the year.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"week\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":731,"title":732,"description":733,"code":734,"language":10,"filename":36,"whenToUse":735,"highlighted":736},"6cfe6e69-564f-4685-926d-2a07c7276c28","Color Picker","Creates an input field for selecting a color. Browsers usually provide a native color picker, returning the value in hexadecimal format (e.g., `#RRGGBB`).","\u003Cinput type=\"color\">","To allow the user to choose a color.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"color\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":738,"title":739,"description":740,"code":741,"language":10,"filename":36,"whenToUse":742,"highlighted":743},"a58b74c4-27ec-4c3f-923d-66a240dc352a","Slider Control (Range)","Creates a slider control for selecting a value within a specified range. The `min`, `max`, and `step` attributes define the control's behavior and limits.","\u003Cinput type=\"range\">","To allow selection of a numeric value within a range, such as volume or zoom.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"range\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":745,"title":746,"description":747,"code":748,"language":10,"filename":36,"whenToUse":749,"highlighted":750},"46d6df8c-e155-4c88-8d05-82c825044966","File Upload","Creates an input field that allows the user to select one or more files from their device for upload to the server. The `multiple` attribute allows the selection of multiple files.","\u003Cinput type=\"file\">","To allow the user to upload files.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"file\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":752,"title":753,"description":754,"snippets":755},"2fb96123-680c-4aa2-b34d-713d82e1999e","HTML5 Form Validation","HTML5 attributes for native form validation, reducing the need for JavaScript for basic checks.",[756,763,770,777,784,791,798],{"id":757,"title":758,"description":759,"code":760,"language":10,"filename":36,"whenToUse":761,"highlighted":762},"36783c55-f071-446a-9a92-dcd8d2a1f1b8","Required Field","A boolean attribute that makes the form field mandatory. The form cannot be submitted if the field is empty. The browser will display a standard error message.","required","For fields that must be filled before form submission.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">required\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":764,"title":765,"description":766,"code":767,"language":10,"filename":36,"whenToUse":768,"highlighted":769},"d00f8178-1118-40fc-ab71-c2b7126e506b","Validation Pattern (Pattern)","Defines a regular expression that the field's input must match to be considered valid. Used for custom format validation (e.g., postal code, name format).","pattern=\"[A-Za-z]{3}\"","To validate the format of a field's input using regular expressions.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">pattern=\"[A-Za-z]{3}\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":771,"title":772,"description":773,"code":774,"language":10,"filename":36,"whenToUse":775,"highlighted":776},"2d173854-dea3-4509-bbaa-58830b6f68e3","Minimum Length","Defines the minimum number of characters a text field (`\u003Cinput type=\"text\">`, `\u003Ctextarea>`) must have to be valid.","minlength=\"3\"","To ensure text input has a minimum number of characters.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">minlength=\"3\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":778,"title":779,"description":780,"code":781,"language":10,"filename":36,"whenToUse":782,"highlighted":783},"9e8f7720-1c07-4f7b-abbe-8f588d1836d7","Maximum Length","Defines the maximum number of characters a text field (`\u003Cinput type=\"text\">`, `\u003Ctextarea>`) can have.","maxlength=\"50\"","To limit the number of characters that can be entered into a text field.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">maxlength=\"50\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":785,"title":786,"description":787,"code":788,"language":10,"filename":36,"whenToUse":789,"highlighted":790},"03bd9174-b66a-49c5-b544-e31055bb456c","Minimum Value","Defines the minimum allowed value for numeric (`type=\"number\"`, `type=\"range\"`) or date\u002Ftime (`type=\"date\"`, `type=\"time\"`) fields.","min=\"0\"","To define the minimum acceptable value for numeric or date\u002Ftime inputs.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">min=\"0\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":792,"title":793,"description":794,"code":795,"language":10,"filename":36,"whenToUse":796,"highlighted":797},"baadc456-1438-436a-b84e-af26cde938ec","Maximum Value","Defines the maximum allowed value for numeric fields (`type=\"number\"`, `type=\"range\"`) or date\u002Ftime fields (`type=\"date\"`, `type=\"time\"`).","max=\"100\"","To define the maximum acceptable value for numeric or date\u002Ftime inputs.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">max=\"100\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":799,"title":800,"description":801,"code":802,"language":10,"filename":36,"whenToUse":803,"highlighted":804},"2fdfe32c-c699-4045-8bbc-3dd704fe98c4","Increment (Step)","Defines the allowed increment for numeric (`type=\"number\"`, `type=\"range\"`) or date\u002Ftime fields. For example, a `step` of 5 would only allow multiples of 5 (0, 5, 10...).","step=\"5\"","To control value increments in numeric or time fields.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">step=\"5\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":806,"title":807,"description":808,"snippets":809},"d6f3743b-0504-4c3e-94c1-9d6f307883dd","Form Helper Elements","HTML5 elements that enhance form user experience with suggestions, visual feedback, and dynamic results.",[810,817,824,831,838],{"id":811,"title":812,"description":813,"code":814,"language":10,"filename":36,"whenToUse":815,"highlighted":816},"9daf9646-289f-43cb-add8-96e858eace78","Predefined Options List (Datalist)","Provides a list of predefined options for an `\u003Cinput>` field. The user can type, and the browser suggests options from the list, or they can choose directly. The `id` of the `\u003Cdatalist>` is referenced by the `list` attribute of the `\u003Cinput>`.","\u003Cdatalist>","To provide auto-completion suggestions for text fields.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">datalist\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":818,"title":819,"description":820,"code":821,"language":10,"filename":36,"whenToUse":822,"highlighted":823},"32cbbb0b-85de-4636-8ec9-0eb106632eef","Calculation Result (Output)","Displays the result of a calculation or the output of a user action. Used in conjunction with JavaScript to dynamically update the displayed value based on user input in other form fields.","\u003Coutput>","To display calculation results or dynamic feedback in forms.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">output\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":825,"title":826,"description":827,"code":828,"language":10,"filename":36,"whenToUse":829,"highlighted":830},"4afd7333-4080-4c69-a760-9a671ae7fe78","Barra de Progresso","Representa o progresso de uma tarefa. Pode ser usado para indicar o progresso de um download, upload, carregamento de página ou qualquer outra operação que tenha um valor máximo conhecido. Os atributos `value` e `max` definem o progresso.","\u003Cprogress>","Para exibir o progresso de uma tarefa em andamento.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">progress\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":832,"title":833,"description":834,"code":835,"language":10,"filename":36,"whenToUse":836,"highlighted":837},"a5876925-4098-49a1-aa8a-21156071e4ca","Scalar Meter (Meter)","Represents a scalar value within a known range. Used to display measurements like disk usage, search result relevance, temperature, or any value within a limit. Different from `\u003Cprogress>`, which shows the progress of a task.","\u003Cmeter>","To display a value within a fixed range, like a battery meter.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":839,"title":840,"description":841,"code":842,"language":10,"filename":36,"whenToUse":843,"highlighted":844},"0ec16e9a-ae13-4ab9-9a76-1249630253ee","Key Generation (Keygen - Obsolete)","Obsolete element, used to generate a key pair (public\u002Fprivate) for authentication. Should not be used in new developments due to security concerns and lack of modern support. It was removed from the HTML5 standard.","\u003Ckeygen>","Avoid use, as it is obsolete and unsupported.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">keygen\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":846,"title":847,"description":848,"snippets":849},"edfc56c6-5637-44dd-bd7d-d41f10338177","🎬 Audio and Video","HTML5 elements for embedding and controlling multimedia content directly in web pages.",[850,857,864,871,878,885],{"id":851,"title":852,"description":853,"code":854,"language":10,"filename":36,"whenToUse":855,"highlighted":856},"d67063b7-c63c-4209-9c86-617a729d0241","Audio Player","Embeds audio content in the document. The `controls` attribute adds the browser's default playback controls (play\u002Fpause, volume, progress bar, etc.), allowing user interaction.","\u003Caudio controls>","To embed audio files on your page.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">audio\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> controls\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":858,"title":859,"description":860,"code":861,"language":10,"filename":36,"whenToUse":862,"highlighted":863},"720c7a59-46c8-44e5-8be1-92177dd9805e","Video Player","Embeds video content in the document. The `controls` attribute adds the browser's default playback controls (play\u002Fpause, volume, progress bar, fullscreen, etc.), allowing user interaction.","\u003Cvideo controls>","To embed video files on your page.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">video\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> controls\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":865,"title":866,"description":867,"code":868,"language":10,"filename":36,"whenToUse":869,"highlighted":870},"e8bb882d-61aa-4113-a866-6c3b3d636fe3","Media Source","Specifies multiple media sources for `\u003Caudio>` or `\u003Cvideo>` elements. The browser chooses the first source it can play, based on the `type` attribute (e.g., `video\u002Fmp4`, `audio\u002Fmpeg`), ensuring cross-browser compatibility.","\u003Csource src=\"file.mp4\" type=\"video\u002Fmp4\">","To provide different audio\u002Fvideo formats for broad compatibility.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">source\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> src\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"file.mp4\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"video\u002Fmp4\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":872,"title":873,"description":874,"code":875,"language":10,"filename":36,"whenToUse":876,"highlighted":877},"bc50516d-fa33-4e9c-ad0b-4e06b683772b","Captions\u002FDescriptions Track","Allows adding timed text tracks (such as subtitles, closed captions, descriptions, chapters) to `\u003Cvideo>` or `\u003Caudio>` elements. The `kind` attribute defines the track type (e.g., `subtitles`, `captions`, `descriptions`).","\u003Ctrack kind=\"subtitles\" src=\"subtitles.vtt\">","To add subtitles, descriptions, or other timed metadata to media.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"subtitles\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> src\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"subtitles.vtt\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":879,"title":880,"description":881,"code":882,"language":10,"filename":36,"whenToUse":883,"highlighted":884},"4f3ccc99-70e2-4912-b0d0-360ff67c75f3","Autoplay Video","A video configured to start playback automatically (`autoplay`), loop indefinitely (`loop`), and with audio muted (`muted`) upon page load. Common for background videos or banners, as browsers generally block `autoplay` with sound.","\u003Cvideo autoplay loop muted>","For background videos or those that should be soundless and loop automatically.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">video\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> autoplay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> loop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> muted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":886,"title":887,"description":888,"code":889,"language":10,"filename":36,"whenToUse":890,"highlighted":891},"98261519-33f7-4b35-99b1-9501ca3d161b","Video Poster Image","Defines an image to be displayed in the video player before the video starts playing, while the video is downloading, or if the video cannot be loaded. Serves as a thumbnail or cover.","\u003Cvideo poster=\"poster.jpg\">","To display a preview image for the video.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">video\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> poster\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"poster.jpg\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":893,"title":894,"description":895,"snippets":896},"fbbfce47-9d71-4b7b-b06c-742e175f0f4b","Graphics and Canvas","Elements for creating dynamic and vector graphics directly in the browser.",[897,904,911,918],{"id":898,"title":899,"description":900,"code":901,"language":10,"filename":36,"whenToUse":902,"highlighted":903},"d3c2fd3f-0ac2-438d-b06d-b38884652bf3","Canvas Element","Provides a rectangular drawing area on the HTML page, where graphics can be rendered dynamically using JavaScript (Canvas API). Ideal for games, data visualization, complex animations, and image editing.","\u003Ccanvas>","For dynamic graphic drawing via JavaScript.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":905,"title":906,"description":907,"code":908,"language":10,"filename":36,"whenToUse":909,"highlighted":910},"ac971f5b-1bce-49eb-954b-ecaeaaadf92a","Scalable Vector Graphic (SVG)","Defines scalable vector graphics (Scalable Vector Graphics). SVG images are XML-based, can be scaled to any size without loss of quality, and are manipulable via CSS and JavaScript, making them ideal for icons and illustrations.","\u003Csvg>","For vector graphics that need to be scalable and manipulable.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">svg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":912,"title":913,"description":914,"code":915,"language":10,"filename":36,"whenToUse":916,"highlighted":917},"11d9dc1b-b2bd-4451-93e1-b8243fe52491","Canvas with Dimensions","Creates a canvas element with specific width and height dimensions in pixels. These dimensions define the coordinate space for drawing and are important for correct content rendering.","\u003Ccanvas width=\"300\" height=\"150\">","When defining the initial dimensions for the canvas drawing area.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"300\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"150\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":919,"title":920,"description":921,"code":922,"language":10,"filename":36,"whenToUse":923,"highlighted":924},"d952968d-b98f-48f5-87f1-a58c2d2ad26b","SVG with ViewBox","Defines the dimensions and position of an SVG's viewport. The four values represent `min-x`, `min-y`, `width`, and `height` of the user coordinate system, allowing the SVG to be scaled to fit its container.","\u003Csvg viewBox=\"0 0 100 100\">","To control the coordinate system and scaling of an SVG.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">svg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"0 0 100 100\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":926,"title":927,"description":928,"snippets":929},"180a0c39-3c29-48c2-9cc1-113e58d91761","Additional Graphic Elements","Elements for creating interactivity in images and ensuring correct SVG rendering.",[930,937,944,951],{"id":931,"title":932,"description":933,"code":934,"language":10,"filename":36,"whenToUse":935,"highlighted":936},"85b59b88-c906-4a4b-a11f-13c65cf5f4ae","Image Map","Defines a client-side image map, which allows creating clickable areas (hotspots) on an image. Used in conjunction with the `\u003Carea>` element and referenced by the `usemap` attribute of an `\u003Cimg>`.","\u003Cmap>","To create clickable areas on an image.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":938,"title":939,"description":940,"code":941,"language":10,"filename":36,"whenToUse":942,"highlighted":943},"e74777a3-5264-469d-a56b-595e1c0c6b17","Clickable Area in Map","Defines a clickable area (hotspot) within an image map (`\u003Cmap>`). The `shape` (e.g., `rect`, `circle`, `poly`) and `coords` attributes define the shape and position of the area, and `href` the link destination.","\u003Carea>","To define interactive regions within an image map.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">area\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":945,"title":946,"description":947,"code":948,"language":10,"filename":36,"whenToUse":949,"highlighted":950},"809f21fe-e2a6-4ec2-8742-6edfae9a55fc","Canvas with ID for JavaScript","A canvas element with a unique identifier (`id`), allowing it to be easily accessed and manipulated by JavaScript scripts using `document.getElementById()`.","\u003Ccanvas id=\"myCanvas\">","To interact with the canvas using JavaScript.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"myCanvas\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":952,"title":953,"description":954,"code":955,"language":10,"filename":36,"whenToUse":956,"highlighted":957},"d21a0611-827a-4313-9992-f39f33fe1461","SVG with Namespace","Declares the XML namespace for the SVG element, indicating that the content within the `\u003Csvg>` tag should be interpreted as scalable vector graphics. Although often implicit in HTML5, it is good practice for compatibility.","\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">","When embedding SVG directly into HTML, especially to ensure compatibility with XML parsers.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">svg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> xmlns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":959,"title":960,"description":961,"snippets":962},"d77f1930-74cb-4e68-a916-e5ebbd34aa81","🔍 Essential SEO Metadata","Crucial meta elements for search engine optimization and correct page display.",[963,970,977,984,991],{"id":964,"title":965,"description":966,"code":967,"language":10,"filename":36,"whenToUse":968,"highlighted":969},"064e0155-6b08-4e38-a66c-3381b6ab6c58","Page Description","Provides a brief and accurate description of the page content, which may be displayed by search engines in search results (SERP). Crucial for attracting clicks and improving SEO.","\u003Cmeta name=\"description\" content=\"...\">","To provide a concise summary of the page content for SEO.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"description\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":971,"title":972,"description":973,"code":974,"language":10,"filename":36,"whenToUse":975,"highlighted":976},"587e8e6f-a72e-47f4-bca8-6c77641e47c9","Keywords","List of keywords related to the page content. Although its importance for SEO has significantly decreased for major search engines, it can still be useful for some specific tools and contexts.","\u003Cmeta name=\"keywords\" content=\"...\">","Optional, to list relevant keywords (minimal impact on modern SEO).","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"keywords\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":978,"title":979,"description":980,"code":981,"language":10,"filename":36,"whenToUse":982,"highlighted":983},"107e9a43-ce07-40a1-be7d-19b48f69446c","Page Author","Specifies the name of the HTML document's author. Useful for attribution, content management, and, in some cases, for authorial content SEO.","\u003Cmeta name=\"author\" content=\"...\">","To identify the author of the page content.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"author\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":985,"title":986,"description":987,"code":988,"language":10,"filename":36,"whenToUse":989,"highlighted":990},"cce37e13-420a-4116-9b02-c6d7dd7769d4","Search Robot Directives","Instructs search engine robots on how to index and follow links on the page. `index` allows indexing, `follow` allows following links. Other values include `noindex` (do not index) and `nofollow` (do not follow links).","\u003Cmeta name=\"robots\" content=\"index, follow\">","To control how search engines interact with your page.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"robots\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"index, follow\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":992,"title":993,"description":994,"code":71,"language":10,"filename":36,"whenToUse":995,"highlighted":73},"79e3e7ed-a115-4a9b-b222-c7385635f65b","Viewport Configuration (Mobile SEO)","Configures the viewport for mobile devices, controlling the width of the visible area and the initial zoom level. Essential for responsive design and an important ranking factor for mobile-first SEO.","On all pages to ensure responsiveness and good ranking in mobile searches.",{"id":997,"title":998,"description":999,"snippets":1000},"63d113f1-7ecc-4b6b-b30f-906816a74e25","Open Graph for Social Media","Open Graph protocol meta tags for controlling how content appears when shared on platforms like Facebook, LinkedIn, and WhatsApp.",[1001,1008,1015,1022,1029],{"id":1002,"title":1003,"description":1004,"code":1005,"language":10,"filename":36,"whenToUse":1006,"highlighted":1007},"40a910e4-3611-4640-bf70-9114344dfb19","Open Graph Title","Defines the title that will be displayed when the page is shared on social networks like Facebook and LinkedIn. It is part of the Open Graph protocol and should be concise and appealing.","\u003Cmeta property=\"og:title\" content=\"...\">","To define the sharing title on social networks.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> property\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"og:title\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1009,"title":1010,"description":1011,"code":1012,"language":10,"filename":36,"whenToUse":1013,"highlighted":1014},"163e73a2-447c-4da9-96cb-197f933c5dd0","Open Graph Description","Defines the description that will be displayed when the page is shared on social networks, providing a summary of the content. It should be persuasive and informative.","\u003Cmeta property=\"og:description\" content=\"...\">","To define the social media sharing description.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> property\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"og:description\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1016,"title":1017,"description":1018,"code":1019,"language":10,"filename":36,"whenToUse":1020,"highlighted":1021},"90e9cf0b-9f62-4e71-b066-c3e61b737b31","Open Graph Image","Defines the URL of an image that will be displayed as a thumbnail when the page is shared on social networks. It is crucial for visual engagement.","\u003Cmeta property=\"og:image\" content=\"...\">","To define the preview image for social media sharing.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> property\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"og:image\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1023,"title":1024,"description":1025,"code":1026,"language":10,"filename":36,"whenToUse":1027,"highlighted":1028},"1b588516-a370-43a7-87f3-d0fd7afbc946","Open Graph Canonical URL","Defines the canonical URL of the page for Open Graph, ensuring that all sharing references point to the same URL, avoiding duplicate content issues.","\u003Cmeta property=\"og:url\" content=\"...\">","To specify the preferred page URL for social networks.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> property\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"og:url\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1030,"title":1031,"description":1032,"code":1033,"language":10,"filename":36,"whenToUse":1034,"highlighted":1035},"5f2cf495-10b6-45d1-9016-abe5cd48deef","Open Graph Content Type","Defines the type of object the page represents (e.g., \"website\", \"article\", \"video.movie\"). Helps social networks understand the content context and display relevant information.","\u003Cmeta property=\"og:type\" content=\"website\">","To categorize the page's content type for social networks.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> property\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"og:type\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"website\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1037,"title":1038,"description":1039,"snippets":1040},"da623d1e-06dd-4a56-82ca-6f54d24449c3","Twitter Cards","Specific meta tags for controlling the display of shared links on the Twitter platform.",[1041,1048,1055,1062],{"id":1042,"title":1043,"description":1044,"code":1045,"language":10,"filename":36,"whenToUse":1046,"highlighted":1047},"5a8b4686-598e-415f-a02a-04f961128a77","Twitter Card Type","Defines the type of Twitter \"card\" to be displayed when the page is shared. `summary` is a standard card with a title, description, and a small thumbnail. Other types include `summary_large_image` and `app`.","\u003Cmeta name=\"twitter:card\" content=\"summary\">","To define the layout of the Twitter sharing card.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"twitter:card\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"summary\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1049,"title":1050,"description":1051,"code":1052,"language":10,"filename":36,"whenToUse":1053,"highlighted":1054},"26e12f05-64c0-4cf2-8ea3-dae2852a6d04","Title for Twitter","Defines the specific title for the Twitter Card, which may differ from `og:title` if there is a need for Twitter optimization.","\u003Cmeta name=\"twitter:title\" content=\"...\">","For a title optimized specifically for Twitter.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"twitter:title\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1056,"title":1057,"description":1058,"code":1059,"language":10,"filename":36,"whenToUse":1060,"highlighted":1061},"2c842306-4a25-4d9a-9bf7-ccf376391511","Twitter Description","Defines the specific description for the Twitter Card, which can differ from `og:description` to fit Twitter's character limits or style.","\u003Cmeta name=\"twitter:description\" content=\"...\">","For a description optimized specifically for Twitter.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"twitter:description\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1063,"title":1064,"description":1065,"code":1066,"language":10,"filename":36,"whenToUse":1067,"highlighted":1068},"bb6d62a1-5995-468b-8bc0-496a516e4ff8","Image for Twitter","Defines the URL of the specific image for the Twitter Card. It is important for the visual representation of the link on Twitter.","\u003Cmeta name=\"twitter:image\" content=\"...\">","For a preview image optimized specifically for Twitter.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">meta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"twitter:image\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1070,"title":1071,"description":1072,"snippets":1073},"3c5eb1dc-0e07-4b99-8ebe-5ade2a3f4e28","Performance Optimization","Link elements that help improve loading time and user experience by preloading or preconnecting to resources.",[1074,1081,1088,1095],{"id":1075,"title":1076,"description":1077,"code":1078,"language":10,"filename":36,"whenToUse":1079,"highlighted":1080},"bda6fd69-a120-40ac-a00c-1bd31267607b","Resource Preloading","Instructs the browser to preload a resource (such as a font, image, script, or stylesheet) that will be needed soon on the page. This ensures the resource is available earlier, improving perceived loading time.","\u003Clink rel=\"preload\" href=\"...\">","For essential resources that should be loaded as quickly as possible.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">link\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> rel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"preload\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> href\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1082,"title":1083,"description":1084,"code":1085,"language":10,"filename":36,"whenToUse":1086,"highlighted":1087},"c4731ad9-7176-4a55-9db5-024bd7d03c86","Resource Prefetch","Instructs the browser to prefetch a resource that may be needed in future navigations, but not immediately on the current page. Helps speed up navigation between pages, as the resource will already be cached.","\u003Clink rel=\"prefetch\" href=\"...\">","For resources that may be needed on future pages.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">link\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> rel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"prefetch\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> href\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1089,"title":1090,"description":1091,"code":1092,"language":10,"filename":36,"whenToUse":1093,"highlighted":1094},"792eea72-bec7-4afe-913e-3486591db9b5","DNS Pre-resolution","Instructs the browser to resolve the DNS of a domain before the resource is actually requested. Reduces latency for resources from external domains, such as CDNs or third-party APIs.","\u003Clink rel=\"dns-prefetch\" href=\"...\">","To speed up DNS resolution for external domains.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">link\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> rel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"dns-prefetch\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> href\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1096,"title":1097,"description":1098,"code":1099,"language":10,"filename":36,"whenToUse":1100,"highlighted":1101},"835e318f-f4fc-4ac1-a0e7-676ec1b85ae6","Canonical URL for SEO","Specifies the preferred canonical URL for the page, helping search engines avoid duplicate content issues and consolidate ranking signals (like links and metrics) for the main version of the page.","\u003Clink rel=\"canonical\" href=\"...\">","To indicate the preferred URL of a page, especially in cases of duplicate content.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">link\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> rel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"canonical\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> href\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1103,"title":1104,"description":1105,"snippets":1106},"ca7d4803-e043-42d9-a6b7-a4db1bdb998d","♿ ARIA Accessibility Attributes","WAI-ARIA attributes for improving HTML element accessibility, providing semantic information for assistive technologies.",[1107,1114,1121,1128,1135],{"id":1108,"title":1109,"description":1110,"code":1111,"language":10,"filename":36,"whenToUse":1112,"highlighted":1113},"7496bacd-fe79-4232-89e7-bf8156ce4a55","Accessible Label (aria-label)","Provides an accessible text label for an element when no visible label is available (e.g., an icon button). Used by assistive technologies (screen readers) to describe the element.","aria-label=\"descrição\"","To provide a textual label for elements without visible text, such as icon buttons.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">aria-label=\"descrição\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1115,"title":1116,"description":1117,"code":1118,"language":10,"filename":36,"whenToUse":1119,"highlighted":1120},"a9148f22-7f01-4bb4-a662-2d9f14ccdbdf","Description by ID (aria-describedby)","Associates an element with another that provides a more detailed description. The value is the `id` of the element containing the description, allowing screen readers to read the associated description.","aria-describedby=\"id\"","To associate an element with a longer, more detailed description in another element.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">aria-describedby=\"id\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1122,"title":1123,"description":1124,"code":1125,"language":10,"filename":36,"whenToUse":1126,"highlighted":1127},"9f304201-80a5-4d3b-83a6-a0371c9ebe92","Expanded\u002FCollapsed State (aria-expanded)","Indicates the state of an expandable element (such as a dropdown menu, accordion, or button that reveals content), informing whether it is expanded (`true`) or collapsed (`false`).","aria-expanded=\"true\"","To indicate whether a component (menu, accordion) is open or closed.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">aria-expanded=\"true\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1129,"title":1130,"description":1131,"code":1132,"language":10,"filename":36,"whenToUse":1133,"highlighted":1134},"fb575d0f-2578-4475-83a1-98247e50a764","Hide from Assistive Technologies (aria-hidden)","Removes an element and all its descendants from the accessibility tree, making it invisible to assistive technologies (screen readers). Used for purely decorative or hidden content that should not be announced.","aria-hidden=\"true\"","To hide purely decorative elements from screen readers.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">aria-hidden=\"true\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1136,"title":1137,"description":1138,"code":1139,"language":10,"filename":36,"whenToUse":1140,"highlighted":1141},"1b861c91-7219-490b-82a2-b3721f60dc53","Dynamic Update Region (aria-live)","Defines a \"live\" region that should be announced by assistive technologies when its content changes dynamically. `polite` means changes are announced when the user is idle, while `assertive` announces immediately.","aria-live=\"polite\"","To announce dynamic content updates (e.g., error messages, search results).","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">aria-live=\"polite\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1143,"title":1144,"description":1145,"snippets":1146},"b39519af-b44d-4558-b3c7-911886658ced","Semantic ARIA Roles","Role attributes for defining the function or purpose of an element, especially when non-semantic elements are used.",[1147,1154,1161,1168,1175],{"id":1148,"title":1149,"description":1150,"code":1151,"language":10,"filename":36,"whenToUse":1152,"highlighted":1153},"fe865f60-5316-4419-a429-9a2a09396af2","Navigation Role","Defines that the element acts as a navigation region, containing links to navigate within the document or to related documents. Used when a non-semantic element (like `div`) is used for navigation.","role=\"navigation\"","To indicate that an element is a navigation area (if it's not \u003Cnav>).","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">role=\"navigation\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1155,"title":1156,"description":1157,"code":1158,"language":10,"filename":36,"whenToUse":1159,"highlighted":1160},"32f05548-35e5-46b3-84ea-2e9924c7aca1","Main Content Role","Defines that the element contains the main content of the document. Used when a non-semantic element (like `div`) is used for the main content, as a fallback for older browsers that do not support `\u003Cmain>`.","role=\"main\"","To indicate the main content of the page (if not \u003Cmain>).","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">role=\"main\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1162,"title":1163,"description":1164,"code":1165,"language":10,"filename":36,"whenToUse":1166,"highlighted":1167},"25216e33-7170-4299-9e0d-0081a75687b1","Complementary Content Role","Defines that the element contains supporting content that complements the main content but is separate from it. Similar to `\u003Caside>`, used when a `div` is employed.","role=\"complementary\"","To indicate complementary content (if not \u003Caside>).","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">role=\"complementary\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1169,"title":1170,"description":1171,"code":1172,"language":10,"filename":36,"whenToUse":1173,"highlighted":1174},"d5455fc3-4d71-4ea6-92f0-3ce89a6dfa6b","Search Role","Defines that the element is a region containing a search mechanism for the document or site. Helps assistive technologies quickly identify search functionality.","role=\"search\"","To identify the search area on your page.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">role=\"search\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1176,"title":1177,"description":1178,"code":1179,"language":10,"filename":36,"whenToUse":1180,"highlighted":1181},"044bf13e-690b-490d-9e89-27a75eea6771","Alert Role","Defines that the element is an important alert message that is dynamically added and should be announced immediately by assistive technologies. Used for critical notifications that require immediate attention.","role=\"alert\"","For important alert messages that require immediate attention.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">role=\"alert\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1183,"title":1184,"description":1185,"snippets":1186},"c0df0795-2a47-49e3-b0b6-bedfa73cde8e","Keyboard Navigation and Focus","Attributes for controlling tab order and element focus, essential for keyboard navigation users.",[1187,1194,1201,1208],{"id":1188,"title":1189,"description":1190,"code":1191,"language":10,"filename":36,"whenToUse":1192,"highlighted":1193},"213c2e8d-8d1f-4f58-88ad-6e898bb39462","Focusable Element (tabindex=\"0\")","Makes an element focusable via keyboard and includes it in the default tab order of the document, following the DOM order. Allows elements that are not normally focusable (like `div` or `span`) to receive focus.","tabindex=\"0\"","To make non-interactive elements keyboard-focusable in the natural order.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">tabindex=\"0\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1195,"title":1196,"description":1197,"code":1198,"language":10,"filename":36,"whenToUse":1199,"highlighted":1200},"9756220a-2faf-4025-a42a-85b6906c93ba","Programmatically Focusable (tabindex=\"-1\")","Makes an element programmatically focusable (via JavaScript using `.focus()`), but removes it from the default keyboard tab order. Useful for dynamically focusing elements without interfering with linear navigation.","tabindex=\"-1\"","To focus elements via JavaScript without including them in the tab order.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">tabindex=\"-1\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1202,"title":1203,"description":1204,"code":1205,"language":10,"filename":36,"whenToUse":1206,"highlighted":1207},"a0dd11d4-d634-44bb-837a-b52a08e40996","Shortcut Key (Accesskey)","Defines a shortcut key for an element, allowing the user to activate the element by pressing a key combination (varies by browser and operating system, e.g., Alt+Shift+S in Chrome).","accesskey=\"s\"","To provide keyboard shortcuts for important elements (use sparingly).","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">accesskey=\"s\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1209,"title":1210,"description":1211,"code":1212,"language":10,"filename":36,"whenToUse":1213,"highlighted":1214},"dfb10502-5f1c-4614-923a-630efac8d420","Autofocus","A boolean attribute that causes a form element to be automatically focused when the page loads. Only one element can have `autofocus` per page. It can be problematic for accessibility if not used carefully.","autofocus","To automatically focus a crucial form field upon page load.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">autofocus\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1216,"title":1217,"description":1218,"snippets":1219},"3ef6ee74-4d8e-4668-9c92-80e4e5f25318","Alternative Content for Accessibility","Techniques for providing textual and contextual alternatives for non-text content, ensuring all users can access the information.",[1220,1227,1234,1241],{"id":1221,"title":1222,"description":1223,"code":1224,"language":10,"filename":36,"whenToUse":1225,"highlighted":1226},"8e966006-c5c0-4683-9ba4-784ed9e3bf19","Alternative Text for Images","Provides an alternative textual description for an image. Essential for screen reader users and when the image cannot be loaded, conveying the image's meaning.","\u003Cimg src=\"...\" alt=\"Descrição detalhada\">","Always for images that convey important information.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">img\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> src\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> alt\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Descrição detalhada\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1228,"title":1229,"description":1230,"code":1231,"language":10,"filename":36,"whenToUse":1232,"highlighted":1233},"0df97e34-eefc-4fbb-9474-e416bc6180f3","Decorative Image","Indicates that the image is purely decorative and does not convey important information. The empty `alt=\"\"` and `role=\"presentation\"` instruct screen readers to ignore it, avoiding unnecessary noise.","\u003Cimg src=\"...\" alt=\"\" role=\"presentation\">","For images that do not add informative value, such as purely visual icons.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">img\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> src\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"...\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> alt\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"presentation\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1235,"title":1236,"description":1237,"code":1238,"language":10,"filename":36,"whenToUse":1239,"highlighted":1240},"8a00a1b2-a4e3-4ff1-862d-a2dba9434e5a","Long Description (longdesc - Obsolete)","An obsolete attribute for `\u003Cimg>` that pointed to an HTML document containing a long description of the image. It has been replaced by `aria-describedby` or by descriptions in the text adjacent to the image.","\u003Clongdesc=\"descricao.html\">","Avoid using, as it is obsolete.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic\">longdesc=\"descricao.html\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"id":1242,"title":1243,"description":1244,"code":1245,"language":10,"filename":36,"whenToUse":1246,"highlighted":1247},"84d3749c-b523-48a6-aaf4-a40ed099e045","Figure with Accessible Caption","Associates a `\u003Cfigure>` element with a caption (`\u003Cfigcaption>`) using its `id`, improving accessibility for screen readers that might not automatically associate them. The `aria-labelledby` points to the `id` of the `\u003Cfigcaption>` or another label element.","\u003Cfigure aria-labelledby=\"caption1\">","To explicitly associate a figure with its caption for screen readers.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">figure\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> aria-labelledby\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"caption1\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",154,[1250,1255,1261,1268,1274],{"id":1251,"slug":8,"name":1252,"colorHex":1253,"iconName":36,"postCount":1254},"0e2c1225-f78a-4c20-8c93-998ab9dc93b9","Frontend","#40484f",25,{"id":1256,"slug":1257,"name":1258,"colorHex":1259,"iconName":36,"postCount":1260},"bc8df70e-b7fb-4d89-a80c-fd458d36d58c","code-development","Code & Development","#8b5cf6",23,{"id":1262,"slug":1263,"name":1264,"colorHex":1265,"iconName":1266,"postCount":1267},"550e8400-e29b-41d4-a716-446655440001","inteligencia-artificial","Artificial Intelligence","#6366f1","brain",14,{"id":1269,"slug":1270,"name":1271,"colorHex":1272,"iconName":36,"postCount":1273},"ea63b69c-2eb4-4100-81f3-70ce52d33743","tech-news","Tech News","#e50606",4,{"id":1275,"slug":1276,"name":1277,"colorHex":1278,"iconName":1279,"postCount":1280},"550e8400-e29b-41d4-a716-446655440017","how-to-guides","How-To & Guides","#be123c","book-open",2]