htmladvanced154 snippets

HTML5: Semantic Tags & SEO

Google hates <div>. Use the right semantic structure to rank your site at the top without spending on ads.

Sections29

🏗️ Basic Document Structure

6 snippets

Fundamentals for creating any HTML page, including document declaration, essential metadata, and base body elements.

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.

Quando usar: When starting any HTML document to define the HTML version.

html

<!DOCTYPE html>

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).

Quando usar: Always as the first element inside the DOCTYPE.

html

<html lang="pt-BR">

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.

Quando usar: To include all non-visible information of the page.

html

<head>

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.

Quando usar: To wrap all content that will be displayed in the browser.

html

<body>

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.

Quando usar: Always at the beginning of the <head> to prevent encoding issues.

html

<meta charset="UTF-8">

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.

Quando usar: On all pages to ensure responsiveness on mobile devices.

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Headings, Paragraphs and Breaks

4 snippets

Essential elements for structuring text, defining heading hierarchy, and controlling content flow.

Títulos de Seção (H1-H6)

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.

Quando usar: Para definir a hierarquia e estrutura de cabeçalhos em seu conteúdo.

html

<h1> a <h6>

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.

Quando usar: For any block of text that forms a paragraph.

html

<p>

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).

Quando usar: When a line break is needed, but a new paragraph is not semantically appropriate.

html

<br>

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.

Quando usar: To indicate a change of topic or section within the content.

html

<hr>

Text Formatting and Emphasis

6 snippets

Tags for applying formatting and giving semantic meaning to specific parts of text.

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 `<b>`.

Quando usar: To highlight critical or high-priority content.

html

<strong>

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 `<i>`.

Quando usar: To emphasize a word or phrase that changes the meaning of the sentence.

html

<em>

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.

Quando usar: To highlight relevant text in a specific context, such as search results.

html

<mark>

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.

Quando usar: For copyright information, legal notices, or footer text.

html

<small>

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.

Quando usar: To show changes in a document, such as old prices.

html

<del>

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 `<del>` to show revisions.

Quando usar: To show text that has been added to a revised document.

html

<ins>

Links and Images

4 snippets

Elements for creating hyperlinks and embedding images in web pages, essential for navigation and visual content.

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.

Quando usar: To create navigation links or external references.

html

<a href="url">

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.

Quando usar: To open external links without taking the user away from the current page.

html

<a href="url" target="_blank">

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.

Quando usar: To display images on your page.

html

<img src="caminho" alt="descrição">

Responsive Images (Picture)

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.

Quando usar: To serve images optimized for different viewports or formats.

html

<picture>

🎯 Semantic Structure Elements

7 snippets

Elements that provide structural meaning to content, improving accessibility, SEO, and code maintenance.

Page/Section Header

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.

Quando usar: To group introductory elements, such as the top of a page or section.

html

<header>

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.

Quando usar: To wrap blocks of primary navigation links.

html

<nav>

Main Content

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.

Quando usar: To delimit the main and unique content of your page.

html

<main>

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.

Quando usar: To group related content that forms a logical section.

html

<section>

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.

Quando usar: For content that can be read independently, such as a blog article.

html

<article>

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.

Quando usar: For sidebars, pull quotes, or related information.

html

<aside>

Rodapé da Página/Seçã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.

Quando usar: Para agrupar informações de rodapé, como direitos autorais e links de contato.

html

<footer>

Semantic Text Elements

6 snippets

Tags that add structural and contextual meaning to specific text blocks.

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.

Quando usar: To quote blocks of text from other sources.

html

<blockquote>

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.

Quando usar: To reference the title of a cited work.

html

<cite>

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 `<pre>` for larger blocks of code.

Quando usar: To display inline code snippets or within a paragraph.

html

<code>

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.

Quando usar: To display blocks of code or text that require exact formatting.

html

<pre>

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.

Quando usar: To mark abbreviations and provide their full meaning.

html

<abbr>

Contact Information

Provides contact information for the author/owner of the document or the nearest section. May include name, physical address, email, phone, URL, etc.

Quando usar: To display contact information semantically.

html

<address>

Media and Embedded Content

5 snippets

Elements for embedding figures, captions, and other external content types into the page.

Figure Container

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.

Quando usar: To group an image, code, or other content with its caption.

html

<figure>

Figure Caption

Provides a caption or description for the content of a `<figure>` element. It should be the first or last child of a `<figure>`.

