Learn

HTML – Attributes

Advertisement

We’ve got seen few HTML tags and their utilization like heading tags <h1>, <h2>,paragraph tag <p> and different tags. We used them up to now of their easiest type, however many of the HTML tags also can have attributes, that are further bits of knowledge.

An attribute is used to outline the characteristics of an HTML element and is positioned contained in the element’s opening tag. All attributes are made up of two components − a title and a worth

  1. The title is the property you need to set. For instance, the paragraph  element within the instance carries an attribute whose title is align, which you need to use to point the alignment of paragraph on the web page.
  2. The worth is what you need the worth of the property to be set and at all times put inside quotations.The beneath instance exhibits three potential values of align attribute: left, middle and proper.

Attribute names and attribute values are case-insensitive. Nevertheless, the World Large Internet Consortium (W3C) recommends lowercase attributes/attribute values of their HTML four advice.

Example

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Attribute  Example</title> 
   </head>
  
   <body> 
      <p align = "left">left aligned</p> 
      <p align = "center">center aligned</p> 
      <p align = "right">right aligned</p> 
   </body>
  
</html>

This may produce the next result

left aligned

center aligned

right aligned

Core Attributes

The 4 core attributes that can be utilized on the majority of HTML elements (though not all) are −

  • Id
  • Title
  • Class
  • Style

The Id Attribute

The id attribute of an HTML tag can be utilized to uniquely determine any element inside an HTML web page. There are two major causes that you just may need to use an id attribute on a component

  • If an element carries an id attribute as a singular identifier, it’s potential to determine simply that element and its content material.
  • When you have two elements of the identical identify inside a Net web page (or model sheet), you should utilize the id attribute to differentiate between elements which have the identical identify.

We’ll focus on model sheet in separate tutorial. For now, let’s use the id attribute to differentiate between two paragraph elements as proven under.

Now attempt to carry your cursor over “Titled Heading Tag Instance” and you will note that no matter title you utilized in your code is popping out as a tooltip of the cursor.

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

The class Attribute

The class attribute is used to affiliate a component with a method sheet, and specifies the category of factor. You’ll study extra about using the category attribute when you’ll study Cascading Type Sheet (CSS). So for now you possibly can keep away from it.

The worth of the attribute may be a space-separated listing of sophistication names. For instance

class = "className1 className2 className3"

The style Attribute

The type attribute lets you specify Cascading Type Sheet (CSS) guidelines throughout the element.

<!DOCTYPE html>
<html>

   <head>
      <title>style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Few text...</p>
   </body>
	
</html>

This may produce the next result

Few text…

At this level of time, we’re not studying CSS, so simply let’s proceed with out bothering a lot about CSS. Right here, it’s essential to perceive what are HTML attributes and the way they can be utilized whereas formatting content material.

Internationalization Attributes

There are three internationalization attributes, which can be found for many (though not all) XHTML elements.

  • dir
  • lang
  • xml:lang

The dir Attribute

The dir attribute permits you to point out to the browser concerning the route through which the textual content ought to flow. The dir attribute can take certainly one of two values, as you possibly can see within the desk that follows −

Value Meaning
ltr Left 2 right (the default value)
rtl Right 2 left (for languages such as Hebrew or Arabic that are read right to left)

Example

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Directions</title>
   </head>
  
   <body>
      how IE 5 renders right-to-left directed.
   </body>
  
</html>

This may produce the next result

This is how IE 5 renders right-to-left directed text.

When dir attribute is used within the <html> tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text’s direction for just the content of that tag.

The lang Attribute

The lang attribute lets you indicate the primary language utilized in a doc, however this attribute was stored in HTML just for backwards compatibility with earlier variations of HTML. This attribute has been changed by the xml:lang attribute in new XHTML doc.

The values of the lang attribute are ISO-639 normal two-character language codes. Test HTML Language Codes: ISO 639 for a whole record of language codes.

Example

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language</title>
   </head>

   <body>
      Using English Language
   </body>

</html>

This may produce the next result

using English Language

The xml:lang Attribute

The xml:lang attribute is the XHTML alternative for the lang attribute. The worth of the xml:lang attribute ought to be an ISO-639 nation code as mentioned in earlier section.

Generic Attributes

Here is a table of another attributes which might be readily usable with lots of the HTML tags.

Attribute Options Function
align right, left, center Horizontally aligns tags
valign top, middle, bottom Vertically aligns tags within an HTML element.
bgcolor numeric, hexidecimal, RGB values Places a background color behind an element
background URL Places a background image behind an element
id User Defined Names an element for use with Cascading Style Sheets.
class User Defined Classifies an element for use with Cascading Style Sheets.
width Numeric Value Specifies the width of tables, images, or table cells.
height Numeric Value Specifies the height of tables, images, or table cells.
title User Defined “Pop-up” title of the elements.

We are going to see associated examples as we are going to proceed to check different HTML tags. For a whole record of HTML Tags and associated attributes please verify reference to HTML Tags List.

Related Articles

Leave a Reply

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

Check Also

Close
Privacy Policy | DMCA | Contact US
Back to top button
Close