HTML Attribute
- HTML
attributes are special words which provide additional information about
the elements or attributes are the modifier of the HTML element.
- Each
element or tag can have attributes, which defines the behaviour of that
element.
- Attributes
should always be applied with start tag.
- The
Attribute should always be applied with its name and value pair.
- The
Attributes name and values are case sensitive, and it is recommended by
W3C that it should be written in Lowercase only.
- You
can add multiple attributes in one HTML element, but need to give space
between two attributes.
Syntax
1.
<element attribute_name="value">content</element>
Example
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
</head>
5.
<body>
6.
<h1> This is Style attribute</h1>
7.
<p style="height: 50px; color: blue">It will add style property in element</p>
8. <p style="color: red">It will change the color of content</p>
9.
</body>
10. </html>
Output:
Explanation of above
example:
1.
<p style="height: 50px; color: blue">It will add style property in element</p>
In the above statement, we have used paragraph tags in which we
have applied style attribute. This attribute is used for applying CSS property
on any HTML element. It provides height to paragraph element of 50px and turns
it colour to blue.
1.
<p style="color: red">It will change the color of content</p>
In the above statement we have again used style attribute in
paragraph tag, which turns its colour red.
Note: There are some
commonly used attributes are given below, and the complete list and explanation
of all attributes are given in HTML attributes List.
The title attribute
in HTML
Description: The title attribute is used as text
tooltip in most of the browsers. It display its text when user move the cursor
over a link or any text. You can use it with any text or link to show the
description about that link or text. In our example, we are taking this with
paragraph tag and heading tag.
Example
With <h1> tag:
1.
<h1 title="This is heading tag">Example of title attribute</h1>
With <p> tag:
1.
<p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
Code:
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
</head>
5.
<body>
6.
7. <h1 title="This is heading tag">Example of title attribute</h1>
8.
<p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
9.
10. </body>
11. </html>
Output:
The href attribute
in HTML
Description: The href attribute is the main attribute
of <a> anchor tag. This attribute gives the link address which is
specified in that link. The href attribute provides the hyperlink, and
if it is blank, then it will remain in same page.
Example
With link address:
1.
<a href="https://www.docxlsppt.blogspot.com">This is a link</a>
Without link address:
1.
<a href="">This is a link</a>
The src Attribute
The src attribute is one
of the important and required attribute of <img> element. It is source for the image
which is required to display on browser. This attribute can contain image in
same directory or another directory. The image name or source should be correct
else browser will not display the image.
Example
1.
<img src="whitepeacock.jpg" height="400" width="600">
Note: The above
example also have height and width attribute, which define the height and width
of image on web page.
Output:
Quotes: single
quotes or double quotes?
In this chapter you have seen that, we have used attribute with
double quotes, but some people might use single quotes in HTML. So use of
single quotes with HTML attribute, is also allowed. The following both
statements are absolutely fine.
1.
<a href="https:// www.docxlsppt.blogspot.com">A link to HTML.</a>
2.
<a href='https:// www.docxlsppt.blogspot.com’>A link to HTML.</a>
IN HTML5, you can also omit use of quotes around attribute
values.
1.
<a href=https://www.docxlsppt.blogspot.com>A link to HTML.</a>
HTML Elements
An HTML file is made of elements. These elements are responsible
for creating web pages and define content in that webpage. An element in HTML
usually consist of a start tag <tag name>, close tag </tag name>
and content inserted between them. Technically, an element is a collection of
start tag, attributes, end tag, content between them.
Note: Some elements
does not have end tag and content, these elements are termed as empty elements
or self-closing element or void elements.
Such as:
1.
<p> Hello world!!! </p>
Example
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<title>WebPage</title>
5.
</head>
6.
<body>
7.
<h1>This is my first web page</h1>
8.
<h2> How it looks?</h2>
9.
<p>It looks Nice!!!!!</p>
10. </body>
11. </html>
- All
the content written between body elements are visible on web page.
Void element: All the elements in HTML do not require
to have start tag and end tag, some elements does not have content and end tag
such elements are known as Void elements or empty elements. These elements are
also called as unpaired tag.
Some Void elements are
<br> (represents a line break) , <hr>(represents a horizontal
line), etc.
Nested HTML Elements: HTML can be nested, which means an
element can contain another element.
Block-level and
Inline HTML elements
For the default display and styling purpose in HTML, all the
elements are divided into two categories:
- Block-level
element
- Inline
element
Block-level element:
- These
are the elements, which structure main part of web page, by dividing a
page into coherent blocks.
- A
block-level element always start with new line and takes the full width of
web page, from left to right.
- These
elements can contain block-level as well as inline elements.
Following are the block-level elements in HTML.
<address>, <article>, <aside>,
<blockquote>, <canvas>, <dd>, <div>, <dl>,
<dt>, <fieldset>, <figcaption>, <figure>,
<footer>, <form>, <h1>-<h6>, <header>,
<hr>, <li>, <main>, <nav>, <noscript>,
<ol>, <output>, <p>, <pre>, <section>,
<table>, <tfoot>, <ul> and <video>.
Note: All these
elements are described in later chapters.
Example:
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
</head>
5.
<body>
6.
<div style="background-color: lightblue">This is first div</div>
7.
<div style="background-color: lightgreen">This is second div</div>
8.
<p style="background-color: pink">This is a block level element</p>
9.
</body>
10. </html>
Output:
In the above example we have used
tag, which defines a section in a web page, and takes full width
of page.
We have used style attribute which is used to styling the HTML
content, and the background color are showing that it's a block level element.
Inline elements:
- Inline
elements are those elements, which differentiate the part of a given text
and provide it a particular function.
- These
elements does not start with new line and take width as per requirement.
- The
Inline elements are mostly used with other elements.
<a>, <abbr>, <acronym>, <b>,
<bdo>, <big>, <br>, <button>, <cite>,
<code>, <dfn>, <em>, <i>, <img>, <input>,
<kbd>, <label>, <map>, <object>, <q>,
<samp>, <script>, <select>, <small>, <span>,
<strong>, <sub>, <sup>, <textarea>, <time>, <tt>,
<var>.
Example:
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
</head>
5.
<body>
6.
<a href="https://www.docxlsppt.blogspot.com">Click on link</a>
7.
<span style="background-color: lightblue">this is inline element</span>
8.
<p>This will take width of text only</p>
9.
</body>
10. </html>
Output:
Following is the list of the some main elements used in HTML:
|
Start tag |
Content |
End tag |
Description |
|
<h1>
...... <h6> |
These
are headings of HTML |
</h1>??..</h6> |
These
elements are used to provide the headings of page. |
|
<p> |
This
is the paragraph |
</p> |
This
element is used to display a content in form of paragraph. |
|
<div> |
This
is div section |
</div> |
This
element is used to provide a section in web page. |
|
<br> |
This
element is used to provide a line break. ( void element) |
||
|
<hr> |
This
element is used to provide a horizontal line. (void element |
HTML Formatting
HTML Formatting is
a process of formatting text for better look and feel. HTML provides us ability
to format text without using CSS. There are many formatting tags in HTML. These
tags are used to make text bold, italicized, or underlined. There are almost 14
options available that how text appears in HTML and XHTML.
In HTML the formatting tags
are divided into two categories:
- Physical tag: These tags are used to
provide the visual appearance to the text.
- Logical tag: These tags are used to
add some logical or semantic value to the text.
NOTE:
There are some physical and logical tags which may give same visual appearance,
but they will be different in semantics.
Here, we are going to learn
14 HTML formatting tags. Following is the list of HTML formatting text.
|
Element name |
Description |
|
<b> |
This is a physical tag,
which is used to bold the text written between it. |
|
<strong> |
This is a logical tag,
which tells the browser that the text is important. |
|
<i> |
This is a physical tag
which is used to make text italic. |
|
<em> |
This is a logical tag
which is used to display content in italic. |
|
<mark> |
This tag is used to
highlight text. |
|
<u> |
This tag is used to
underline text written between it. |
|
<tt> |
This tag is used to
appear a text in teletype. (not supported in HTML5) |
|
<strike> |
This tag is used to
draw a strikethrough on a section of text. (Not supported in HTML5) |
|
<sup> |
It displays the content
slightly above the normal line. |
|
<sub> |
It displays the content
slightly below the normal line. |
|
<del> |
This tag is used to
display the deleted content. |
|
<ins> |
This tag displays the
content which is added |
|
<big> |
This tag is used to
increase the font size by one conventional unit. |
|
<small> |
This tag is used to
decrease the font size by one unit from base font size. |
1) Bold Text
HTML<b> and
<strong> formatting elements
The HTML <b> element
is a physical tag which display text in bold font, without any logical
importance. If you write anything within <b>............</b>
element, is shown in bold letters.
See this example:
1.
<p> <b>Write Your First Paragraph in bold text.</b></p>
Output:
Write
Your First Paragraph in bold text.
The HTML <strong> tag
is a logical tag, which displays the content in bold font and informs the
browser about its logical importance. If you write anything between
<strong>???????. </strong>, is shown important text.
See this example:
1.
<p><strong>This is an important content</strong>, and this is normal content</p>
Output:
This
is an important content, and this is normal content
Example
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<title>formatting elements</title>
5.
</head>
6.
<body>
7.
<h1>Explanation of formatting element</h1>
8.
<p><strong>This is an important content</strong>, and this is normal content</p>
9.
</body>
10. </html>
2) Italic Text
HTML <i> and
<em> formatting elements
The HTML <i> element
is physical element, which display the enclosed content in italic font, without
any added importance. If you write anything within
<i>............</i> element, is shown in italic letters.
See this example:
1.
<p> <i>Write Your First Paragraph in italic text.</i></p>
Output:
Write Your First
Paragraph in italic text.
The HTML <em> tag is a
logical element, which will display the enclosed content in italic font, with
added semantics importance.
See this example:
1.
<p><em>This is an important content</em>, which displayed in italic font.</p>
Output:
This is an important
content, which displayed in italic font.
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<title>formatting elements</title>
5.
</head>
6.
<body>
7.
<h1>Explanation of italic formatting element</h1>
8.
<p><em>This is an important content</em>, which displayed in italic font.</p>
9.
</body>
10. </html>
3) HTML Marked formatting
If you want to mark or
highlight a text, you should write the content within
<mark>.........</mark>.
See this example:
1.
<h2> I want to put a <mark> Mark</mark> on your face</h2>
Output:
I want to put
a Mark on your face
4) Underlined Text
If you write anything within
<u>.........</u> element, is shown in underlined text.
See this example:
1.
<p> <u>Write Your First Paragraph in underlined text.</u></p>
Output:
Write Your First
Paragraph in underlined text.
5) Strike Text
Anything written within
<strike>.......................</strike> element is displayed with
strikethrough. It is a thin line which cross the statement.
See this example:
1.
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
Output:
Write Your First
Paragraph with strikethrough.
6) Monospaced Font
If you want that each letter
has the same width then you should write the content within
<tt>.............</tt> element.
Note: We know that most of
the fonts are known as variable-width fonts because different letters have
different width. (for example: 'w' is wider than 'i'). Monospaced Font provides
similar space among every letter.
See this example:
1.
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
Output:
Hello Write Your First Paragraph in monospaced
font.
7) Superscript Text
If you put the content
within <sup>..............</sup> element, is shown in superscript;
means it is displayed half a character's height above the other characters.
See this example:
1.
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
Output:
Hello Write Your
First Paragraph in superscript.
8) Subscript Text
If you put the content
within <sub>..............</sub> element, is shown in subscript ;
means it is displayed half a character's height below the other characters.
See this example:
1.
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
Output:
Hello Write Your
First Paragraph in subscript.
9) Deleted Text
Anything that puts within
<del>..........</del> is displayed as deleted text.
See this example:
1.
<p>Hello <del>Delete your first paragraph.</del></p>
Output:
Hello
10) Inserted Text
Anything that puts within
<ins>..........</ins> is displayed as inserted text.
See this example:
1.
<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
Output:
Delete
your first paragraph.Write another
paragraph.
11) Larger Text
If you want to put your font
size larger than the rest of the text then put the content within
<big>.........</big>. It increase one font size larger than the
previous one.
See this example:
1.
<p>Hello <big>Write the paragraph in larger font.</big></p>
Output:
Hello Write
the paragraph in larger font.
12) Smaller Text
If you want to put your font
size smaller than the rest of the text then put the content within
<small>.........</small>tag. It reduces one font size than the
previous one.
See this example:
1.
<p>Hello <small>Write the paragraph in smaller font.</small></p>
Output:
Hello Write the paragraph
in smaller font.
HTML Lists
HTML Lists are used to specify lists of information. All lists
may contain one or more list elements. There are three different types of HTML
lists:
1.
Ordered List or Numbered
List (ol)
2.
Unordered List or
Bulleted List (ul)
3.
Description List or
Definition List (dl)
Note: We can create a
list inside another list, which will be termed as nested List.
HTML Ordered List or
Numbered List
In the ordered HTML lists, all the list items are marked with
numbers by default. It is known as numbered list also. The ordered list starts
with <ol> tag and the list items start with <li> tag.
1.
<ol>
2.
<li>Aries</li>
3.
<li>Bingo</li>
4.
<li>Leo</li>
5.
<li>Oracle</li>
6.
</ol>
Output:
1.
Aries
2.
Bingo
3.
Leo
4. Oracle
HTML Unordered List
or Bulleted List
In HTML Unordered list, all the list items are marked with
bullets. It is also known as bulleted list also. The Unordered list starts with
<ul> tag and list items start with the <li> tag.
1.
<ul>
2.
<li>Aries</li>
3.
<li>Bingo</li>
4.
<li>Leo</li>
5.
<li>Oracle</li>
6.
</ul>
Output:
- Aries
- Bingo
- Leo
- Oracle
HTML Description
List or Definition List
HTML Description list is also a list style which is supported by
HTML and XHTML. It is also known as definition list where entries are listed
like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present
glossary, list of terms or other name-value list.
The HTML definition list contains following three tags:
1.
<dl>
tag defines the start
of the list.
2.
<dt>
tag defines a term.
3.
<dd>
tag defines the term
definition (description).
1.
<dl>
2.
<dt>Aries</dt>
3.
<dd>-One of the 12 horoscope sign.</dd>
4.
<dt>Bingo</dt>
5.
<dd>-One of my evening snacks</dd>
6.
<dt>Leo</dt>
7.
<dd>-It is also an one of the 12 horoscope sign.</dd>
8.
<dt>Oracle</dt>
9.
<dd>-It is a multinational technology corporation.</dd>
10. </dl>
Output:
Aries
-One of the 12
horoscope sign.
Bingo
-One of my evening
snacks
Leo
-It is also an one of
the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
HTML Nested List
A list within another list is termed as nested list. If you want
a bullet list inside a numbered list then such type of list will called as
nested list.
Code:
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<title>Nested list</title>
5.
</head>
6.
<body>
7.
<p>List of Indian States with thier capital</p>
8.
<ol>
9.
<li>Delhi
10. <ul>
11. <li>NewDelhi</li>
12. </ul>
13. </li>
14. <li>Haryana
15. <ul>
16. <li>Chandigarh</li>
17. </ul>
18. </li>
19. <li>Gujarat
20. <ul>
21. <li>Gandhinagar</li>
22. </ul>
23. </li>
24. <li>Rajasthan
25. <ul>
26. <li>Jaipur</li>
27. </ul>
28. </li>
29. <li>Maharashtra
30. <ul>
31. <li>Mumbai</li>
32. </ul>
33. </li>
34. <li>Uttarpradesh
35. <ul>
36. <li>Lucknow</li></ul>
37. </li>
38. </ol>
39. </body>
40. </html>
Output:
Supporting Browsers
|
Element |
|
|
|
|
|
|
<ol><ul><dl> |
Yes |
Yes |
Yes |
Yes |
Yes |
HTML Ordered List | HTML Numbered
List
HTML Ordered List or Numbered List displays elements in numbered format.
The HTML ol tag is used for ordered list. We can use ordered list to represent
items either in numerical order format or alphabetical order format, or any
format where an order is emphasized. There can be different types of numbered
list:
- Numeric Number (1, 2, 3)
- Capital Roman Number (I II III)
- Small Romal Number (i ii iii)
- Capital Alphabet (A B C)
- Small Alphabet (a b c)
To represent different ordered
lists, there are 5 types of attributes in <ol> tag.
|
Type |
Description |
|
Type "1" |
This is the default
type. In this type, the list items are numbered with numbers. |
|
Type "I" |
In this type, the
list items are numbered with upper case roman numbers. |
|
Type "i" |
In this type, the
list items are numbered with lower case roman numbers. |
|
Type "A" |
In this type, the
list items are numbered with upper case letters. |
|
Type "a" |
In this type, the
list items are numbered with lower case letters. |
HTML Ordered List Example
Let's see the example of HTML
ordered list that displays 4 topics in numbered list. Here we are not defining
type="1" because it is the default type.
1. <ol>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6.
</ol>
Output:
- HTML
- Java
- JavaScript
- SQL
ol type="I"
Let's see the example to display
list in roman number uppercase.
1. <ol type="I">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6.
</ol>
Output:
- HTML
- Java
- JavaScript
- SQL
ol type="i"
Let's see the example to display
list in roman number lowercase.
1. <ol type="i">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6.
</ol>
Output:
- HTML
- Java
- JavaScript
- SQL
ol type="A"
Let's see the example to display
list in alphabet uppercase.
1. <ol type="A">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6.
</ol>
Output:
- HTML
- Java
- JavaScript
- SQL
ol type="a"
Let's see the example to display
list in alphabet lowercase.
1. <ol type="a">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6.
</ol>
Output:
- HTML
- Java
- JavaScript
- SQL
start attribute
The start attribute is used with ol
tag to specify from where to start the list items.
<ol type="1"
start="5"> : It
will show numeric values starting with "5".
<ol type="A"
start="5"> : It
will show capital alphabets starting with "E".
<ol type="a"
start="5"> : It
will show lower case alphabets starting with "e".
<ol type="I"
start="5"> : It
will show Roman upper case value starting with "V".
<ol type="i"
start="5"> : It
will show Roman lower case value starting with "v".
1. <ol type="i" start="5">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6.
</ol>
Output:
- HTML
- Java
- JavaScript
- SQL
reversed Attribute:
This is a Boolean attribute of HTML
<ol> tag, and it is new in HTML5 version. If you use the reversed
attribute with
tag then it will numbered the
list in descending order (7, 6, 5, 4......1).
Example:
1.
<ol reversed>
2.
<li>HTML</li>
3.
<li>Java</li>
4.
<li>JavaScript</li>
5.
<li>SQL</li>
6.
</ol>
Output:
Supporting Browsers
|
Element |
|
|
|
|
|
|
<ol> |
Yes |
Yes |
Yes |
Yes |
Yes |
HTML Unordered List | HTML Bulleted List
HTML Unordered List or Bulleted List displays elements in
bulleted format . We can use unordered list where we do not need to display
items in any particular order. The HTML ul tag is used for the unordered list.
There can be 4 types of bulleted list:
- disc
- circle
- square
- none
To represent different ordered lists, there are 4 types of
attributes in <ul> tag.
|
Type |
Description |
|
Type
"disc" |
This is the default
style. In this style, the list items are marked with bullets. |
|
Type
"circle" |
In this style, the
list items are marked with circles. |
|
Type
"square" |
In this style, the
list items are marked with squares. |
|
Type
"none" |
In this style, the
list items are not marked . |
HTML Unordered List
Example
1.
<ul>
2.
<li>HTML</li>
3.
<li>Java</li>
4.
<li>JavaScript</li>
5.
<li>SQL</li>
6.
</ul>
Output:
- HTML
- Java
- JavaScript
- SQL
ul
type="circle"
1.
<ul type="circle">
2.
<li>HTML</li>
3.
<li>Java</li>
4.
<li>JavaScript</li>
5.
<li>SQL</li>
6.
</ul>
Output:
- HTML
- Java
- JavaScript
- SQL
ul type="square"
1.
<ul type="square">
2.
<li>HTML</li>
3.
<li>Java</li>
4.
<li>JavaScript</li>
5.
<li>SQL</li>
6.
</ul>
Output:
- HTML
- Java
- JavaScript
- SQL
ul
type="none"
1.
<ul type="none">
2.
<li>HTML</li>
3.
<li>Java</li>
4.
<li>JavaScript</li>
5.
<li>SQL</li>
6.
</ul>
Output:
- HTML
- Java
- JavaScript
- SQL
Note: The type
attribute is not supported in HTML5, instead of type you can use CSS property
of list-style-type. Following is the example to show the CSS property for ul
tag.
1.
<ul style="list-style-type: square;">
2.
<li>HTML</li>
3.
<li>Java</li>
4.
<li>JavaScript</li>
5.
<li>SQL</li>
6.
</ul>
Code:
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
</head>
5.
<body>
6.
<h2>The type attribute with CSS property</h2>
7.
<ul style="list-style-type: square;">
8.
<li>HTML</li>
9.
<li>Java</li>
10. <li>JavaScript</li>
11. <li>SQL</li>
12. </ul>
13. </body>
14. </html>
Output:
Supporting Browsers
|
Element |
|
|
|
|
|
|
<ul> |
Yes |
Yes |
Yes |
Yes |
Yes |
HTML Description List | HTML Definition List
HTML Description List or Definition List displays elements in
definition form like in dictionary. The <dl>, <dt> and <dd>
tags are used to define description list.
The 3 HTML description list tags are given below:
1.
<dl>
tag defines the
description list.
2.
<dt>
tag defines data term.
3.
<dd>
tag defines data
definition (description).
1.
<dl>
2.
<dt>HTML</dt>
3.
<dd>is a markup language</dd>
4.
<dt>Java</dt>
5.
<dd>is a programming language and platform</dd>
6.
<dt>JavaScript</dt>
7.
<dd>is a scripting language</dd>
8.
<dt>SQL</dt>
9.
<dd>is a query language</dd>
10. </dl>
Output:
HTML
is a markup language
Java
is a programming
language and platform
JavaScript
is a scripting
language
SQL
is a query language
Supporting Browsers
|
Element |
|
 IE |
 Firefox |
 Opera |
 Safari |
|
<dl> |
Yes |
Yes |
Yes |
Yes |
Yes |
.gif)
.gif)
.gif)
.gif)