Quando usar: To add a descriptive caption to a <figure> element.

html

<figcaption>

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.

Quando usar: To embed content from other sources or HTML documents.

html

<iframe>

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/video files, or Flash animations (though its use has declined).

Quando usar: To embed content from external plugins or non-HTML media.

html

<embed>

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 `<embed>`, but is less common nowadays.

Quando usar: To embed external objects with more control over fallbacks.

html

<object>

📋 List Types

6 snippets

Elements for organizing information in ordered, unordered, or definition lists.

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.

Quando usar: For lists where the order of items is not relevant (e.g., shopping list).

html

<ul>

Ordered List

Creates an ordered list of items. List items are usually marked with numbers or letters, indicating a sequence or hierarchy.

Quando usar: For lists where the order of items is important (e.g., recipe steps).

html

<ol>

List Item

Represents an individual item within a list (`<ul>` or `<ol>`). Must be a direct child of `<ul>`, `<ol>`, or `<menu>`.

Quando usar: For each item within an ordered or unordered list.

html

<li>

Definition List

Creates a definition list, which is a list of terms and their respective descriptions. Useful for glossaries, Q&A, or metadata.

Quando usar: To create glossaries or lists of terms and their definitions.

html

<dl>

Definition Term

Represents a term to be defined within a definition list (`<dl>`). Each `<dt>` is usually followed by one or more `<dd>` elements.

Quando usar: To define the term in a definition list.

html

<dt>

Definition Description

Represents the description or definition of a term (`<dt>`) within a definition list (`<dl>`).

Quando usar: To provide the description or explanation of a term in a definition list.

html

<dd>

List Attributes

6 snippets

Attributes for customizing the appearance and behavior of ordered and unordered lists.

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.

Quando usar: For ordered lists with standard numbering.

html

<ol type="1">

Uppercase Letter List

Defines an ordered list that uses uppercase letters (A, B, C...) as markers for the list items.

Quando usar: For ordered lists that use uppercase letters as markers.

html

<ol type="A">

Lowercase Letter List

Defines an ordered list that uses lowercase letters (a, b, c...) as markers for the list items.

Quando usar: For ordered lists that use lowercase letters as markers.

html

<ol type="a">

Roman Numeral List

Defines an ordered list that uses uppercase Roman numerals (I, II, III...) as markers for the list items.

Quando usar: For ordered lists that use Roman numerals as markers.

html

<ol type="I">

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.

Quando usar: To continue a list from a specific point or when the logical order requires a different start.

html

<ol start="5">

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.

Quando usar: When you want to remove default markers and style the list with CSS.

html

<ul style="list-style-type: none;">

Table Structure

7 snippets

Fundamental elements for creating and organizing data in tabular format.

Table Container

The main container for tabular data. Defines an HTML table, grouping all its elements (header, body, footer, rows, and cells).

Quando usar: To create any data table.

html

<table>

Table Header

Groups the header content of a table. Contains the column header information, usually using `<th>` elements.

Quando usar: To define the semantic header of a table.

html

<thead>

Table Body

Groups the body content of a table. Contains the main data rows of the table, using `<tr>` and `<td>` elements.

Quando usar: To define the main data body of a table.

html

<tbody>

Table Footer

Groups the footer content of a table. Typically contains summaries, totals, or additional information related to the table body data.

Quando usar: To define the semantic footer of a table, such as totals or notes.

html

<tfoot>

Table Row

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.

Quando usar: For each new row of data or header in the table.

html

<tr>

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.

Quando usar: For cells that serve as column or row headers.

html

<th>

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.

Quando usar: For each common data cell in a table.

html

<td>

Table Attributes

5 snippets

Attributes for controlling the presentation and layout of cells in HTML tables.

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.

Quando usar: Avoid using. Prefer CSS for border styling.

html

<table border="1">

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.

Quando usar: To merge cells horizontally, spanning multiple columns.

html

<td colspan="2">

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.

Quando usar: To merge cells vertically, spanning multiple rows.

html

<td rowspan="3">

Header Scope (Column)

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.

Quando usar: To indicate that a <th> is the header for an entire column.

html

<th scope="col">

Header Scope (Row)

Indicates that the header cell (`<th>`) provides a header for all cells in the same row. Essential for accessibility, especially in complex tables.

Quando usar: To indicate that a <th> is the header for an entire row.

html

<th scope="row">

📝 Form Structure

5 snippets

Basic elements for building HTML forms and logically grouping their fields.

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.

Quando usar: To start creating a form for data collection.

html

<form>

Form with Action and Method

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.

Quando usar: To configure how and where form data will be submitted.

html

<form action="/submit" method="post">

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.

Quando usar: To logically group related fields in a form.

html

<fieldset>

Group Caption (Legend)

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.

Quando usar: To give a title to a group of fields within a <fieldset>.

html

<legend>

Field Label (Label)

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.

Quando usar: To provide accessible labels for all form fields.

html

<label for="id">

Basic Input Fields

6 snippets

Most common input field types for collecting different types of user data.

Text Field

Creates a single-line text input field for general data, such as names, surnames, or short addresses.

Quando usar: For generic single-line text input.

html

<input type="text">

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.

Quando usar: To collect email addresses.

html

<input type="email">

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.

Quando usar: To collect passwords or sensitive information that should be masked.

html

<input type="password">

Number Field

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.

Quando usar: To collect numerical inputs, such as age or quantity.

html

<input type="number">

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.

Quando usar: To collect phone numbers.

html

<input type="tel">

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.

Quando usar: To collect website addresses or links.

html

<input type="url">

Form Selection Fields

6 snippets

Elements allowing users to choose from predefined options in a form.

Checkbox

Creates a checkbox that allows the user to choose zero or more options from a set. Each checkbox is independent, unless semantically grouped.

Quando usar: When the user can select multiple options from a list.

html

<input type="checkbox">

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.

Quando usar: When the user must select only one option from a group.

html

<input type="radio">

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 `<option>` tag.

Quando usar: To allow the user to select one or more options from a long list.

html

<select>

Dropdown List Option

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.

Quando usar: For each selectable item within a <select>.

html

<option>

Option Group (Optgroup)

Groups related options within a `<select>` element, creating a heading for the option group. The `label` attribute defines the group's heading text.

Quando usar: To organize options in a <select> into logical categories.

html

<optgroup>

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).

Quando usar: To collect long text inputs, such as comments or descriptions.

html

<textarea>

Buttons and Form Controls

5 snippets

Elements for submitting, resetting, or performing other form actions.

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.

Quando usar: To submit form data.

html

<button type="submit">

Reset Button

Creates a button that, when clicked, resets all form fields to their initial values. Useful to allow the user to start over.

Quando usar: To allow the user to clear and restart the form.

html

<button type="reset">

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.

Quando usar: For buttons that execute JavaScript actions without submitting the form.

html

<button type="button">

Submit Button (Input)

Creates a form submission button with the appearance of an `input`. Functionally similar to `<button type="submit">`, but does not allow HTML content inside the tag, only the `value` attribute's value as text.

Quando usar: To submit form data, as an alternative to <button type="submit">.

html

<input type="submit">

Reset Button (Input)

Creates a form reset button with the appearance of an `input`. Functionally similar to `<button type="reset">`, but does not allow HTML content inside the tag.

Quando usar: To allow the user to clear and reset the form, as an alternative to <button type="reset">.

html

<input type="reset">

🚀 Modern HTML5 Fields

8 snippets

New HTML5 input types for collecting specific data with enhanced validation and user interfaces.

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.

Quando usar: To collect a specific date from the user.

html

<input type="date">

Time Selector

Creates an input field for selecting a time (hours and minutes). Browsers may offer an optimized time control.

Quando usar: To collect a specific time from the user.

html

<input type="time">

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"`.

Quando usar: To collect a combined local date and time.

html

<input type="datetime-local">

Month Selector

Creates an input field for selecting a month and year. Useful for credit card expiration dates or time periods.

Quando usar: To collect only the month and year.

html

<input type="month">

Week Selector

Creates an input field for selecting a week and year. The display format may vary between browsers.

Quando usar: To collect a specific week of the year.

html

