DEV Community

Ragul
Ragul

Posted on

HTML Attributes

#html

HTML attributes are special features used to provide additional information about HTML elements. They modify the behavior of the element or define its characteristics.

Example
1.The src attribute specifies the source or location of the image. Similarly, the href attribute in the tag defines the destination of the link.

<img src="profile.jpg" alt="Profile">
Enter fullscreen mode Exit fullscreen mode 
<a href="https://www.dev.to">Click here to visit Dev Community</a>
Enter fullscreen mode Exit fullscreen mode

2.The <input> tag, used for creating forms. Its type attribute defines what kind of input it is, like text, password, or checkbox. The placeholder attribute shows a hint inside the field before the user types anything.

<input type="text" placeholder="full name">

<input type="password" placeholder="password">

<input type="checkbox" id="terms">
<label for="terms">I agree to the terms and conditions</label>
Enter fullscreen mode Exit fullscreen mode

4.The <form> tag itself, used to collect user data. It has an action attribute that points to where the data should be sent, and a method attribute to decide how the data is sent, usually GET or POST.

<form action="/submit-login" method="POST">
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
  <button type="submit">Login</button>
</form>
Enter fullscreen mode Exit fullscreen mode

3.Global attributes like class and id can be added to almost any tag. class is used to style multiple elements with CSS, while id is used to uniquely identify a single element for scripting or linking.

<h1 id="main-title">Welcome to My Site</h1>

<p class="highlight-text">This is an important paragraph.</p>
<p class="highlight-text">This is another important paragraph.</p>

<div id="sidebar" class="layout-box highlight-text">
  Sidebar content goes here.
</div>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
will_laurenson_c16056cd19 profile image
Will Laurenson •

Good explanation of HTML attributes. They are an important concept for beginners because attributes provide extra information about HTML elements and control their behavior.

One thing worth adding is that attributes can be divided into global attributes and element-specific attributes. For example, attributes likeid, class, and title can be used on many HTML elements, while href is mainly used with links and srcis commonly used with images and scripts.

Also, it's a good practice to use attributes that improve accessibility. For example, adding meaningful alt text to images helps users who rely on screen readers.

Overall, this is a clear introduction to a basic but essential part of writing structured HTML. Keep practicing with different elements to understand where each attribute fits best.