html-attributes

HTML Elements

  • HTML elements are the building blocks of a HTML document or web page. It is everything ranging from the start tag to end tag.

Example –

<p>This is the paragraph.</p>

  • These are based with the start tag and the end tag, having the page content in between as illustrated below:

<tag_name>content</tag_name>

  • The start tag is differentiated with the end tag only by ‘/’.

Type of HTML Elements

Image 2

Basically, there are 2 types of HTML elements and they are used on the basis of the need of the web page design.

  • Nested HTML Elements

  • Empty HTML Elements

Nested HTML Elements

  • It is a true fact that HTML elements can be nested (elements can be nested within another element).

  • Usually, all HTML files are comprised of nested HTML elements

Example –

<!DOCTYPE html>
<html> <!–Defining the entire document–>
<body> <!–HTML Element defining the document body–>
<h1>Heading 1</h1> <!–Nested under body tag defining the document heading–>
<p>This is the paragraph.</p> <!–Nested under body tag defining the document body–>
</body>
</html>

Note –

  • Here, <h1> and <p> tags are nested under <head> tags.

  • Do not forget to put the end tags, however, it may give you correct results in some browsers (if you forget putting end tags). But, this is applicable to a few HTML elements (not all). This is because for a few browsers, end tags are deemed as optional.

Empty HTML Elements

  • HTML elements are deemed as the empty HTML elements, if they have no content within it.

Example –

<br> – It defines the line break and is considered as the empty element as it do not have the closing tag.

  • It is noteworthy that empty elements can be “closed” within the opening tag itself as illustrated follows:

<br />

  • HTML5 need not to be closed, if it is a empty element. However, if you want to strict the validation or want your docuemnt to get readable by all XML parsers, then it is recommended to close all the elements used.

Note –

  • HTML tags are not case sensitive, but its better if you use lowecase tags.

  • One must use lowercase tags within HTML5, HTML4 and XHTML as well.

HTML Attributes

Image 3

Attributes used in HTMl are meant to convey detailed information about the HTML elements.

  • HTML elements can be comprised of attributes.

  • Attributes are used to denote the name or values and they are used in pair. Example – name=”value”

  • Attributes are always declared within the start tags.

Lang Attribute

  • The lang attribute is always declared with the <html> tag.

  • This attribute is very important and must be used for the accessiblity of the applications (for readers) and also for the search engines:

Example –

<!DOCTYPE html>
<html lang=”en-US”>
<body>
<h1>Heading 1</h1>
<p>This is the paragraph of the web page.</p>
</body>
</html>

Here, in this example, the letters used are denoting the language. In case, it is a dialect, always prefer using two additional letters i.e., US.

Title Attribute

Title is defined to the reflect the title of the page, text or link. You will understand this better by seeing the example shown below:

Example –

<a href=”http://www.technologydiving.com” title=”Explore the technology”>Technology Diving</a>

Here, if you will hover the mouse over the text – Technolody Diving, you can see the title as Explore the technology. See the image below, how it works

Screenshot from 2015-02-25 16:05:38

Href Attribute

It is a noteworthy fact that HTML links are always defined with <a> tag. The address of the link is always defined with the href attribute:

Example –

<a href=”http://www.technologydiving.com”>Here is the link</a>

Size Attribute

Images within the HTML code is always defined with <img> tag.

The various attributes that are used with this tags includes source (src), size (height and width).

Example:

<img src=technologydiving.jpeg” height=”150” width=”100”>

Note: Here the values of height and width are measured in pixels.

Alt Attribute

The alternative text is always specified with alt tag.

  • This is used commonly whenever HTML element cannot be displayed.

  • The value assigned within the alt tag can be read by screen readers / users.

  • In case, if someone is listening the page of the web can hear the element as well.

Example-

<img src=”technologydiving.jpeg” alt=technologydiving.com” height=”150” width=”100”>

A few important recommendations

  1. Always use lowercase attributes

HTML5 is not bounded with using the lowercase attributes i.e., you may use lowercase as well as uppercase attributes such as SRC / src. Unlike HTML5, HTML4 and XHTML is restricted with using lowercase attributes only.

Along with this, lower case attributes are easy to use.

  1. Always use quote to assign attribute values

This case is also similar as that ofusing the lowercase attributes i.e., HTML5 do not demands for using quotes as a compulsion for assigning attributes value. But, HTML4 and XHTML always demands using the quotes.

  1. You may use single as well as double quotes

Double quotes are widely used with the attribute values, but single quotes can also be used sometimes. Let us say, if the attribute value is containing double quotes itself, then it will be defined within single quotes. This has been illustrated as below:

Example –

<p title=’It is a “beautiful” day’>

or

<p title=”It is a ‘beautiful’ day”>

Share on Tumblr
email

Tags: