HTML Attributes

  • Every HTML element can have attributes.
  • The HTML Attribute provide additional information about an element.
  • The Attributes are always Used in the start tag.
  • The Attributes use name/value pairs like:
    name=”value”

The HTML Style Attribute

You set additional style property by Using Style attribute.

  • The style attribute give styling in HTML elements.
  • The background-color attribute is use for background color.
Example of HTML style Attribute
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 style="background-color: green;">This is a Heading</h2>
<h3 style="background-color: red;">This is a Heading</h3>
<p style="background-color: yellowgreen;">This is a paragraph.</p>

</body>
</html>

Output

Page Title

This is a Heading

This is a Heading

This is a paragraph.

Color Attribute

  • The color attribute is used for text colors.
Example of HTML color attribute
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 style="color: red;">This is a Heading</h2>
<h3 style="color: blue;">This is a Heading</h3>
<p style="color: green;">This is a paragraph.</p>

</body>
</html>

Output

Page Title

This is a Heading

This is a Heading

This is a paragraph.

Font-Family

  • The font-family attribute is used for text fonts.
Example of HTML Font-Family Attribute
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 style="font-family: algerian;">This is a Heading</h2>
<h3 style="font-family: verdana;">This is a Heading</h3>
<p style="font-family: sans-serif;">This is a paragraph.</p>

</body>
</html>

Output

Page Title

This is a Heading

This is a Heading

This is a paragraph.

Font-Size

  • The font-size attribute is used for text sizes.
Example of HTML Font-Size Attribute
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 style="font-size: 25px;">This is a Heading</h2>
<h3 style="font-size: 20px;">This is a Heading</h3>
<p style="font-size: 15px;">This is a paragraph.</p>

</body>
</html>

Output

Page Title

This is a Heading

This is a Heading

This is a paragraph.

Text-Align

  • The text-align attribute is used for text alignment.
Example of HTML Text-Align Attribute
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 style="text-align: left;">This is a Heading.</h2>
<h3 style="text-align: center;">This is a Heading.</h3>
<h4 style="text-align: right;">This is a Heading.</h4>


</body>
</html>

Output

 

This is a Heading.

This is a Heading.

This is a Heading.

 
What is HTML
  • HTML is the standard  for Hypertext Markup Language for Web pages.
  • The HTML elements tell the browser ...
    Click Here
Previous topic next topic What is an Element in HTML
  • An Hypertext Markup Language(HTML) element ...
    Click Here
Previous topic next topic HTML Headings
  • The HTML headings are used to define the heading ...
    Click Here
Previous topic next topic HTML Formatting Elements
  • The <b>  element is use for bold text, without ...
    Click Here
Previous topic next topic HTML Comments
  • The HTML Comment are describe the extra feature about ...
    Click Here
Previous topic next topic HTML Attributes
  • Every HTML element can have attributes.
  • The HTML Attribute ...
    Click Here
Previous topic next topic HTML Images
  • The <img> tag is empty
Note: The empty ...
Click Here
Previous topic next topic HTML Links
  • HTML links are hyperlinks.
  • HTML link default color is ...
    Click Here
Previous topic next topic HTML Table
  • An HTML table is defined with the <table> tag.
  • ...
    Click Here
Previous topic next topic Table Backgrounds You can set the table background using one of the ...
Click Here
Previous topic next topic Table Header, tbody and Footer
  • Tables are categories into three parts: ...
    Click Here
Previous topic next topic Basic to Advance table design in HTML Example 1 <!DOCTYPE> <html> <body> ...
Click Here
Previous topic next topic HTML div tag
  • The <div>  element is used for style blocks ...
    Click Here
Previous topic next topic HTML Lists
  • The list is the way to present the data ...
    Click Here
Previous topic next topic HTML Form
  • The HTML <form> element is used to collect user ...
    Click Here
Previous topic next topic HTML Iframe Tag
  • <iframe> an inline frame with an HTML tag ...
    Click Here
English Hindi