Google hates <div>. Use the right semantic structure to rank your site at the top without spending on ads.
Fundamentals for creating any HTML page, including document declaration, essential metadata, and base body elements.
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.
<!DOCTYPE html>When to use: When starting any HTML document to define the HTML version.
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).
<html lang="pt-BR">When to use: Always as the first element inside the DOCTYPE.
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.
<head>When to use: To include all non-visible information of the page.
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.
<body>When to use: To wrap all content that will be displayed in the browser.
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.
<meta charset="UTF-8">When to use: Always at the beginning of the <head> to prevent encoding issues.
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.
<meta name="viewport" content="width=device-width, initial-scale=1.0">When to use: On all pages to ensure responsiveness on mobile devices.
Essential elements for structuring text, defining heading hierarchy, and controlling content flow.
Define títulos de diferentes níveis de importância. `<h1>` é o título mais importante (geralmente o título principal da página), e `<h6>` é o menos importante. Usados para estruturar o conteúdo semanticamente e são relevantes para SEO.
<h1> a <h6>When to use: Para definir a hierarquia e estrutura de cabeçalhos em seu conteúdo.
Represents a paragraph of text. It is the fundamental element for blocks of text in an HTML document, separating content into readable units.
<p>When to use: For any block of text that forms a paragraph.
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).
<br>When to use: When a line break is needed, but a new paragraph is not semantically appropriate.
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.
<hr>When to use: To indicate a change of topic or section within the content.
Tags for applying formatting and giving semantic meaning to specific parts of text.
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 `<b>`.
<strong>When to use: To highlight critical or high-priority content.
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 `<i>`.
<em>When to use: To emphasize a word or phrase that changes the meaning of the sentence.
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.
<mark>When to use: To highlight relevant text in a specific context, such as search results.
Represents secondary comments, copyrights, footer text, and other information considered 'small' in relation to the main text. Usually rendered with a smaller font.
<small>When to use: For copyright information, legal notices, or footer text.
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.
<del>When to use: To show changes in a document, such as old prices.
Represents text that has been inserted into a document. Usually rendered with an underline, indicating it has been added. Used in conjunction with `<del>` to show revisions.
<ins>When to use: To show text that has been added to a revised document.
Elements for creating hyperlinks and embedding images in web pages, essential for navigation and visual content.
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.
<a href="url">When to use: To create navigation links or external references.
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.
<a href="url" target="_blank">When to use: To open external links without taking the user away from the current page.
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.
<img src="caminho" alt="descrição">When to use: To display images on your page.
A container that allows specifying multiple image sources (`<source>`) for different conditions (such as screen sizes, pixel densities, or image formats), and an `<img>` element as a fallback. Helps optimize image loading and adapt them to various devices.
<picture>When to use: To serve images optimized for different viewports or formats.
Elements that provide structural meaning to content, improving accessibility, SEO, and code maintenance.
Represents the introductory content of a section or the entire document, usually containing titles, logos, navigation, and/or a search field. Not to be confused with `<h1>-<h6>` headings.
<header>When to use: To group introductory elements, such as the top of a page or section.
Represents a section of navigation links, such as menus, indexes, or tables of contents. Intended for the main site navigation or an important section.
<nav>When to use: To wrap blocks of primary navigation links.
Represents the dominant content of the document's `<body>`. There should be only one `<main>` element per document, and its content should be unique to that page, excluding sidebars, navigation, etc.
<main>When to use: To delimit the main and unique content of your page.
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.
<section>When to use: To group related content that forms a logical section.
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.
<article>When to use: For content that can be read independently, such as a blog article.
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.
<aside>When to use: For sidebars, pull quotes, or related information.
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.
<footer>When to use: Para agrupar informações de rodapé, como direitos autorais e links de contato.
Tags that add structural and contextual meaning to specific text blocks.
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.
<blockquote>When to use: To quote blocks of text from other sources.
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.
<cite>When to use: To reference the title of a cited work.
Displays a small fragment of computer code. The content is usually rendered in a monospace font, indicating it is code. Can be used within `<pre>` for larger blocks of code.
<code>When to use: To display inline code snippets or within a paragraph.
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.
<pre>When to use: To display blocks of code or text that require exact formatting.
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.
<abbr>When to use: To mark abbreviations and provide their full meaning.
Provides contact information for the author/owner of the document or the nearest section. May include name, physical address, email, phone, URL, etc.
<address>When to use: To display contact information semantically.
Elements for embedding figures, captions, and other external content types into the page.
Used to group self-contained content, such as images, diagrams, photos, code blocks, etc., along with its caption (`<figcaption>`), making it independent of the main document flow and referencable.
<figure>When to use: To group an image, code, or other content with its caption.
Provides a caption or description for the content of a `<figure>` element. It should be the first or last child of a `<figure>`.
<figcaption>When to use: To add a descriptive caption to a <figure> element.
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.
<iframe>When to use: To embed content from other sources or HTML documents.
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/video files, or Flash animations (though its use has declined).
<embed>When to use: To embed content from external plugins or non-HTML media.
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 `<embed>`, but is less common nowadays.
<object>When to use: To embed external objects with more control over fallbacks.
Elements for organizing information in ordered, unordered, or definition lists.
Creates an unordered list of items. List items are usually marked with bullets (dots, squares, etc.), indicating that the order is not semantically important.
<ul>When to use: For lists where the order of items is not relevant (e.g., shopping list).
Creates an ordered list of items. List items are usually marked with numbers or letters, indicating a sequence or hierarchy.
<ol>When to use: For lists where the order of items is important (e.g., recipe steps).
Represents an individual item within a list (`<ul>` or `<ol>`). Must be a direct child of `<ul>`, `<ol>`, or `<menu>`.
<li>When to use: For each item within an ordered or unordered list.
Creates a definition list, which is a list of terms and their respective descriptions. Useful for glossaries, Q&A, or metadata.
<dl>When to use: To create glossaries or lists of terms and their definitions.
Represents a term to be defined within a definition list (`<dl>`). Each `<dt>` is usually followed by one or more `<dd>` elements.
<dt>When to use: To define the term in a definition list.
Represents the description or definition of a term (`<dt>`) within a definition list (`<dl>`).
<dd>When to use: To provide the description or explanation of a term in a definition list.
Attributes for customizing the appearance and behavior of ordered and unordered lists.
Defines an ordered list that uses Arabic numerals (1, 2, 3...) as markers. This is the default type and can be omitted.
<ol type="1">When to use: For ordered lists with standard numbering.
Defines an ordered list that uses uppercase letters (A, B, C...) as markers for the list items.
<ol type="A">When to use: For ordered lists that use uppercase letters as markers.
Defines an ordered list that uses lowercase letters (a, b, c...) as markers for the list items.
<ol type="a">When to use: For ordered lists that use lowercase letters as markers.
Defines an ordered list that uses uppercase Roman numerals (I, II, III...) as markers for the list items.
<ol type="I">When to use: For ordered lists that use Roman numerals as markers.
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.
<ol start="5">When to use: To continue a list from a specific point or when the logical order requires a different start.
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.
<ul style="list-style-type: none;">When to use: When you want to remove default markers and style the list with CSS.
Fundamental elements for creating and organizing data in tabular format.
The main container for tabular data. Defines an HTML table, grouping all its elements (header, body, footer, rows, and cells).
<table>When to use: To create any data table.
Groups the header content of a table. Contains the column header information, usually using `<th>` elements.
<thead>When to use: To define the semantic header of a table.
Groups the body content of a table. Contains the main data rows of the table, using `<tr>` and `<td>` elements.
<tbody>When to use: To define the main data body of a table.
Groups the footer content of a table. Typically contains summaries, totals, or additional information related to the table body data.
<tfoot>When to use: To define the semantic footer of a table, such as totals or notes.
Defines a row of cells in a table (Table Row). Each `<tr>` must contain one or more `<th>` (header cells) or `<td>` (data cells) elements.
<tr>When to use: For each new row of data or header in the table.
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.
<th>When to use: For cells that serve as column or row headers.
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.
<td>When to use: For each common data cell in a table.
Attributes for controlling the presentation and layout of cells in HTML tables.
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.
<table border="1">When to use: Avoid using. Prefer CSS for border styling.
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.
<td colspan="2">When to use: To merge cells horizontally, spanning multiple columns.
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.
<td rowspan="3">When to use: To merge cells vertically, spanning multiple rows.
Indicates that the header cell (`<th>`) provides a header for all cells in the same column. Essential for accessibility, as screen readers can associate data with their respective headers.
<th scope="col">When to use: To indicate that a <th> is the header for an entire column.
Indicates that the header cell (`<th>`) provides a header for all cells in the same row. Essential for accessibility, especially in complex tables.
<th scope="row">When to use: To indicate that a <th> is the header for an entire row.
Basic elements for building HTML forms and logically grouping their fields.
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.
<form>When to use: To start creating a form for data collection.
Defines a form that will submit its data to the URL `/submit` using the HTTP POST method. The `action` attribute specifies the target URL and `method` the HTTP method (GET/POST) for data submission.
<form action="/submit" method="post">When to use: To configure how and where form data will be submitted.
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.
<fieldset>When to use: To logically group related fields in a form.
Provides a caption or title for the content of a `<fieldset>` element, describing the purpose of the group of fields. It is displayed on the border of the fieldset.
<legend>When to use: To give a title to a group of fields within a <fieldset>.
Associates a text label with a form field (such as `<input>`, `<textarea>`, `<select>`). The `for` attribute must match the field's `id` to ensure accessibility, allowing the user to click the label to focus the field.
<label for="id">When to use: To provide accessible labels for all form fields.
Most common input field types for collecting different types of user data.
Creates a single-line text input field for general data, such as names, surnames, or short addresses.
<input type="text">When to use: For generic single-line text input.
Creates an input field for email addresses. Browsers may offer basic email format validation and, on mobile devices, activate an optimized keyboard for emails.
<input type="email">When to use: To collect email addresses.
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.
<input type="password">When to use: To collect passwords or sensitive information that should be masked.
Creates an input field for numbers. Browsers can display controls to increase/decrease the value (spin buttons) and validate that the input is numeric. Can use `min`, `max`, `step` attributes.
<input type="number">When to use: To collect numerical inputs, such as age or quantity.
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.
<input type="tel">When to use: To collect phone numbers.
Creates an input field for URLs. Browsers may offer basic URL format validation. On mobile devices, it can activate a URL-optimized keyboard.
<input type="url">When to use: To collect website addresses or links.
Elements allowing users to choose from predefined options in a form.
Creates a checkbox that allows the user to choose zero or more options from a set. Each checkbox is independent, unless semantically grouped.
<input type="checkbox">When to use: When the user can select multiple options from a list.
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.
<input type="radio">When to use: When the user must select only one option from a group.
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 `<option>` tag.
<select>When to use: To allow the user to select one or more options from a long list.
Defines an individual option within a `<select>` or `<datalist>` element. The text between the `<option>` tags is what the user sees, and the `value` attribute is what is sent to the server.
<option>When to use: For each selectable item within a <select>.
Groups related options within a `<select>` element, creating a heading for the option group. The `label` attribute defines the group's heading text.
<optgroup>When to use: To organize options in a <select> into logical categories.
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).
<textarea>When to use: To collect long text inputs, such as comments or descriptions.
New HTML5 input types for collecting specific data with enhanced validation and user interfaces.
Creates an input field for selecting a date (day, month, year). Browsers usually provide a native calendar selector (date picker) to facilitate selection.
<input type="date">When to use: To collect a specific date from the user.
Creates an input field for selecting a time (hours and minutes). Browsers may offer an optimized time control.
<input type="time">When to use: To collect a specific time from the user.
Creates an input field for selecting a local date and time, without timezone information. Combines the functionalities of `type="date"` and `type="time"`.
<input type="datetime-local">When to use: To collect a combined local date and time.
Creates an input field for selecting a month and year. Useful for credit card expiration dates or time periods.
<input type="month">When to use: To collect only the month and year.
Creates an input field for selecting a week and year. The display format may vary between browsers.
<input type="week">When to use: To collect a specific week of the year.
Creates an input field for selecting a color. Browsers usually provide a native color picker, returning the value in hexadecimal format (e.g., `#RRGGBB`).
<input type="color">When to use: To allow the user to choose a color.
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.
<input type="range">When to use: To allow selection of a numeric value within a range, such as volume or zoom.
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.
<input type="file">When to use: To allow the user to upload files.
HTML5 attributes for native form validation, reducing the need for JavaScript for basic checks.
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.
requiredWhen to use: For fields that must be filled before form submission.
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}"When to use: To validate the format of a field's input using regular expressions.
Defines the minimum number of characters a text field (`<input type="text">`, `<textarea>`) must have to be valid.
minlength="3"When to use: To ensure text input has a minimum number of characters.
Defines the maximum number of characters a text field (`<input type="text">`, `<textarea>`) can have.
maxlength="50"When to use: To limit the number of characters that can be entered into a text field.
Defines the minimum allowed value for numeric (`type="number"`, `type="range"`) or date/time (`type="date"`, `type="time"`) fields.
min="0"When to use: To define the minimum acceptable value for numeric or date/time inputs.
Defines the maximum allowed value for numeric fields (`type="number"`, `type="range"`) or date/time fields (`type="date"`, `type="time"`).
max="100"When to use: To define the maximum acceptable value for numeric or date/time inputs.
Defines the allowed increment for numeric (`type="number"`, `type="range"`) or date/time fields. For example, a `step` of 5 would only allow multiples of 5 (0, 5, 10...).
step="5"When to use: To control value increments in numeric or time fields.
HTML5 elements that enhance form user experience with suggestions, visual feedback, and dynamic results.
Provides a list of predefined options for an `<input>` field. The user can type, and the browser suggests options from the list, or they can choose directly. The `id` of the `<datalist>` is referenced by the `list` attribute of the `<input>`.
<datalist>When to use: To provide auto-completion suggestions for text fields.
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.
<output>When to use: To display calculation results or dynamic feedback in forms.
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.
<progress>When to use: Para exibir o progresso de uma tarefa em andamento.
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 `<progress>`, which shows the progress of a task.
<meter>When to use: To display a value within a fixed range, like a battery meter.
Obsolete element, used to generate a key pair (public/private) 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.
<keygen>When to use: Avoid use, as it is obsolete and unsupported.
HTML5 elements for embedding and controlling multimedia content directly in web pages.
Embeds audio content in the document. The `controls` attribute adds the browser's default playback controls (play/pause, volume, progress bar, etc.), allowing user interaction.
<audio controls>When to use: To embed audio files on your page.
Embeds video content in the document. The `controls` attribute adds the browser's default playback controls (play/pause, volume, progress bar, fullscreen, etc.), allowing user interaction.
<video controls>When to use: To embed video files on your page.
Specifies multiple media sources for `<audio>` or `<video>` elements. The browser chooses the first source it can play, based on the `type` attribute (e.g., `video/mp4`, `audio/mpeg`), ensuring cross-browser compatibility.
<source src="file.mp4" type="video/mp4">When to use: To provide different audio/video formats for broad compatibility.
Allows adding timed text tracks (such as subtitles, closed captions, descriptions, chapters) to `<video>` or `<audio>` elements. The `kind` attribute defines the track type (e.g., `subtitles`, `captions`, `descriptions`).
<track kind="subtitles" src="subtitles.vtt">When to use: To add subtitles, descriptions, or other timed metadata to media.
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.
<video autoplay loop muted>When to use: For background videos or those that should be soundless and loop automatically.
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.
<video poster="poster.jpg">When to use: To display a preview image for the video.
Elements for creating dynamic and vector graphics directly in the browser.
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.
<canvas>When to use: For dynamic graphic drawing via JavaScript.
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.
<svg>When to use: For vector graphics that need to be scalable and manipulable.
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.
<canvas width="300" height="150">When to use: When defining the initial dimensions for the canvas drawing area.
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.
<svg viewBox="0 0 100 100">When to use: To control the coordinate system and scaling of an SVG.
Elements for creating interactivity in images and ensuring correct SVG rendering.
Defines a client-side image map, which allows creating clickable areas (hotspots) on an image. Used in conjunction with the `<area>` element and referenced by the `usemap` attribute of an `<img>`.
<map>When to use: To create clickable areas on an image.
Defines a clickable area (hotspot) within an image map (`<map>`). The `shape` (e.g., `rect`, `circle`, `poly`) and `coords` attributes define the shape and position of the area, and `href` the link destination.
<area>When to use: To define interactive regions within an image map.
A canvas element with a unique identifier (`id`), allowing it to be easily accessed and manipulated by JavaScript scripts using `document.getElementById()`.
<canvas id="myCanvas">When to use: To interact with the canvas using JavaScript.
Declares the XML namespace for the SVG element, indicating that the content within the `<svg>` tag should be interpreted as scalable vector graphics. Although often implicit in HTML5, it is good practice for compatibility.
<svg xmlns="http://www.w3.org/2000/svg">When to use: When embedding SVG directly into HTML, especially to ensure compatibility with XML parsers.
Crucial meta elements for search engine optimization and correct page display.
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.
<meta name="description" content="...">When to use: To provide a concise summary of the page content for SEO.
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.
<meta name="keywords" content="...">When to use: Optional, to list relevant keywords (minimal impact on modern SEO).
Specifies the name of the HTML document's author. Useful for attribution, content management, and, in some cases, for authorial content SEO.
<meta name="author" content="...">When to use: To identify the author of the page content.
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).
<meta name="robots" content="index, follow">When to use: To control how search engines interact with your page.
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.
<meta name="viewport" content="width=device-width, initial-scale=1.0">When to use: On all pages to ensure responsiveness and good ranking in mobile searches.
Specific meta tags for controlling the display of shared links on the Twitter platform.
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`.
<meta name="twitter:card" content="summary">When to use: To define the layout of the Twitter sharing card.
Defines the specific title for the Twitter Card, which may differ from `og:title` if there is a need for Twitter optimization.
<meta name="twitter:title" content="...">When to use: For a title optimized specifically for Twitter.
Defines the specific description for the Twitter Card, which can differ from `og:description` to fit Twitter's character limits or style.
<meta name="twitter:description" content="...">When to use: For a description optimized specifically 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.
<meta name="twitter:image" content="...">When to use: For a preview image optimized specifically for Twitter.
Link elements that help improve loading time and user experience by preloading or preconnecting to resources.
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.
<link rel="preload" href="...">When to use: For essential resources that should be loaded as quickly as possible.
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.
<link rel="prefetch" href="...">When to use: For resources that may be needed on future pages.
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.
<link rel="dns-prefetch" href="...">When to use: To speed up DNS resolution for external domains.
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.
<link rel="canonical" href="...">When to use: To indicate the preferred URL of a page, especially in cases of duplicate content.
WAI-ARIA attributes for improving HTML element accessibility, providing semantic information for assistive technologies.
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"When to use: To provide a textual label for elements without visible text, such as icon buttons.
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"When to use: To associate an element with a longer, more detailed description in another element.
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"When to use: To indicate whether a component (menu, accordion) is open or closed.
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"When to use: To hide purely decorative elements from screen readers.
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"When to use: To announce dynamic content updates (e.g., error messages, search results).
Role attributes for defining the function or purpose of an element, especially when non-semantic elements are used.
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"When to use: To indicate that an element is a navigation area (if it's not <nav>).
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 `<main>`.
role="main"When to use: To indicate the main content of the page (if not <main>).
Defines that the element contains supporting content that complements the main content but is separate from it. Similar to `<aside>`, used when a `div` is employed.
role="complementary"When to use: To indicate complementary content (if not <aside>).
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"When to use: To identify the search area on your page.
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"When to use: For important alert messages that require immediate attention.
Techniques for providing textual and contextual alternatives for non-text content, ensuring all users can access the information.
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.
<img src="..." alt="Descrição detalhada">When to use: Always for images that convey important information.
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.
<img src="..." alt="" role="presentation">When to use: For images that do not add informative value, such as purely visual icons.
An obsolete attribute for `<img>` 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.
<longdesc="descricao.html">When to use: Avoid using, as it is obsolete.
Associates a `<figure>` element with a caption (`<figcaption>`) using its `id`, improving accessibility for screen readers that might not automatically associate them. The `aria-labelledby` points to the `id` of the `<figcaption>` or another label element.
<figure aria-labelledby="caption1">When to use: To explicitly associate a figure with its caption for screen readers.