Scribd
Upload
139 views

HTML Elements

The document discusses the basic HTML elements. It defines HTML as a markup language used to define the structure and layout of web pages. It describes key HTML elements like <html>, <body>, headings, paragraphs, links, images, lists and divisions. It provides examples of how each element is coded in HTML and displays the output. The document serves as a good introduction to basic HTML elements and tags.

Uploaded by

AbhiFake Srivastava
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
139 views

HTML Elements

The document discusses the basic HTML elements. It defines HTML as a markup language used to define the structure and layout of web pages. It describes key HTML elements like <html>, <body>, headings, paragraphs, links, images, lists and divisions. It provides examples of how each element is coded in HTML and displays the output. The document serves as a good introduction to basic HTML elements and tags.

Uploaded by

AbhiFake Srivastava
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

1/1/2017 HTML Elements

  (/search)   (/messages)   (/users/ct20151785515/notifications)


(http://www.tcs.com)
Chapter 1: HTML and CSS

 User Interface ­ All Chapters (/communities/aspire­2016/course/user­interface­1)
 Home  (/communities/aspire­2016)

Index
1.1.HTML Elements (/communities/aspire­2016/content/html­elements­3)

1.2.HTML Table and Forms (/communities/aspire­2016/content/html­table­and­forms­3)

1.3.CSS (Cascading Style Sheets) (/communities/aspire­2016/content/css­cascading­style­sheets­0)

1.4.Inserting CSS into HTML (/communities/aspire­2016/content/inserting­css­into­html­4)

1.5.Different Tools To Create UI (/communities/aspire­2016/content/different­tools­to­create­ui­4)

Go to Doubts 

1.1. HTML Elements
What is HTML?
To understand HTML, let us first see the meaning of a Markup language. 
A markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text.
See example as indicated below:

The blue text shown in an example for Markup to indicate the content enclosed in it.
HTML or Hyper Text Markup Language is the main markup language for creating web pages and informations that can be displayed in a web browser. It is a
markup language that web browsers use to interpret and compose text, images and other elements into visual or audible web pages. 
Now it is simple. Isn't it? We may summarize the knowledge of HTML as below

HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content 
HTML documents contain HTML tags and plain text
HTML documents are also called web pages

A HTML document when composed of the markup elements is saved as a file with extension “.html” or “.htm”. The rendering of the document is done on any
web browser such as Internet Explorer, Google Chrome, etc.,.

HTML Elements
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>). HTML tags most commonly come in pairs like <h1>
and </h1>, although some tags represent empty elements and so are unpaired, for example <img>. The first tag in a pair is the start tag, and the second tag is
the end tag (they are also called opening tags and closing tags respectively). In between these tags web designers can add text, tags, comments and other
types of text­based content. Most HTML elements have attributes.
The browser does not display the HTML tags, but uses the tags to interpret the content of the page. The purpose of a web browser is to read HTML documents
and compose them into visible web pages.
Let us understand each of the HTML element in detail:

DOCTYPE
The <!DOCTYPE> declaration helps the browser to display a web page correctly. 
There are many different documents on the web, and a browser can only display HTML page 100% correctly if it knows the HTML type and version used 
Below is a HTML document showing the <!DOCTYPE> declaration in the first line.

https://campuscommune.tcs.com/communities/aspire­2016/content/html­elements­3 1/6
1/1/2017 HTML Elements

HTML

The <html> element defines the whole HTML document. The element has a start tag <html> and an end tag </html>.

BODY

The <body> element defines the body of the HTML document. The element has a start tag <body> and an end tag </body>.

Headings
HTML headings are defined using <h1> to <h6> tags

Output of the above code may be viewed using a web browser as below:

Various other elements in HTML 
The other basic elements that are widely used in HTML are tabulated below

Sample code and its output:

https://campuscommune.tcs.com/communities/aspire­2016/content/html­elements­3 2/6
1/1/2017 HTML Elements

HTML Head elements
The elements of the head element and its associated nested tags are listed below in the table 

The sample HTML document consisting of these head elements is shown here with associated output screen

HTML formatting elements
The HTML formatting elements are  tabulated below:

https://campuscommune.tcs.com/communities/aspire­2016/content/html­elements­3 3/6
1/1/2017 HTML Elements

Sample code for some of the formatting tags are given below followed by output page.

HTML Attributes

Attributes in HTML tag/element provide additional information about the element.

HTML Links
The HTML <a> tag defines a hyperlink.

A hyperlink (or link) is a word, group of words, or image that you click on to navigate to another document.

When you move the cursor hover a link in a Web page, the cursor looks like pointed­hand instead of usual arrow . The most important attribute of the <a>
element is the href attribute, which indicates the link's destination.

By default, links appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

Samples for defining HTML link are shown here:

https://campuscommune.tcs.com/communities/aspire­2016/content/html­elements­3 4/6
1/1/2017 HTML Elements

HTML Images
In HTML, images are defined with the <img> tag. The <img> tag is empty, which mean it contains only the attributes  and no closing tag. Some of the attributes of
the image tag are: 

src – Indicates the source or the URL of the image that is to be displayed
alt – alternate name or text for the image( tooltip)
height, width – attributes describing the size

Below is an example (image is visible if it is placed in same directory where we placed html page.Image file is named as smiley.gif) and followed by output:

HTML Division
The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block­elements to apply styles. The attributes are class and
style.
Note: The <div> element is very often used to group HTML elements, to layout a web page.
A simple example to show the <div> usage:

https://campuscommune.tcs.com/communities/aspire­2016/content/html­elements­3 5/6
1/1/2017 HTML Elements

HTML LIST
HTML List is  of three types. unordered list <UL> (ie., unnumbered/bullets) ,ordered (ie., numbered) list <OL> and  definition <DL> (I.e define the terms like in
glossary).These elements are block elements.
Unordered Lists: 
An unordered list is typically a bulleted list of items. This is probably the most common type of list on the Web. The <ul> tag  is opening an unordered list  and </

https://campuscommune.tcs.com/communities/aspire­2016/content/html­elements­3 6/6

You might also like