Scribd
Upload
3 views13 pages

HTML

HTML, or Hyper Text Markup Language, is a markup language used for designing web pages by structuring content with predefined tags and elements. Created by Tim Berners-Lee in 1991, HTML has evolved through various versions, with HTML 5 being the latest. It is easy to learn, platform-independent, and allows for the integration of multimedia, though it primarily creates static web pages.

Uploaded by

Accounts Section
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views13 pages

HTML

HTML, or Hyper Text Markup Language, is a markup language used for designing web pages by structuring content with predefined tags and elements. Created by Tim Berners-Lee in 1991, HTML has evolved through various versions, with HTML 5 being the latest. It is easy to learn, platform-independent, and allows for the integration of multimedia, though it primarily creates static web pages.

Uploaded by

Accounts Section
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

HTML | Introduction

HTML stands for Hyper Text Markup Language. It is used to design


web pages using markup language. HTML is the combination of
Hypertext and Markup language. Hypertext defines the link between the
web pages. Markup language is used to define the text document within
tag which defines the structure of web pages. This language is used to
annotate (make notes for the computer) text so that a machine can
understand it and manipulate text accordingly. Most of markup (e.g.
HTML) languages are human readable. Language uses tags to define
what manipulation has to be done on the text.

HTML is a markup language which is used by the browser to manipulate


text, images and other content to display it in required format. HTML
was created by Tim Berners-Lee in 1991. The first ever version of
HTML was HTML 1.0 but the first standard version was HTML 2.0
which was published in 1999.

HTML VERSION YEAR

HTML 1.0 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML 5 2014
Elements and Tag: HTML uses predefined tags and elements which tells the
browser about content display property. If a tag is not closed then browser applies
that effect till end of page.

HTML page structure: The Basic structure of HTML page is given below. It
contain some elements like head, title, body, … etc. These elements are used
to build the blocks of web pages.

<DOCTYPE! html>: This tag is used to tells the HTML version. This
currently tells that the version is HTML 5.
<html>: This is called HTML root element and used to wrap all the
code.
<head>: Head tag contains metadata, title, page CSS etc. All the HTML
elements that can be used inside the <head> element are:
 <style>
 <title>
 <base>
 <noscript>
 <script>
 <meta>
 <title>
<body>: Body tag is used to enclosed all the data which a web page has
from texts to links. All of the content that you see rendered in the
browser is contained within this element.

Example: HTML page can be created using any text editor (notepad).
Then save that file using .htm or .html extension and open that file in
browser. It will get the HTML page response.

<!DOCTYPE html>
<html>
<head>
<title>demo web page</title>
<style>
h1 {
color:#009900;
font-size:46px;
}
p {
font-size:17px;
margin-top:-25px;
margin-left:15px;
}
</style>
</head>

<body>
<h1>GeeksforGeek</h1>
<p>A computer science portal for geeks</p>
</body>
</html>
Features of HTML:
 It is easy to learn and easy to use.
 It is platform independent.
 Images, video and audio can be added to a web page.
 Hypertext can be added to text.
 It is a markup language.
Why learn HTML?
 It is a simple markup language. Its implementation is easy.
 It is used to create a website.
 Helps in developing fundamentals about web programming.
 Boost professional career.
Advantages:
 HTML is used to build a websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript etc.
Disadvantages:
 HTML can create only static webpages so for dynamic web page other
languages have to be used.
 Large amount of code has to be written to create a simple web page.
 Security feature is not good.
