menu

HTML Tag Definition

  • Tags are surrounded in angle brackets.

  • Usually have a start & end tag.

  • Some tags close themselves

Start & End Tags

<h1>Hello</h1>

<p>Welcome to my website</p>

Self Closing Tags

<br > Valid in HTML5

<br /> Valid in HTML5 & XHTML

Basic HTML layout

<!DOCTYPE html>
<html>
    <head>
        <title>My Website</title>
    </head>
    <body>
        <!--this is comment-->
        <h1>This is heading</h1>
        <p>Welcome to my website</p>
    </body>
</html>

<!DOCTYPE html>: It tells the browser what type of document it is, because browser can read HTML5, XHTML, HTML4. In our code we are using HTML5 doctype.

<html>: it is the parent tag of our HTML document. It contains two main tags <head> and <body> tag.

<head> It contains metadata information of our HTML page, the content of tag is not appears or display in our web page.

<title>: This tag is placed inside the head tag. The content of the <title> tag is display as tab name of the browser.

<body>: The content of the <body> tag is display as a content on the web browser.

<!--this is comment-->:This is the html comment tag. Comment tag is not display in the web browser.

HTML basic tags

  • Heading

  • Paragraph

  • Strong

  • Br

  • Hr

  • Link

  • Image

Heading tag:

Html heading are define by <h1> to <h6> heading tags,

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

<h1> tag has the largest font size and <h6> tag has the smallest font size.

Paragraph tag:

<p> tag is used to write a paragraph in HTML. A paragraph always starts with a new line.

Strong tag:

<strong> tag is used to show the importance of a text in a paragraph. The content inside <strong> tag are displayed in bold.

Br tag:

<br> tag does not have a closing tag, so it is a self closing tag. <br> tag is used for a line break in paragraph tag.

Hr tag:

<hr> tag is also a self closing tag. <hr> tag is used to draw a horizontal line in our web page.

Link Tag:

HTML <link> tag is used for navigate from one web page to another web page. When you move the mouse over a link, the mouse arrow will turn into a little hand.

Syntex: <a href="url">link text</a>

href is the most important attributes of <link> tag. href contains the URL of web page to which you want to navigate.

Image Tag:

The HTML <img> tag is used to show an image in a web page. The <img> tag is empty, it contains attributes only, and does not have a closing tag.

Syntex: <img src="url" >

src is the required attributes of the <img> tag. src attributes contains the path of the image, which you want to display in your web page.

HTML Elements:

The HTML element is everything from the start tag to the end tag:

<tagname>Content of the tag</tagname>

Examples of HTML elements:

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

HTML Attributes:

All HTML elements can have attributes

Attributes provide additional information about elements

Attributes are always specified in the start tag

Attributes usually come in name/value pairs like: src=“url"

Example of attributes:

<a href=“URL">Content of the Tag</a>

href is the attribute name and “URL” is the attribute value

Next