<input type="week">

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`).

Quando usar: To allow the user to choose a color.

html

<input type="color">

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.

Quando usar: To allow selection of a numeric value within a range, such as volume or zoom.

html

<input type="range">

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.

Quando usar: To allow the user to upload files.

html

<input type="file">

HTML5 Form Validation

7 snippets

HTML5 attributes for native form validation, reducing the need for JavaScript for basic checks.

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.

Quando usar: For fields that must be filled before form submission.

html

required

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).

Quando usar: To validate the format of a field's input using regular expressions.

html

pattern="[A-Za-z]{3}"

Minimum Length

Defines the minimum number of characters a text field (`<input type="text">`, `<textarea>`) must have to be valid.

Quando usar: To ensure text input has a minimum number of characters.

html

minlength="3"

Maximum Length

Defines the maximum number of characters a text field (`<input type="text">`, `<textarea>`) can have.

Quando usar: To limit the number of characters that can be entered into a text field.

html

maxlength="50"

Minimum Value

Defines the minimum allowed value for numeric (`type="number"`, `type="range"`) or date/time (`type="date"`, `type="time"`) fields.

Quando usar: To define the minimum acceptable value for numeric or date/time inputs.

html

min="0"

Maximum Value

Defines the maximum allowed value for numeric fields (`type="number"`, `type="range"`) or date/time fields (`type="date"`, `type="time"`).

Quando usar: To define the maximum acceptable value for numeric or date/time inputs.

html

max="100"

Increment (Step)

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...).

Quando usar: To control value increments in numeric or time fields.

html

step="5"

Form Helper Elements

5 snippets

HTML5 elements that enhance form user experience with suggestions, visual feedback, and dynamic results.

Predefined Options List (Datalist)

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>`.

Quando usar: To provide auto-completion suggestions for text fields.

html

<datalist>

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.

Quando usar: To display calculation results or dynamic feedback in forms.

html

<output>

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.

Quando usar: Para exibir o progresso de uma tarefa em andamento.

html

<progress>

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 `<progress>`, which shows the progress of a task.

Quando usar: To display a value within a fixed range, like a battery meter.

html

<meter>

Key Generation (Keygen - Obsolete)

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.

Quando usar: Avoid use, as it is obsolete and unsupported.

html

<keygen>

🎬 Audio and Video

6 snippets

HTML5 elements for embedding and controlling multimedia content directly in web pages.

Audio Player

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.

Quando usar: To embed audio files on your page.

html

<audio controls>

Video Player

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.

Quando usar: To embed video files on your page.

html

<video controls>

Media Source

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.

Quando usar: To provide different audio/video formats for broad compatibility.

html

<source src="file.mp4" type="video/mp4">

Captions/Descriptions Track

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`).

Quando usar: To add subtitles, descriptions, or other timed metadata to media.

html

<track kind="subtitles" src="subtitles.vtt">

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.

Quando usar: For background videos or those that should be soundless and loop automatically.

html

<video autoplay loop muted>

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.

Quando usar: To display a preview image for the video.

html

<video poster="poster.jpg">

Graphics and Canvas

4 snippets

Elements for creating dynamic and vector graphics directly in the browser.

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.

Quando usar: For dynamic graphic drawing via JavaScript.

html

<canvas>

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.

Quando usar: For vector graphics that need to be scalable and manipulable.

html

<svg>

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.

Quando usar: When defining the initial dimensions for the canvas drawing area.

html

<canvas width="300" height="150">

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.

Quando usar: To control the coordinate system and scaling of an SVG.

html

<svg viewBox="0 0 100 100">

Additional Graphic Elements

4 snippets

Elements for creating interactivity in images and ensuring correct SVG rendering.

Image Map

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>`.

Quando usar: To create clickable areas on an image.

html

<map>

Clickable Area in Map

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.

Quando usar: To define interactive regions within an image map.

html

<area>

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()`.

Quando usar: To interact with the canvas using JavaScript.

html

<canvas id="myCanvas">

SVG with Namespace

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.

Quando usar: When embedding SVG directly into HTML, especially to ensure compatibility with XML parsers.

html

<svg xmlns="http://www.w3.org/2000/svg">

🔍 Essential SEO Metadata

5 snippets

Crucial meta elements for search engine optimization and correct page display.

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.

Quando usar: To provide a concise summary of the page content for SEO.

html

<meta name="description" content="...">

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.

Quando usar: Optional, to list relevant keywords (minimal impact on modern SEO).

html

<meta name="keywords" content="...">

Page Author

Specifies the name of the HTML document's author. Useful for attribution, content management, and, in some cases, for authorial content SEO.

Quando usar: To identify the author of the page content.

html

<meta name="author" content="...">

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).

Quando usar: To control how search engines interact with your page.

html

<meta name="robots" content="index, follow">

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.

Quando usar: On all pages to ensure responsiveness and good ranking in mobile searches.

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Open Graph for Social Media

5 snippets

Open Graph protocol meta tags for controlling how content appears when shared on platforms like Facebook, LinkedIn, and WhatsApp.

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.

Quando usar: To define the sharing title on social networks.

html

<meta property="og:title" content="...">

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.

Quando usar: To define the social media sharing description.

html

<meta property="og:description" content="...">

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.

Quando usar: To define the preview image for social media sharing.

html

<meta property="og:image" content="...">

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.

Quando usar: To specify the preferred page URL for social networks.

html

<meta property="og:url" content="...">

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.

Quando usar: To categorize the page's content type for social networks.

html

<meta property="og:type" content="website">

Twitter Cards

4 snippets

Specific meta tags for controlling the display of shared links on the Twitter platform.

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`.