The complete list of HTML tags are given below:
 HTML | <!–…–>  HTML | <head> Tag
 HTML | <!DOCTYPE>  HTML | <header> Tag
 HTML | <a> Tag  HTML | <hgroup> Tag
 HTML | <abbr> Tag  HTML | <hr> Tag
 HTML | <acronym> Tag  HTML | <html> Tag
 HTML | <address> Tag  HTML | <i> Tag
 HTML | <applet> Tag  HTML | <Iframes> Tag
 HTML | <area> Tag  HTML | <img> Tag
 HTML | <article> Tag  HTML | <input> Tag
 HTML | <aside> Tag  HTML | <ins> Tag
 HTML | <Audio> Tag  HTML | <kbd> Tag
 HTML | <b> Tag  HTML | <label> Tag
 HTML | <base> Tag  HTML | <legend> Tag
 HTML | <basefont> Tag  HTML | <li> Tag
 HTML | <bdi> Tag  HTML | <mark> Tag
 HTML | <bdo> Tag  HTML | <meta> Tag
 HTML | <big> Tag  HTML | <meter> Tag
 HTML | <blockquote> Tag  HTML | <nav> Tag
 HTML | <body> Tag  HTML | <noscript> Tag
 HTML | <br> Tag  HTML | <object> tag
 HTML | <button> Tag  HTML | <optgroup> Tag
 HTML | <canvas> Tag  HTML | <option> Tag
 HTML | <caption> Tag  HTML | <output> Tag
 HTML | <center> Tag  HTML | <Paragraph> Tag
 HTML | <cite> Tag  HTML | <param> Tag
 HTML | <code> Tag  HTML | Phrase Tag
 HTML | <col> Tag  HTML | <pre> Tag
 HTML | <colgroup> Tag  HTML | <progress> Tag
 HTML | <data> Tag  HTML | <q> Tag
 HTML | <datalist> Tag  HTML | <rp> Tag
 HTML | <dd> Tag  HTML | <rt> Tag
 HTML | <del> Tag  HTML | <ruby> Tag
 HTML | <details> Tag  HTML | <s> Tag
 HTML | <dfn> Tag  HTML | <samp> Tag
 HTML | <dialog> Tag  HTML | <script> Tag
 HTML | <dir> Tag  HTML | <section> Tag
 HTML | <div> Tag  HTML | <small> Tag
 HTML | <dl> Tag  HTML | <span> Tag
 HTML | <dt> Tag  HTML | <strike> Tag
 HTML | <embed> Tag  HTML | strong Tag
 HTML | <fieldset> Tag  HTML | <style> Tag
 HTML | <figcaption> Tag  HTML | <sub> and <sup> Tags
 HTML | <figure> Tag  HTML | <summary> Tag
 HTML | <font> Tag  HTML | <svg> Tag
 HTML | <footer> Tag  HTML | <tables> Tag
 HTML | <form> Tag  HTML | <tbody> Tag
 HTML | <frame> Tag  HTML | <template> Tag
 HTML | <frameset> Tag  HTML | <tfoot> Tag
 HTML | <heading> Tag  HTML | <th> Tag
 HTML | <thead> Tag  HTML | <u> Tag
 HTML | <time> Tag  HTML | <var> Tag
 HTML | <title> Tag  HTML | <video> Tag
 HTML | <tt> Tag  HTML | <wbr> Tag

Most commonly used tags in HTML

HTML contains lots of predefined tag. Some of them are described below:
Document structure tag:
 HTML tag: It is the root of the html document which is used to specify
that the document is html.
Syntax:
<html> Statements... </html>
Code:
<html>
<head>
<title>Title of your web page</title>
</head>
<body>HTML web page contents </body>
</html>
 Head tag: Head tag is used to contain all the head element in the html
file. It contains the title, style, meta, … etc tag.
Syntax:
<head> Statements... </head>
Code:
<head>Contains elements describing the document</head>
 Body tag: It is used to define the body of html document. It contains
image, tables, lists, … etc.
Syntax:
<body> Statements... </body>
Code:

<body>The content of your HTML page</body>
 Title tag: It is used to define the title of html document.
Syntax:
<title> Statements... </title>
Code:

<tittle>tab name</tittle>
Content container tag:
 Heading tag: It is used to define the heading of html document.
Syntax:
<h1> Statements... </h>
<h2> Statements... </h2>
<h3> Statements... </h3>
<h4> Statements... </h4>
<h5> Statements... </h5>
<h6> Statements... </h6>
Code:

<h1>Heading 1 </h1>
<h2>Heading 2 </h2>
<h3>Heading 3 </h3>
<h4>Heading 4 </h4>
<h5>Heading 5 </h5>
<h6>Heading 6 </h6>
 Paragraph tag: It is used to define paragraph content in html document.
Syntax:
<p> Statements... </p>
Code:

<p>GeeksforGeeks: Computer science portal</p>
 Emphasis tag: It is used to renders as emphasized text.
Syntax:
<em> Statements... </em>
Code:

<em>GeeksforGeeks</em>
 Bold tag: It is used to specify bold content in html document.
Syntax:
<b> Statements... </b>
Code:

