HTML Attributes

You are here to learn HTML Attributes.

HTML Attributes

HTML attributes refer to the secondary information of HTML elements. Basically html attributes are specified in start tag and come in “name = value” pairs.

Lang attribute

lang attribute is used to declare language.

First two letters specify language.(en-US)

lang attribute is usually declared in <html> tag.

Example: Lang attribute

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Flower Brackets - code here</title>
</head>
<body>

<h1>Heading</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</body>
</html>

Title attribute

Title attribute is usually associated with paragraph element(<p>). The title attribute value is shown as a tool-tip when user mouse over the paragraph element. See example below,

Example: Title attribute

<!DOCTYPE html>
<html>
<head>
<title>Flower Brackets - code here</title>
</head>
<body>

<h2>Heading</h2>

<p title="Tooltip here">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</body>
</html>

Output:

HTML Attributes


Href attribute

Href attribute is where link address is specified.

Links are usually shown in anchor tag(<a>).

Example: Href attribute

<!DOCTYPE html>
<html>
<head>
<title>Flower Brackets - code here</title>
</head>
<body>

<a href="http://www.flowerbrackets.com">Here is a link.</a>

</body>
</html>

Output:

Here is a link.


Size Attributes

Size attributes refer width and height or size of the image.

Example: size attribute

<!DOCTYPE html>
<html>
<head>
<title>Flower Brackets - code here</title>
</head>
<body>

<img src="images/Flower_Brackets.jpg" width="554" height="102">

</body>
</html>

Output:

HTML Attributes


Alt attribute

Alt attribute defines alternative text, when an image is not displayed.

It also plays a major role for blind readers who can listen value of the attribute by screen readers.

example: alt attribute

<!DOCTYPE html>
<html>
<head>
<title>Flower Brackets - code here</title>
</head>
<body>

<img src="images/Flower_Brackets.jpg" alt="www.flowerbrackets.com" width="554" height="102">

</body>
</html>

Output:

HTML Attributes


NOTE:

  • W3C recommends lowercase in HTML and using quotes in HTML.
  • Title attribute does not require use of space like below
<p title=Flower Brackets> Instead write <p title=FlowerBrackets>
  • HTML5 standard strictly imposes not to use quote around attribute values.
  • Single and double quotes can be used around attribute values in HTML.
  • Omitting quotes can produce errors. So, use of quotes is highly recommended.
  • Title attribute is not case-sensitive, it can be written like title or TITLE.

About the author

admin

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *