DEV Community

Mahalakshmi C
Mahalakshmi C

Posted on

HTML Attributes

#html

In this blog, we'll explore what HTML attributes are, why they're important, their syntax, and the most commonly used attributes with simple explanations.

As I continued learning, I realized that these are play a key role in making web pages functional and meaningful. Attributes provide additional information about HTML elements, helping define their behavior, appearance, and purpose. Without attributes, HTML would only provide the basic structure of a webpage, but many essential features-like links, images, and forms-wouldn't work as expected.

What are HTML Attributes?

All HTML elements can have attributes

  • HTML attributes provide additional information about HTML elements.

  • They define the behavior, appearance, or properties of an element.

  • Attributes usually come in name/value pairs like: name="value"

Syntax

<tagname attribute="value">Content</tagname>

Uses

  • Add extra information to HTML elements.

  • Link web pages using the href attribute.

  • Display images using the src attribute.

Attributes

  • The href (hyperlink)attribute specifies the URL of the page the link. 
<a href="https://www.google.com">Visit Google</a>
Enter fullscreen mode Exit fullscreen mode
  • The id attribute gives an HTML element a unique name. An id should be used only once on a webpage. 
<h1 id="main-heading">Welcome to My Website</h1>
Enter fullscreen mode Exit fullscreen mode
  • The class attribute groups one or more HTML elements together. Multiple elements can have the same class. 
<p class="text">HTML</p>
 <p class="text">CSS</p>
Enter fullscreen mode Exit fullscreen mode
  • The style attribute is used to apply CSS directly to an HTML element. 
<h2 style="color:blue;">Hello World</h2>
Enter fullscreen mode Exit fullscreen mode
  • The title attribute provides additional information about an element. A tooltip appears when the user places the mouse pointer over the element. 
<p title="This is a paragraph">Move your mouse here.</p>
Enter fullscreen mode Exit fullscreen mode
  • The src attribute specifies the location (source) of an image, audio, video, or other external file. 
<img src="flower.jpg">
Enter fullscreen mode Exit fullscreen mode
  • The alt (alternative text) attribute provides a text description for an image if it cannot be displayed. 
<img src="cat.jpg" alt="Cute white cat">
Enter fullscreen mode Exit fullscreen mode
  • The width and height of an image , div or other elements. 
<img src="flower.jpg" width="300" height="200">
Enter fullscreen mode Exit fullscreen mode
  • The placeholder attribute displays hint text inside an input field until the user enters data. 
<input type="text" placeholder="Enter your name">
Enter fullscreen mode Exit fullscreen mode

Top comments (0)