Welcome to HTML 4th tutorial we will learn here about HTML attributes.
Actually HTML attributes provide flexibility in formatting for example if you want to change the color of heading or you want make some text bold or even you want to create a link all you need to do is just using HTML attributes. So we can style our HTML page and make it more attractive using HTML attributes. So its something close to formatting like text size and alignment etc. Attributes are mostly used for small projects or pages which require inline CSS we will learn later about CSS and InLine CSS. Because in big projects we use separate CSS file to configure style related properties. Don’t be confuse its all about text styles and formatting. While using attribute we can style our web page staying in same document no need to create separate CSS file, But its only suitable for small web pages.
Lets start learning about basic HTML attributes and syntax.
HTML Class & ID Attribute
Class and id attribute are almost same and used to provide a hook to a specific type for CSS style sheets. Actually we can assign a specific id to a tag and we can refer it from our CSS file. We will learn in details About Class and ID in our CSS tutorial for now its enough to understand that class and id just provide hooks to refer to a specific HTML tag.
Here in this example you can see you assigned a id “heading1” to H3 tag which we can target later form CSS file. I hope now you can understand about Class and ID attribute.
HTML title Attribute
HTML title attribute show a pop up to text like a tool tip. When mouse move over the text where we used title tag a popup appears and show the tool tip. Actually we put some briefing text in title attribute for more information’s about a text or paragraph.
This tag is rarely used. Fox example if you move mouse to any tool located in tool bar while using Microsoft Word you will see a tip appeared near the mouse pointer this is the Title attribute in HTML. I hope you understand now.
<p title=”This is tool tip”>Hello World<p>
In this example added tool tip in a paragraph inside a P tag. P tag is used for paragraph.
HTML href Attribute
HTML href attribute provide functionality to link pages or place any external link using an <a> tag. This attribute is used widely and useful when you want to point a link with anchor text.
<a href=”http://www.codeclick.net”>Click HERE</a>
In this example Click HERE is anchor text and in tag opening href is attribute with linked URL.
HTML Text Align Attribute
Html align attribute is used to align text to a different position like align left, align right, align center etc. Acutely you can also align images and other objects too using align attribute.
<p align=”center”>This text is center aligned</p>
We used align attribute in H2 tag and Text to align center we can use this attribute in many tags like P tag and H1 tag etc.
HTML alt Attribute
HTML alt attribute is very important for SEO (Search Engine Optimization) as the search engines are robots they can not see visual effects of an image and can’t understand what about image is. So we provide alt text with an image to let search engines understand which type of image is it. And some time when images do not load in web browsers the alt text appears and let the user know about image.
<img src="CodeClickLogo.jpg" alt="website logo" width="60" height="60">
In this example we used to attributes SRC is basically source for image path and ALT attribute is we are talking about right now.