HTML Attributes
HTML attributes are used to add more information to an HTML Element.
Important Things to Remember
1.HTML attributes are found in an HTML tags.
2.HTML attributes only appear at start tags.it will never be on end tags.
3.HTML elements can have multiple attributes.
4.HTML attributes are composed of name/value pairs.
5.There are some attributes that can be used on all HTML Elements though they may not have effects on some elements.They are called Global Attributes Click for an example.
An HTML attributes is composed of:
1.an attribute name
2.an equal = sign
3.a value surrounded by quotation marks "value"
You can also use single quotation marks depending on the situation esp.when the value contains double quotes.
We will only use double quotation marks throughout the entire tutorial
In this lesson we are going to learn some HTML Attributes with example.
Attribute lang Example:
<!doctype html><html lang="en-US"><!--html document/file content goes here--></html>
We use the lang attribute to define the language of an HTML file.
The language defined above is American English.
Attribute href Example:
<html><head><title>Example of href Attributes</title></head><body><a href="http://www.codingsodin.blogspot.com">Go to http://www.codingsodin.blogspot.com</a></body></html>
Output:
Links are defined using the anchor <a> element.
On the example above we used the href attribute to tell the browser where to go.
When clicked the user will be redirected to http://www.codingsodin.blogspot.com
Attribute title Example:
<html><head><title> Attribute title Example </title></head><body><a href = "#link" title="I serve as a tooltip">Link</a></body></html>
Output:
The title attribute provides a tooltip for HTML Elements.
Unfortunately,it doesn't work on mobile devices.
If you want to see how it works copy above code and paste on your editor and save file index.html and open it on browser using pc,laptop etc.
Attribute style Example:
<html><head><title> Attribute style Example </title></head><body><p style="font-size: 40px; color: gold">I am a paragraph with a size of 40pixel and my color is gold.</p></body></html>
Output:
I am a paragraph with a size of 40pixel and my color is gold.
On the example given we have created a paragraph using the <p> element.
We also used the style attribute to change its font-size and color.
Attribute id and class Example:
<div class="name"><!-- some content goes here --></div><div class="name"><!-- some content goes here --></div><div id="name"><!--some content goes here--></div>
The id and class attribute give references to elements inside an HTML document.
Multiple elements can have the same class values/names.
The id's value should be unique for each element.
These help us select elements in style sheets and scripts.
Post a Comment