HTML Tags And HTML Tag Attributes

1
267
html tags

HTML Tags

HTML has many basic tags. Some of the basic tags are <html>, <head> ,<body>,<h1>to<h6> and<p>. The purpose of these HTML basic tags is to build our web pages. Remember that html tags are enclosed in brackets <>. Also most of the tags are in pairs, so if a tags starts like <body> it has an ending tag </body>. Any thing between the starting tag <body> and ending tag </body> will be considered as the part of body.

Heading Tag

Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

<h1> defines the most important heading. <h6> defines the least important heading.

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

Paragraph Tag

HTML paragraphs are defined with the <p> </p> tag.

<p>This is a first paragraph</p>

Line Break Tag

The HTML <br> element defines a line break. Use <br> if you want a line break (a new line) without starting a new paragraph.

This tag is an example of an empty element, where you do not need a closing tag.

<p>This is<br>a paragraph<br>with line breaks.</p>

Center Tag

You can use <center> tag to put any content in the center of the page or any table cell.

<center>
   <p>This text is in the center.</p>
</center>

HTML Link Tag

Defines the Link in internal or External document. HTML Link are defined inside the <a> tag.

<a href="http://www.developersfunda.com">Developers Funda</a>

HTML Images Tag

To display Images into web document. HTML Images are define inside the <img> tag.

<img src="../logo.png "  />

Example:

 

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>HTML Tag Example</title>
</head>
<body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>This is a first paragraph</p>
    <p>This is<br>a paragraph<br>with line breaks.</p>
    <center>
       <p>This text is in the center.</p>
    </center>
    <a href="http://www.developersfunda.com">Developers Funda</a>
    <img src="../logo.png "  />
</body>
</html>

HTML Tag Attributes

We have seen few HTML tags and their usage like heading tags <h1> to <h6>, paragraph tag <p> and other tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of information.

  • Attributes provide additional information about an element.
  • Attributes are always specified in the start tag.
  • Attributes come in name / vale pairs.
  • like : name=”value”
  • W3C recommends lowercase attribute values in their HTML 4 recommendation.
Attribute Options Function
align right, left, center Horizontally aligns tags
valign top, middle, bottom Vertically aligns tags within an HTML element.
bgcolor numeric, hexadecimal, RGB values Places a background color behind an element
background URL Places a background image behind an element
id User Defined Names an element for use with Cascading Style Sheets.
class User Defined Classifies an element for use with Cascading Style Sheets.
width Numeric Value Specifies the width of tables, images, or table cells.
height Numeric Value Specifies the height of tables, images, or table cells.
title User Defined “Pop-up” title of the elements.

 

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>HTML Tag Attributes  Example</title>
</head>
<body>
    <p align="left" title="Paragraph">This is left aligned</p>
    <p id="para">This is paragraph</p>
    <p class="paraleft">This is left paragraph</p>
    <img src="images/example.jpg" width="300" height="200" alt="Wallpaper">
</body>
</html>

 

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here