Quando usar: To define the layout of the Twitter sharing card.

html

<meta name="twitter:card" content="summary">

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.

Quando usar: For a title optimized specifically for Twitter.

html

<meta name="twitter:title" content="...">

Twitter Description

Defines the specific description for the Twitter Card, which can differ from `og:description` to fit Twitter's character limits or style.

Quando usar: For a description optimized specifically for Twitter.

html

<meta name="twitter:description" content="...">

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.

Quando usar: For a preview image optimized specifically for Twitter.

html

<meta name="twitter:image" content="...">

Performance Optimization

4 snippets

Link elements that help improve loading time and user experience by preloading or preconnecting to resources.

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.

Quando usar: For essential resources that should be loaded as quickly as possible.

html

<link rel="preload" href="...">

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.

Quando usar: For resources that may be needed on future pages.

html

<link rel="prefetch" href="...">

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.

Quando usar: To speed up DNS resolution for external domains.

html

<link rel="dns-prefetch" href="...">

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.

Quando usar: To indicate the preferred URL of a page, especially in cases of duplicate content.

html

<link rel="canonical" href="...">

♿ ARIA Accessibility Attributes

5 snippets

WAI-ARIA attributes for improving HTML element accessibility, providing semantic information for assistive technologies.

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.

Quando usar: To provide a textual label for elements without visible text, such as icon buttons.

html

aria-label="descrição"

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.

Quando usar: To associate an element with a longer, more detailed description in another element.

html

aria-describedby="id"

Expanded/Collapsed 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`).

Quando usar: To indicate whether a component (menu, accordion) is open or closed.

html

aria-expanded="true"

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.

Quando usar: To hide purely decorative elements from screen readers.

html

aria-hidden="true"

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.

Quando usar: To announce dynamic content updates (e.g., error messages, search results).

html

aria-live="polite"

Semantic ARIA Roles

5 snippets

Role attributes for defining the function or purpose of an element, especially when non-semantic elements are used.

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.

Quando usar: To indicate that an element is a navigation area (if it's not <nav>).

html

role="navigation"

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 `<main>`.

Quando usar: To indicate the main content of the page (if not <main>).

html

role="main"

Complementary Content Role

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.

Quando usar: To indicate complementary content (if not <aside>).

html

role="complementary"

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.

Quando usar: To identify the search area on your page.

html

role="search"

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.

Quando usar: For important alert messages that require immediate attention.

html

role="alert"

Keyboard Navigation and Focus

4 snippets

Attributes for controlling tab order and element focus, essential for keyboard navigation users.

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.

Quando usar: To make non-interactive elements keyboard-focusable in the natural order.

html

tabindex="0"

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.

Quando usar: To focus elements via JavaScript without including them in the tab order.

html

tabindex="-1"

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).

Quando usar: To provide keyboard shortcuts for important elements (use sparingly).

html

accesskey="s"

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.

Quando usar: To automatically focus a crucial form field upon page load.

html

autofocus

Alternative Content for Accessibility

4 snippets

Techniques for providing textual and contextual alternatives for non-text content, ensuring all users can access the information.

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.

Quando usar: Always for images that convey important information.

html

<img src="..." alt="Descrição detalhada">

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.

Quando usar: For images that do not add informative value, such as purely visual icons.

html

<img src="..." alt="" role="presentation">

Long Description (longdesc - Obsolete)

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.

Quando usar: Avoid using, as it is obsolete.

html

<longdesc="descricao.html">

Figure with Accessible Caption

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.

Quando usar: To explicitly associate a figure with its caption for screen readers.

html