<b>Bold word</b>
 Italic tag: It is used to write the content in italic format.
Syntax:
<i> Statements... </i>
Code:

<i>GeeksforGeeks</i>
 Small (text) tag: It is used to set the small font size of the content.
Syntax:
<small> Statements... </small>
Code:

<small>Example</small>
 Underline tag: It is used to set the content underline.
Syntax:
<u> Statements... </u>
Code:

<u>GeeksforGeeks</u>
 Deleted text tag: It is used to represent as deleted text. It cross the text
content.
Syntax:
<strike> Statements... </strike>
Code:

<strike>GeeksforGeeks</strike>
 Anchor tag: It is used to link one page to another page.
Syntax:
<a href="..."> Statements... </a>
Code:

<a href="https://www.geeksforgeeks.org/">
GeeksforGeeks</a>
 List tag: It is used to list the content.

Syntax:
<li> Statements... </li>
Code:

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
 Unordered List tag: It is used to list the content without order.
Syntax:
<ul> Statements... </ul>
Code:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>

<li>List item 1</li>
<li>List item 2</li>
 Ordered List tag: It is used to list the content in a particular order.
Syntax:
<ol> Statements... </ol>
Code:

 Comment tag: It is used to set the comment in html document. It is not


visible on the browser.
Syntax:

<!-- Statements... -->


Code:
<!--Comment section-->
 Scrolling Text tag: It is used to scroll the text or image content.
Syntax:
<marquee> Statements... </marquee>
Code:
<marquee bgcolor="#cccccc" loop="-1"
scrollamount="2" width="100%">
Example Marquee</marquee>
 Center tag: It is used to set the content into the center.
Syntax:
<center> Statements... </center>
Code:
<center>GeeksforGeeks</center>
 Font tag: It is used to specify the font size, font color and font-family in
html document.
Syntax:
<font> Statements ... <font>
Code:

<font face="Times New Roman">Example</font>
Empty (Non-Container) Tags:
 Line break tag: It is used to break the line.
Syntax:
<br>
Code:
GeeksforGeeks<br>A computer science portal
 Image tag: It is used to add image element in html document.
Syntax:
<img>
Code:
<img src="gfg.jpg" width="40"
height="40" border="0">
 Link tag: It is used to link the content from external source.
Syntax:
<link>
Code:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
 Horizontal rule tag: It is used to display the horizontal line in html
document.
Syntax:
<hr/>
Code:

<hr width="50%" size="3" />


 Meta tag: It is used to specify the page description. For example: last
modifier, authors, … etc.
Syntax:
<meta> Statements ... <meta>
Code:
<meta name="Description"
content="Description of your site">
<meta name="keywords"
content="keywords describing your site">
Tables Tags: Table tag is used to create a table in html document.
 Table tag:
Syntax:
<table> Statements... </table>
Code:

<table border="4" cellpadding="2" cellspacing="2" width="100%">


<tr> <td>Column 1</td>
<td>Column 2</td> </tr> </table>
 Tr tag: It is used to define row of html table.
Syntax:
<tr> Statements... </tr>
Code:

<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
 Th tag: It defines the header cell in a table. By default it set the content
with bold and center property.
Syntax:
<th> Statements ... <th>
Code:

<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
 Td tag: It defines the standard cell in html document.
Syntax:
<td> Statements ... <td>
Code:

<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
Input Tags:

 Form tag: It is used to create html form for user.


Syntax:
<form> Statements ... <form>
Code:

<form action="mailto:[email protected] ">


Name: <input name="Name" value="" size="80"><br>
Email: <input name="Email" value="" size="80"><br>
<br><center><input type="submit"></center>
</form>
 Submit input tag: It is used to take the input from the user.
Syntax:
<input>
Code:

<form method=post action="/cgibin/example.cgi">


<input type="text" style="color: #ffffff;
font-family: Verdana; font-weight: bold;
fontsize: 12px; background-color: #72a4d2;"
size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
 Dropdown option tag: It is used to select an option froma drop-down
list.
Syntax:
<option> Statements ... <option>
Code:
<form method=post action="/cgibin/example.cgi">
<center> Select an option:<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
</form>
 Radio button tag: It is used to select only one option from the given
options.
Syntax:
<input>
Code:

<form method=post action="/cgibin/example.cgi">


Select an option:<br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3

You might also like