HTML Attributes Reference

Last modified on: October 25, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">Here's a comprehensive HTML attributes reference along with detailed examples and a suggested meta title and description for a page that covers this topic.</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="975bd130-d0cb-48b3-ab4a-49431955a40a" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>HTML Attributes Reference</h3>
<h4>1. <strong>Global Attributes</strong></h4>
<p>Global attributes can be applied to any HTML element. Here are some common ones:</p>
<ul>
<li><strong><code>class</code></strong>: Specifies one or more class names for an element.</li>
<li><strong><code>id</code></strong>: Specifies a unique id for an element.</li>
<li><strong><code>style</code></strong>: Specifies an inline CSS style for an element.</li>
<li><strong><code>title</code></strong>: Specifies extra information about an element, usually shown as a tooltip.</li>
<li><strong><code>data-*</code></strong>: Used to store custom data directly on an element.</li>
</ul>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div id="uniqueDiv" class="container" style="color: red;" title="This is a tooltip" data-info="additional data"&gt;
    This is a div with global attributes.
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>2. <strong>Event Attributes</strong></h4>
<p>Event attributes are used to execute JavaScript when certain events occur.</p>
<ul>
<li><strong><code>onclick</code></strong>: Executes a script when an element is clicked.</li>
<li><strong><code>onmouseover</code></strong>: Executes a script when the mouse pointer is over an element.</li>
</ul>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;button onclick="alert('Button clicked!')"&gt;Click Me&lt;/button&gt;
&lt;div onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"&gt;
    Hover over this text to change its background color.
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>3. <strong>Form Attributes</strong></h4>
<p>These attributes are used in form elements.</p>
<ul>
<li><strong><code>action</code></strong>: Specifies where to send the form data when the form is submitted.</li>
<li><strong><code>method</code></strong>: Specifies the HTTP method to use when sending form data (GET or POST).</li>
<li><strong><code>name</code></strong>: Specifies a name for the input element.</li>
</ul>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;button onclick="alert('Button clicked!')"&gt;Click Me&lt;/button&gt;
&lt;div onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"&gt;
    Hover over this text to change its background color.
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>4. <strong>Media Attributes</strong></h4>
<p>Attributes for media elements like <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code>.</p>
<ul>
<li><strong><code>controls</code></strong>: Adds controls like play, pause, and volume to the media.</li>
<li><strong><code>autoplay</code></strong>: Specifies that the media should start playing as soon as it is ready.</li>
</ul>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;video width="320" height="240" controls autoplay&gt;
    &lt;source src="movie.mp4" type="video/mp4"&gt;
    Your browser does not support the video tag.
&lt;/video&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More