HTML Attributes

By | July 29, 2018

What is HTML Attribute?
Attributes provide additional information about an element. Attributes are always specified in the start tag. Attributes usually come in name/value pairs like: name=”value”. All HTML elements can have attributes. Consider following example-
<a href=”https://www.yourwebsite.com”>My Web Link</a>
Here website link is defined inside <a> tag. Inside <a> tag we have an attribute called href and web link is defined as the value of href. So if href is key then weblink is it’s value.

HTML has several attributes. We will discuss about some of them-
In example section we already shown href attribute. So we will not discuss about it again.

  • src Attribute
  • we define HTML images by using <img> element. And inside the opening tag of <img> element we use src attribute to locate the source of the image including image name.
    <img src=”imageName.jpg”>
    <img src=”imageLocation/imageName.jpg”>
    If image is in same location of html page then no need to mention the location. Just mention the image name, in first example we shown that. Otherwise need to mention the location of image, in second example we shown that.

  • width and height Attributes
  • We often need to set the size of some elements. In that case we generally use width and height attributes. Consider following example where we will define the size of an image by using width and height attributes-
    <img src=”imageName.jpg” width=”500″ height=”600″>
    Here we defined the size of the image by mentioning the width and height of the image.

  • alt Attribute
  • The alt attribute use with element. It generally use to specify the alternative text of an image. It’s generally use when an image can’t be displayed for some reason like image doesn’t exists or image doesn’t support by the browser or any other, then instead of image the text is shown to the user. Consider following example
    <img src=” imageName.jpg ” alt=”ImageName”>
    According to above example when the image will not be able to shown in browser due to some reason then the name of the image will shown in the browser so that the end user can understand which image supposed to shown in the browser.

  • style Attribute
  • uses to specify the styling of an element. Inside style attribute we specify color, font, size etc. Consider following example-
    <p style=”color:blue”> I am a paragraph </p>
    Inside above example we specify the color of a paragraph.

  • lang Attribute
  • By using lang attribute we can declare the language of an html document. The lang attribute is uses inside <html> tag and it is very important for search engines. Example is given below-
    <html lang=”en-US”>

  • title Attribute
  • The title attribute is uses to provide an extra information about an element. Most often it is shown as a tooltip when mouse moves over the element. Example-
    <p title= “This is the example of title” >Parargahp</p>

    Some recommendation about Attribute-

  • Define attribute name in lowercase e.g. instead of TITLE use title
  • Use double code to specify the value of an attribute e.g. instead of using <a href=https://myweb.com> we will use <a href=”https://www.myweb.com”>
35 Total Views 1 Views Today
Md. Mojammel Haque

CSM, CSPO, CSD, CSP-SM, CSP-PO (ScrumAlliance.org)
Certification Profile Link-
https://www.scrumalliance.org/community/profile/mhaque13

Currently working as Lead Team (Application Architecture) at Raven Systems Ltd. Passion for software development especially agile practices such as TDD with in depth knowledge of Object Oriented Programming, SOLID Principles, Gang of Four Design Patterns, Some Enterprise Application Architectural Patterns. Over 8 years of software development experience ASP.NET. Has the ability to understand and transform complex business requirements into software ensuring applications are delivered on time. Also experience in non Microsoft .NET technologies such as Dapper.Net, Git, Structure Map & Angular, Bootstrap, HTML-5, CSS-3 etc.

Category: 1. Full Stack Web Development 1.01-HTML Uncategorized
Md. Mojammel Haque

About Md. Mojammel Haque

CSM, CSPO, CSD, CSP-SM, CSP-PO (ScrumAlliance.org) Certification Profile Link- https://www.scrumalliance.org/community/profile/mhaque13 Currently working as Lead Team (Application Architecture) at Raven Systems Ltd. Passion for software development especially agile practices such as TDD with in depth knowledge of Object Oriented Programming, SOLID Principles, Gang of Four Design Patterns, Some Enterprise Application Architectural Patterns. Over 8 years of software development experience ASP.NET. Has the ability to understand and transform complex business requirements into software ensuring applications are delivered on time. Also experience in non Microsoft .NET technologies such as Dapper.Net, Git, Structure Map & Angular, Bootstrap, HTML-5, CSS-3 etc.

Leave a Reply

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