DEV Community

Anandhi P
Anandhi P

Posted on

HTML ATTRIBUTES

Hi friends!

Today, I am going to share some information about HTML attributes. HTML attributes provide additional information about HTML elements and help make web pages more functional and interactive. In this blog, you will learn what HTML attributes are, their syntax, and some commonly used attributes with examples.

HTML Attributes

Introduction

HTML attributes are special words that provide additional information about HTML elements. They are written inside the opening tag of an element and help define its behavior, appearance, or functionality. Attributes make web pages more interactive and meaningful.

Syntax

The basic syntax of an HTML attribute is:

html
Content


Example:

html
<a href="https://www.google.com">Visit Google</a>


In this example, `href` is an attribute that specifies the destination of the link.

 Common HTML Attributes

 1. `id`

The `id` attribute gives a unique identifier to an HTML element.
Enter fullscreen mode Exit fullscreen mode


html

Welcome to HTML.


 2. `class`

The `class` attribute is used to group elements so that CSS or JavaScript can target them.
Enter fullscreen mode Exit fullscreen mode


html

This is a paragraph.


 3. `href`

The `href` attribute specifies the URL for a hyperlink.
Enter fullscreen mode Exit fullscreen mode


html
Click Here


 4. `src`

The `src` attribute specifies the source of an image, audio, or video.
Enter fullscreen mode Exit fullscreen mode


html
Nature


 5. `alt`

The `alt` attribute provides alternative text for an image if it cannot be displayed.
Enter fullscreen mode Exit fullscreen mode


html
Red Flower


 6. `title`

The `title` attribute displays extra information when the user hovers over an element.
Enter fullscreen mode Exit fullscreen mode


html

Hover over this text.


 7. `style`

The `style` attribute applies inline CSS styles.
Enter fullscreen mode Exit fullscreen mode


html

Blue text


 8. `width` and `height`

These attributes define the width and height of an image or other elements.
Enter fullscreen mode Exit fullscreen mode


html


 9. `disabled`

The `disabled` attribute prevents a form element from being used.
Enter fullscreen mode Exit fullscreen mode


html
Submit


 10. `placeholder`

The `placeholder` attribute displays hint text inside an input field.
Enter fullscreen mode Exit fullscreen mode


html






* They provide additional information about HTML elements.
* They improve the functionality of web pages.
* They help in styling elements with CSS.
* They allow JavaScript to access and manipulate elements.
* They improve accessibility by providing descriptive information
Enter fullscreen mode Exit fullscreen mode

Top comments (0)