Understand HTML Attribute Of HTML Element

HTML Attributes

HTML attribute is a additional information about the HTML element.It is a name value pairs like name="value".Attributes is always place inside start tag of the HTML element.

HTML Attributes has been put inside start tag of an HTML element.Do not place HTML attribute inside closing tag of any HTML element.

The href Attribute

The <a> tag has a href attribute that contains the URL of the connected web page.

General Syntax

<a href="https://sudhakarinfotech.com/shop">Visit sudhakarinfotech</a>    

Source Code

Download
<a href="https://sudhakarinfotech.com/shop">Visit sudhakarinfotech</a>

Source Code : Output

Code Explanation

Note: The HTML hyperlink element has href and title attribute. The href attribute of the HTML element is used to link the path of another web page while the title describes the web page.

The src Attribute Of An Image

The <img> tag us basically used to show the images.It has src attribute that specifies the path URL of the displaying image.

General Syntax

<img src="URL of the image i.e relative or absolute path" >    

Source Code

Download
<img src="URL of the image i.e relative or absolute path" >

Source Code : Output

Code Explanation

Note:The HTML element <img> has an src attribute that is used for providing a path of the image.

Image Attribute:Width & Height

The is also consists of width and height attributes that specify the width and height of the image respectively.

General Syntax

<img src="URL of the image i.e relative or absolute path"  width="width of the image" height="height of the image">    

Source Code

Download
<img src="URL of the image i.e relative or absolute path"  width="width of the image" height="height of the image">

Source Code : Output

Code Explanation

Note: The HTML element has a width and height attribute that is used to provide the width and height of the image.

The alt Attribute Of Image

The <img> has attribute alt that is very useful during any path error of the image because it displays alt message when the image does not display on the screen due to server error.

General Syntax

<img src="URL of the image i.e relative or absolute path" alt="Title about image">    

Source Code

Download
<img src="URL of the image i.e relative or absolute path" alt="Title about image">

Source Code : Output

Title about image

Code Explanation

Note:The HTML <img> element has an alt attribute that is used to provide additional information about the image and it displays on the screen whenever the image file path is not loaded by the browser.

Style Attribute

The style attribute is used to add styles to an HTML element,such as font,size,color ,etc.

General Syntax

<p style="color:green; font-size:18px; text-align:center;">This is a red paragraph.</p>    

Source Code

Download
<p style="color:green; font-size:18px; text-align:center;">This is a red paragraph.</p>

Source Code : Output

This is a red paragraph.

Code Explanation

Note:The HTML element <style> is used for writing inline CSS rule.

The id Attribute

The id attribute provides unique identification of the HTML element hence it is very easy to select this element using CSS or JavaScript.

General Syntax

<div id="container">Some content</div>    

Source Code

Download
<div id="container">Some content</div>

Source Code : Output

Some content

Code Explanation

Note:The id attribute of an HTML element is unique and the CSS rule regarding the id attribute is only applicable to a single element of an HTML document.

Class Attributes

The class attribute is also used to identify the element but it is not unique since one class value can be assigned to other elements too.

Source Code

Download
<p class="flower__text">Let us understand class attribute.</p>

Source Code : Output

Let us understand class attribute.

Code Explanation

Note: The class attribute of an HTML element is used for providing CSS rules to more than one HTML element.

Online Test / Quiz

Our Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS
2021-22 © shapeyourpath.com