Used to provide additional information about an HTML element.
All HTML elements can have attributes and specified only in start tag <tag name="value" >.
This attributes gives the element to preform differently.
Attribues consits of a name and a value separated by an equals sign i.e., name="value"
Some attributes are valid for only their specific tags like href attribute for a tag.
Here are some of the main attributes used
Used to specify the URL of a hyperlink
The href attribute is used only in a (Anchor) tag.
The format of the href attribute is <a href="www.bmreducation.com" >
EDUCATION
<!DOCTYPE html>
<html>
<head>
<title>href attribute Example</title>
</head>
<body>
<a href="www.bmreducation.com">This is a Link</a>
<p>The links are valid which are kept in href attribute.</p>
<p>href attribute is valid only in a tag</p>
</body>
</html>
Used to specify the source URL of an image, video, audio file or iframe to display.
The src attribute is used in <img>, <video>, <audio>, and <iframe>.
The format of the src attribute is given below.
<!DOCTYPE html>
<html>
<head>
<title>src attribute Example</title>
</head>
<body>
<img src="/images/Logo.ico">
<video src="video.mp4" controls>
Your browser does not support the video tag.
</video>
<audio src="audio.mp3" controls>
Your browser does not support the audio tag.
</audio>
<iframe src="/coding/html/attributes"></iframe>
<p>The src attribute get the data of the path or url specified in it. Try with your own links.</p>
</body>
</html>
Used to provide a text description of an image, video, audio and many media tags.
By hovering the mouse pointer on the image, video or other media elements it shows the text kept in alt.
The alt attribute is used in <img>, <area>,and <video>.
<!DOCTYPE html>
<html>
<head>
<title>alt attribute Example</title>
</head>
<body>
<img src="/images/Logo.ico" alt="LOGO">
<p>The alt attribute provides a text description of an image, video, audio and many media tags.</p>
</body>
</html>
Similar as alt attribute but used for all elements.
used to provide additional information about an element.
The title attribute specifies a text which is displayed when the user hovers the mouse pointer over the element.
<!DOCTYPE html>
<html>
<head>
<title>title attribute Example</title>
</head>
<body>
<p title="Hypertext Markup Language">HTML</p>
<p>The title attribute provides additional information about an element same as alt.</p>
</body>
</html>
Used to specify the dimensions of an image, video and iframe in a webpage.
Dont confuse that these attributes are only applicable above listed elements only. For remaining elemts style attribute You can learn more about it moving forward.
The default format used for specifying the attributes in pixels(px).
<!DOCTYPE html>
<html>
<head>
<title>Width and Height attribute Example</title>
</head>
<body>
<img src="/images/Logo.ico" height="400" width="350" >
<video src="video.mp4" height="300" width="300" controls>
Your browser does not support the video tag.
</video>
<audio src="audio.mp3" height="300" width="300" controls>
Your browser does not support the audio tag.
</audio>
<iframe src="/coding/html/attributes" height="250" width="300" ></iframe>
<p>Change the width and height attribute as you want. Default in pixels(px)</p>
</body>
</html>
Used to apply inline styles to an element.
This style will be applied only for the particular tag used.
The style attribute takes a value in a set of CSS declarations, which consist of a property name and a value separated by a colon (;), and multiple declarations separated by semicolons.
Syntax: <tagname style="property:value;" > Content <tagname>
<!DOCTYPE html>
<html>
<head>
<title>Style attribute Example</title>
</head>
<body>
<p style="background-color: red; color: white;">This is a styled p element</p>
<p style="height:100px;width:50px;color:green;">This is also a styled p element</p>
</body>
</html>See we can set height and width also for many elements.
Used to apply internal or external css styles to an element with a class name.
The class can be identified in css as .name
The class attribute takes a class names, which consits a set of styles and seperated each by space.
The class name in class attribute is also used in js to change or add the styles or classnames.
Syntax: <tagname class="classname1 classname2" > Content <tagname>
<!DOCTYPE html>
<html>
<head>
<title>Class attribute Example</title>
<style>
.p1 {
background-color: red;
font-size:20px;
color: white;
}
.p2 {
font-weight:bold;
width: 50px;
}
</style>
</head>
<body>
<p class="p1">This is a styled p element using p1 class</p>
<p class="p1 p2">This is a styled p element using p1 and p2 class</p>
</body>
</html>
Used to apply internal or external css styles to an element with a id name.
This style will be applied for single element.
The id can be identified in css as #name
The id name in id attribute is also used in js to change or add the styles or classnames.
The id attribute takes a id name, which consits a set of styles, The id name is kept in the attribute and only single id name is kept without any space.
Syntax: <tagname id="idname" > Content <tagname>
<!DOCTYPE html>
<html>
<head>
<title>Id attribute Example</title>
<style>
#p1 {
background-color: red;
font-size:20px;
color: white;
}
#p2 {
font-weight:bold;
width: 50px;
}
</style>
</head>
<body>
<p id="p1">This is a styled p element using p1 id</p>
<p id="p2">This is a styled p element using p2 id</p>
</body>
</html>
Used to specify the language of the content of an element.
It tells the browser that which language the content is in.
<!DOCTYPE html>
<html>
<head>
<title>Lang attribute Example</title>
</head>
<body>
<div lang="en">
<h1>Welcome to my website!</h1>
<p>Paragraph goes here.</p>
</div>
<div lang="fr">
<h1>Bienvenue sur mon site web !</h1>
<p>Ceci est un texte en français.</p>
</div>
</body>
</html>The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now
