Html - Tags, Element And Attributes

Published: 06 Feb 2019

AILET

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it is the most widely used language to write Web Pages.

Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext.
HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display.

HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists etc.

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

In its simplest form, following is an example of an HTML document

<!DOCTYPE html>

<html>

<head>

<title>This is document title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>Document content goes here.....</p>

</body>

</html>

output:

This is a heading

Document content goes here.....

HTML Tags

Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. Most tags must be opened and closed in order to function

For example, <html> has its closing tag </html> and <body> tag has its closing tag </body> tag etc.

HTML document uses the some following tags −

Sr.No	Tag & Description
1.	<!DOCTYPE...> The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration − <!DOCTYPE html>
2.	<html> This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags.
3.	<head> This tag represents the document's header which can keep other HTML tags like <title>, <link> etc.
4.	<title> The <title> tag is used inside the <head> tag to mention the document title.
5.	<body> This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc.
6.	<h1> This tag represents the heading.
7.	<p> This tag represents a paragraph
8.	<a> The link's destination is specified in the `href` attribute. <a href="gyangossip.com">GyanGossip</a>
9.	<img> <img src="imagepath.jpg" alt="GyanGossip" width="104" height="142">HTML images are defined with the `<img>` tag. The source file (`src`), alternative text (`alt`), `width`, and `height` are provided as attributes.

HTML Element

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash as shown below with few tags −

Start Tag	Content	End Tag
<p>	This is paragraph content.	</p>
<h1>	This is heading content.	</h1>
<div>	This is division content.	</div>
<br />

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements. These are known as void elements.

HTML Attributes

An attribute is used to provide extra or additional information about an element.

All HTML elements can have attributes. Attributes provide additional information about an element.
It takes two parameters : a name and a value. These define the properties of the element and is placed inside the opening tag of the element. The name parameter takes the name of the property we would like to assign to the element and the value takes the properties value or extent of the property names that can be aligned over the element.
Every name has some value that must be written within quotes.

Attribute	Description
title	Specifies extra information about an element
id	Specifies a unique id for an element
class	Specifies one or more classnames for an element (refers to a class in a style sheet)
style	Specifies an inline CSS style for an element
name	Specifies the name of the element
src	Specifies the URL of the media file
type	Specifies the type of element

<!DOCTYPE html>

<html>

<head>

<title>The title Attribute Example</title>

</head>

<body>

<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>

<p id = "html">This para explains id attribute</p>

<p class = "className1 className2 className3">Example of class</p>

<p style = "font-family:arial; color:#FF0000;">Some text...</p>

<input type="text" name='''name'' value="value">The name and value of each input element are included in the HTTP request when the form is submitted. <img src="imagepath">