Scribd
Upload
45 views21 pages

HTML Attributes

An HTML attribute provides characteristics for an HTML element and is placed within its opening tag. It has a name and value. Common attributes include align to set paragraph alignment, bgcolor and background for body styling, href and target for links, src and alt for images, and lang for specifying the document language. Core attributes id, title, class, and style can be used on most elements. Id uniquely identifies an element, title provides extra information as a tooltip, and class and style are used with CSS.

Uploaded by

amit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
45 views21 pages

HTML Attributes

An HTML attribute provides characteristics for an HTML element and is placed within its opening tag. It has a name and value. Common attributes include align to set paragraph alignment, bgcolor and background for body styling, href and target for links, src and alt for images, and lang for specifying the document language. Core attributes id, title, class, and style can be used on most elements. Id uniquely identifies an element, title provides extra information as a tooltip, and class and style are used with CSS.

Uploaded by

amit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

HTML Attributes

An attribute is used to define the characteristics of an HTML element and is placed inside
the element's opening tag. All attributes are made up of two parts: a name and a value:

The name is the property you want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicate the
alignment of paragraph on the page.

The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left, center
and right.
Names of attributes and their values are not case-sensitive.

For example, BODY Tag, <body> carries many attributes such as bgcolor,
background that you can implement for indicating the back color of your webpage,
or give a specific image or background texture to your page, respectively.
Example:-bgcolor(attribute)
<!DOCTYPE html>
<html>
<body bgcolor=“red">
</body>
</html>
Example:-align(attribute)
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
Example:-bdo(tag) & dir(attribute)
• The <bdo>...</bdo> element stands for Bi-Directional Override and
it is used to override the current text direction.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>
Hyper link
• The <a> tag defines a hyperlink. which is used
to link from one page to another.
• The href attribute specifies the URL of the
page the link goes to:
• Syntax: <a href="url">link text</a>
• Example
<a href="https://lpu.in/">click here</a>
a tag & href attribute
Eample:-
<!DOCTYPE html>
<html>
<body>

<h1>Hi Everyone......</h1>

<a href="https://lpu.in/">Visit lpu</a>

</body>
</html>
Link to an Email Address
• Use mailto: inside the href attribute to create
a link that opens the user's email program (to
let them send a new email):
• Example
• <a href="mailto:[email protected]">Se
nd email</a>
Email Example
<!DOCTYPE html>
<html>
<body>
<p>To know any information:</p>
<p><a href="mailto:[email protected]">Send
email</a></p>
</body>
</html>
The target Attribute

• By default, the linked page will be displayed in


the current browser window. To change this,
you must specify another target for the link.
• The target attribute specifies where to open
the linked document.
• _blank - Opens the document in a new
window or tab
target Example
<!DOCTYPE html>
<html>
<body>

<h1>The a target attribute</h1>

<p>Open link in a new window or tab: <a href="https://lpu.in/"


target="_blank">Visit lpu</a></p>

</body>
</html>
img tag and src attribute

• The <img> tag is used to embed an image in


an HTML page.
• The src attribute specifies the path to the
image to be displayed.
• The <img> tag should also contain
the width and height attributes, which specify
the width and height of the image (in pixels)
Example
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the
filename of the image source is specified in the src
attribute:</p>
<img src="C:\Users\ADMIN\Desktop\CSE326\image1.jpg"
width="500" height="600">
</body>
</html>
The alt Attribute

• The required alt attribute for the <img> tag specifies


an alternate text for an image, if the image for some
reason cannot be displayed. This can be due to a
slow connection, or an error in the src attribute, or if
the user uses a screen reader.
Example of alt attribute
<!DOCTYPE html>
<html>
<body>

<h2>The alt Attribute</h2>


<p>The alt attribute should reflect the image content, so users who cannot
see the image get an understanding of what the image contains:</p>

<img src=" C:\Users\ADMIN\Desktop\CSE326\image1.jpg" alt=“Green


Hands" width="500" height="600">

</body>
</html>
Use an Image as a Link

• To use an image as a link, just put the <img> tag inside the <a> tag:

Example:-
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<p>The image below is a link. Try to click on it.</p>
<a href="https://www.google.com/"><img src="C:\Users\ADMIN\
Desktop\CSE326\image1.jpg" alt="Error in opening the file"
style="width:42px;height:42px;"></a>
</body>
</html>
The lang Attribute
• You should always include the lang attribute inside
the <html> tag, to declare the language of the Web page.
• This is meant to assist search engines and browsers.
Example:-
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
lang attribute continue...
• Country codes can also be added to the language
code in the lang attribute. So, the first two characters
define the language of the HTML page, and the last
two characters define the country.
Example:-
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Core Attributes

The four core attributes that can be used on the


majority of HTML elements are:
1. id CSS part
2. title
3. class CSS part
4. style
1. The id Attribute

• The id attribute specifies a unique id for an


HTML element. The value of the id attribute
must be unique within the HTML document.
• The id attribute is used to point to a specific
style declaration in a style sheet.
• The syntax for id is: write a hash character (#),
followed by an id name. Then, define the CSS
properties within curly braces {}.
Example:-id attribute
<html>
    <head>
        <style>
            #myid{
                background-color:pink;
                color:blueviolet;
                padding: 90px;
                text-align: right;
      }
        </style>
    </head>
    <body>
        <h1 id="myid">hello lpu</h1>
    </body>
</html>
2. The title Attribute
• The title attribute specifies extra information about an element.
• The information is most often shown as a tooltip text when the
mouse moves over the element.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">This is information is important</h3>
</body>
</html>

You might also like