Attributes
Let's dig deeper on the topic of attributes. I mentioned it briefly before but
there are so many more that I can't even count. On top of those who contain machine readable
data, we have the custom ones such as class="grid" or id="main". I
will do as with the tags and only list the most common of the machine readable ones. But I'll
also list my most used custom classes, it helps me with consistency.
alt |
Provides alternative text for images; essential for accessibility. |
src |
Specifies the source file for images, scripts, audio, or video. |
href |
Defines the destination URL for links and external resources. |
id |
Gives an element a unique identifier, often used for styling or linking. |
class |
Assigns one or more class names for styling or scripting. |
title |
Provides additional information shown on hover as a tooltip. |
style |
Applies inline CSS directly to an element. |
type |
Defines the type of an input, script, or button (e.g., text, checkbox, module). |
value |
Sets the initial value for inputs or the value sent with forms. |
name |
Gives form elements a name so their data can be submitted. |
placeholder |
Shows hint text inside an input field before the user types. |
target |
Controls how a link opens (e.g., _blank for new tab). |
rel |
Defines the relationship between the current document and a linked resource. |
controls |
Adds playback controls to audio or video elements. |
loop |
Makes audio or video restart automatically when finished. |
autoplay |
Starts audio or video automatically. |
width / height |
Sets the display size of images, videos, or canvas elements. |
lang |
Specifies the language of the elements content. |
data-* |
Custom attributes for storing extra information used by scripts. |
.divider |
I use this instead of <br> to specify size. |
.wrapper |
This helps elements stay clumped together if needed be. |
#header |
I use the #id instead of .class here in case I want to add JavaScripts |
#footer |
|
#main |
|
.aside #left |
|
.aside #right |