LEARN HTML LANGUAGE BY Ritesh

HTML TUTORIAL BY RITESH

INTRODUCTION TO HTML LANGUAGE

HTML(HyperText Markup Language) is a type of language used for developing websites, webpages, web applications etc. It has also included CSS(Cascading Style Sheets), JavaScript, VBS Script etc. The browsers recieves html codes from the webservers, websites or from local storage. And then convert html codes into multimedia webpages. HTML was firstly introduced by Berners-Lee. This code was written by using tags and elements such as:

<html>,</html>,<head>,</head>, <title>,</title>,<body>,</body> etc.

In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet -basedhypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990. That year, Berners-Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request for funding, but the project was not formally adopted by CERN. In his personal notes from 1990 he listed "some of the many areas in which hypertext is used" and put an encyclopedia first. The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Tim Berners-Lee in late 1991. It describes 18 elements comprising the initial, relatively simple design of HTML.

Except for the hyperlink tag, these were strongly influenced by SGMLguid, an in-house Standard Generalized Markup Language (SGML)-based documentation format at CERN. Eleven of these elements still exist in HTML 4.

HTML is a markup language that web browsers use to interpret and compose text, images, and other material into visual or audible web pages. Default characteristics for every item of HTML markup are defined in the browser, and these characteristics can be altered or enhanced by the web page designer's additional use of CSS. Many of the text elements are found in the 1988 ISO technical report TR 9537 Techniques for using SGML, which in turn covers the features of early text formatting languages such as that used by theRUNOFF command developed in the early 1960s for the CTSS (Compatible Time-Sharing System) operating system: these formatting commands were derived from the commands used by typesetters to manually format documents. However, the SGML concept of generalized markup is based on elements (nested annotated ranges with attributes) rather than merely print effects, with also the separation of structure and markup; HTML has been progressively moved in this direction with CSS. Berners-Lee considered HTML to be an application of SGML.

It was formally defined as such by the Internet Engineering Task Force (IETF) with the mid-1993 publication of the first proposal for an HTML specification, the "Hypertext Markup Language (HTML)" Internet Draft by Berners-Lee and Dan Connolly, which included an SGML Document type definition to define the grammar.

The draft expired after six months, but was notable for its acknowledgment of the NCSA Mosaic browser's custom tag for embedding in-line images, reflecting the IETF's philosophy of basing standards on successful prototypes. Similarly, Dave Raggett 's competing Internet-Draft, "HTML+ (Hypertext Markup Format)", from late 1993, suggested standardizing already-implemented features like tables and fill-out forms. (Source Wikipedia).

All the list and meaning of 128 HTML tags

A

B
C
D
E
F
G

H
I
J

K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y

Z

A

A tag
The A element denotes an anchor tag a hypertext link or the destination of a link. The HREF attribute specifies a hypertext link to another resource, such as an HTML document or a JPEG image.
Example
<!DOCTYPE html><html><head><title>HTML Tag</title> </head> <body> This is a link to<a href="http://www.google.com">www.google.com</a> </body></html>

Abbr tag

The ABBR element is used to markup abbreviations. The TITLE attribute is useful in conjunction with ABBR to give the long form of the abbreviation, allowing visual browsers to provide the long form as a "tooltip". If the short form is a pronounceable word, the ACRONYM element should be used instead of ABBR.
<!DOCTYPE html> <html> <head> <title>HTML abbr Tag</title> </head> <body> <p> <abbr title="Private">pvt.</abbr><br /> <abbr title="National Defence Academy">N.D.A.</abbr> promotes the global game.<br /> </p> </body> </html>

ACRONYM tag

The ACRONYM element is used to markup acronyms. The TITLE attribute is useful in conjunction with ACRONYM to give the long form of the acronym, allowing visual browsers to provide the long form as a "tooltip". Examples:

Ex.:
<!DOCTYPE html> <html> <head> <title>HTML acronym Tag</title> </head> <body> <p> <acronym title="HyperText Markup Language">HTML</acronym> </p> </body> </html>

ADDRESS TAG

The ADDRESS element provides contact information for a document or part of a document. Information provided by ADDRESS may include the names of the document's maintainers, links to the maintainers' Web pages, e-mail addresses for feedback, postal addresses, phone numbers, and so on. ADDRESS tag italics the text.

Ex.: <!DOCTYPE html> <html> <head> <title>HTML address Tag</title> </head> <body> <address> Hi,this is Italic text.<br /></address> </body> </html>

AREA TAG

Ex.: <!DOCTYPE html> <html> <head> <title>HTML area Tag</title> </head> <body> <img src=/images/usemap.gif alt="usemap" border="0" usemap="#tutorials"/> <map name="tutorials"> <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="/perl/index.htm" alt="Perl Tutorial" target="_blank" /> </map> </body> </html>
APPLET TAG

Ex.: <!DOCTYPE html> <html> <head> <title>HTML applet Tag</title> </head> <body> <applet code="newClass.class" width="300" height="200"> </applet> </body> </html>
ARTICLE TAG

<!DOCTYPE html> <html> <head> <title>HTML Article Tag</title> </head> <body> <article> HTML <h2>PHP</h2> <p>PHP is PHP Hypertext Preprocessor</p> </article> </body> </html>
ASIDE TAG

<!DOCTYPE html> <html> <head> <title>HTML aside Tag</title> <aside> <h3>Ritesh HTML</h3> <p>HTML</p> </aside> </body> </html>
AUDIO TAG

<!DOCTYPE html> <html> <head> <title>HTML audio Tag</title> </head> <body> HTML <p>Click on Play button...</p> <p>(Song: Kalimba which is provided as a Sample Music in Windows)</p> <audio controls> <source src="/html/Kalimba.mp3" type="audio/mpeg"> </audio> </body> </html>
B

B TAG

<!DOCTYPE html> <html> <head> <title>HTML b Tag Tutorial</title> </head> <body> This web page gives explanation on <b>bold</b> tag. </body></html>
BASE TAG

<!DOCTYPE html> <html> <head> <title>HTML base Tag</title> <base href="http://www.tutorialspoint.com" /> </head> <body> HTML: <img src="/images/html.gif" /> </body> </html>
BASEFONT TAG

<!DOCTYPE html> <html> <head> <title>HTML basefont Tag</title> </head> <body> <basefont face="cursive,serif" color="#ff9900" size="4"/> <p>The HTML basefont tag is now deprecated. You should use CSS font to set font properties instead.</p> </body> </html>
BDO TAG

<!DOCTYPE html> <html> <head> <title>HTML bdo Tag</title> </head> <body> <bdo dir="rtl">Here's some English embedded in text in another language requiring a right-to-left presentation.</bdo> </body> </html>
BDI TAG

<!DOCTYPE html> <html> <head> <title>HTML bdi Tag</title> </head> <body> <p>Tutorialspoint list of tutorials:</p> <ul> <li>Web: HTML</li> <li>Programming: Java</li> <li>Scripting: VBScript</li> <li>Mobile: Android</li> </ul> </body> </html>
BGSOUND TAG

<!DOCTYPE html> <html> <head> <title>HTML bgsound Tag</title> </head> <body> <bgsound src="/html/yourfile.mdi"/> <p>This does create any result on the screen but it plays sound file in the background.</p> </body></html>
BIG TAG

<!DOCTYPE html> <html> <head> <title>HTML big Tag</title> </head> <body> <p><big>Website: complieonline.com</big>(Online Compiler)</p> </body> </html>
BLINK TAG

<!DOCTYPE html> <html> <head> <title>HTML blink Tag</title> </head> <body> <blink>This text will blink in Netscape Version 5.0</blink> </body> </html>
BLOCKQUOTE TAG

<!DOCTYPE html> <html> <head> <title>HTML blockquote Tag</title> </head> <body> <blockquote>Browsers generally render blockquote text as indented text. If your quoted text needs to display within a non-quoted paragraph, you should use the HTML q tag. Most browsers surround q text with quotation marks.</blockquote> <q>Browsers generally render blockquote text as indented text. If your quoted text needs to display within a non-quoted paragraph, you should use the HTML q tag. Most browsers surround q text with quotation marks.</q> </body> </html>
BODY TAG

<!DOCTYPE html> <html> <head> <title>HTML body Tag</title> </head> <body> Body of the document... </body> </html>
BR TAG

<!DOCTYPE html> <html> <head> <title>HTML br Tag</title> </head> <body> <p>This is before the line break<br /> and this after the line break.</p> </body> </html>
BUTTON TAG

<!DOCTYPE html> <html> <head> <title>HTML Button Tag</title> </head> <body> <form> <button name="button" value="OK" type="button">Click Me</button> </form> </body> </html>
C

CANVAS TAG

<!DOCTYPE html> <html> <head> <title>HTML Canvas Tag</title> </head> <body> HTML <canvas id="newCanvas">Your browser does not support canvas tag.</canvas> <script> var c=document.getElementById('newCanvas'); var ctx=c.getContext('2d'); ctx.fillStyle='#00FD00'; ctx.fillRect(0,0,200,60); </script> </body> </html>
CAPTION TAG

<!DOCTYPE html> <html> <head> <title>HTML caption Tag</title> </head> <body> <h2>Cricketers List</h2> <table width="100%"> <caption>Indian Cricketers</caption> <th>Name</th> <tr><td>Sachin Tendulkar</td></tr> <tr><td>M S Dhoni</td></tr> <tr><td>Suresh Raina</td></tr> <tr><td>Virat Kohli</td></tr> </table> </body> </html>
CENTER TAG

<!DOCTYPE html> <html> <head> <title>HTML center Tag</title> </head> <body> <center>This text is centered</center> </body> </html>
CITE TAG

<!DOCTYPE html> <html> <head> <title>HTML cite Tag</title> </head> <body> <p>The learning content can be referred from <cite>Data Structures & Algorithms in Java</cite><p> </body> </html>
CODE TAG

<!DOCTYPE html> HTML <html> <head> <title>HTML code Tag</title> </head> <body> <p>The header file for C++ Program is :<code>#include<iostream.h></code>.</p> </body> </html>
COL TAG

<!DOCTYPE html> <html> <head> <title>HTML col Tag</title> </head> HTML <body> <p>This example shows a colgroup that has three columns of different widths:</p> <table border="1"> <colgroup span="3"> <col width="50"></col> <col width="100"></col> <col width="150"></col> <col width="50"></col> </colgroup> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> <td>col 4</td> </tr> </table> </body> </html>
COLGROUP TAG

<!DOCTYPE html> <html> <head> HTML <title>HTML colgroup Tag</title> </head> <body> <p>This example shows a colgroup that has three columns of different widths:</p> <table border="1"> <colgroup span="3"> <col width="50"></col> <col width="100"></col> <col width="200"></col> </colgroup> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> </table> </body> </html>
COMMENT TAG

<!DOCTYPE html> <html> <head> HTML <title>HTML  Tag</title> HTML </head> <body> <comment>This is a commented line in IE</comment>  </body> </html>
D

DATALIST

<!DOCTYPE html> <html> <head> <title>HTML Datalist Tag</title> </head> <body> <input list="tutorials" /> <datalist id="tutorials"> HTML <option value="Java"> <option value="ASP"> <option value="PHP"> <option value="Ruby"> <option value="jQuery"> </datalist> </body> </html>
DD TAG

<!DOCTYPE html> <html> </head> HTML <body> <dl> <dt>Definition List</dt> <dd>A list of terms and their definitions/descriptions.</dd> <dt>HTML</dt> <dd>An HTML tutorial.</dd> <dt>PHP</dt> <dd>An PHP tutorial.</dd> </dl> </body> </html>
DEL TAG

<!DOCTYPE html> <html> <head> <title>HTML del Tag</title> </head> <body> <p>Following text is deleted using <del>HTML del tag </body> </html>
DFN

<!DOCTYPE html> <html> <head> <title>HTML dfn Tag</title> </head> <body> <dl> <dt> <dfn> <abbr title="Java Server Pages">JSP</abbr> </dfn> </dt> <dd>JSP is used to create dynamically generated web pages.</dd> </dl> </body> </html>
DIALOG TAG

<!Doctype html> <html> <head> <title>HTML dialog Tag</title> </head> <body> <dialog open>this will be shown in a dialog</dialog> </body> </html>
DIR TAG

<!DOCTYPE html> <html> <head> <title>HTML dir Tag</title> </head> <body> <dir> <li>dir</li> <li>menu</li> <li>ul</li> </dir> </body> </html>
DIV TAG

<!DOCTYPE html> <html> <head> <title>HTML div Tag</title> <link rel="stylesheet" href="style2.css"> </head> <body> <div id="contentinfo"> <p>Welcome to our website. We provide tutorials on various subjects.</p> </div> </body> </html>
DL TAG

<!DOCTYPE html> <html> <head> <title>HTML dl Tag</title> </head> <body> <dl> <dt>Definition List</dt> <dd>A list of terms and their definitions/descriptions.</dd> <dt>HTML</dt> <dd>An HTML tutorial.</dd> <dt>PHP</dt> <dd>An PHP tutorial.</dd> </dl> </body> </html>
DT TAG

<!DOCTYPE html> <html> <head> <title>HTML dt Tag</title> </head> <body> <dl> <dt>Definition List</dt> <dd>A list of terms and their definitions/descriptions.</dd> <dt>JAVA</dt> <dd>Tutorial on JAVA Programming Language.</dd> <dt>Android</dt> <dd>Tutorial on Android Operating System.</dd> </dl> </body></html>
E

EM TAG

<!DOCTYPE html> <html> <head> <title>HTML em Tag</title> </head> <body> <p>Insert an image in a web page using <em>image</em> tag.</p> HTML </body> </html>
EMBED TAG

<!DOCTYPE html> <html> <head> <title>HTML Embed Tag</title> </head> <body> <embed src="/html/yourfile.mdi" width="250" height="100" /> </body> </html>
F

FIELDSET TAG

<!DOCTYPE html> <html> <head> <title>HTML fieldset Tag</title> </head> <body> <form> <fieldset> <legend>Details</legend> Student Name: <input type="text"><br /> MCA Subjects:<input type="text"><br /> Course Link:<input type="url" name="websitelink"> </fieldset> </form> </body> </html>
FIGCAPTION

<!DOCTYPE html> <html> <head> <title>HTML Figcaption Tag</title> </head> <body> <figure><img src="http://www.tutorialspoint.com/scripts/img/logo.png"/> <figcaption>Tutorials Point Logo</figcaption> </figure> </body> </html>
FIGURE TAG

<!DOCTYPE html> <html> <head> <title>HTML Figure Tag</title> </head> <body> <h2>Tutorials Point Logo<h2> <figure><img src="http://www.tutorialspoint.com/scripts/img/logo.png"/> </figure> </body> </html>
FONT TAG

<!DOCTYPE html> <html> <head> <title>HTML font Tag</title> </head> <body> <font face="cursive,serif" color="#ff9900" size="4"> The HTML font tag is now deprecated. You should use start using CSS to set font size and family. </font> </body> </html>
FOOTER TAG

<!DOCTYPE html> HTML <html> <head> <title>HTML Footer Tag</title> </head> <body> <header> <h1>Simply Easy Learning</h1> <p>You're visiting tutorialspoint.com - tutorial hub for simply easy learning.</p> </header> <footer> © Copyright 2014, All Rights Reserved </footer> </body> </html>
FORM TAG

<!DOCTYPE html> <html> <head> <title>HTML form Tag</title> </head> <body> <form action="/cgi-bin/hello_get.cgi" method="get"> First name: <input type="text" name="first_name" value="" maxlength="100" /> <br /> Last name: <input type="text" name="last_name" value="" maxlength="100" /> <input type="submit" value="Submit" /> </form> </body> </html>
FRAME TAG

<!DOCTYPE html> <html> <head> <title>HTML frame Tag</title> </head> <frameset cols="200, *"> <frame src="/html/menu.htm" name="menu_page" /> <frame src="/html/main.htm" name="main_page" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html>
FRAMESET TAG

<!DOCTYPE html> <html> <head> <title>HTML frameset Tag</title> </head> <body> <frameset cols="200, *"> <frame src="/html/menu.htm" name="menu_page" /> <frame src="/html/main.htm" name="main_page" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html>
H

H1 TO H6 TAG

<!DOCTYPE html> <html> <head> <title>HTML <h1> to <h6> Tag</title> </head> <body> <h1>RITESH</h1> <h2>RITESH</h2> <h3>RITESH</h3> <h4>RITESH</h4> <h5>RITESH</h5> <h6>RITESH</h6> </body> </html>
HEAD TAG

<!DOCTYPE html> <html> <head> <title>HTML head Tag</title> </head> <body> actual content goes here </body> </html>
HEADER TAG

<!DOCTYPE html> <html> <head> <title>HTML Header Tag</title> </head> <body> <header> <h1>Simply Easy Learning</h1> <p>You're visiting tutorialspoint.com - tutorial hub for simply easy learning.</p> </header> </body> </html>
HR TAG

<!DOCTYPE html> <html> <head> <title>HTML hr Tag</title> </head> <body> <p>This text will be followed by a horizontal line <hr /></p> </body> </html>
HTML TAG

<!DOCTYPE html> <html> <head> <title>HTML html Tag</title> </head> <body> <p>Actual content goes here... </p> </body> </html>
I

I TAG

<!DOCTYPE html> <html> <head> <title>HTML i Tag</title> </head> <body> <p>We liked the movie <i>3 Idiots</i></p> </body> </html>
IFRAME TAG

<!DOCTYPE html> <html> <head> <title>HTML iframe Tag</title> </head> <body> <iframe src ="http://www.tutorialspoint.com/index.htm" width="100%"></iframe> </body> </html>
ILAYER TAG

<!DOCTYPE html> <html> <head> <title>HTML ilayer Tag</title> </head> <body> This <ilayer top="4">word</ilayer> is shifted down, while this <ilayer left="10">one</ilayer> is shifted over. With a negative value, words can be moved <ilayer top="-4">up</ilayer> and to the <ilayer left="-10">left</ilayer>. </body> </html>
IMG TAG

<!DOCTYPE html> <html> <head> <title>HTML Img Tag</title> </head> <body> HTML <img src="http://www.tutorialspoint.com/images/html.gif" alt="HTML Tutorial" height="150" width="140" /> </body> </html>
INPUT TAG

<!DOCTYPE html> <html> <head> <title>HTML input Tag</title> </head> <body> <form action="/cgi-bin/hello_get.cgi" method="get"> First name: <input type="text" name="first_name" value="" maxlength="100" /> <br /> Last name: <input type="text" name="last_name" value="" maxlength="100" /> <input type="submit" value="Submit" /> </form> </body> </html>
INS TAG

<!DOCTYPE html> <html> <head> <title>HTML ins Tag</title> </head> <body> <p>Following text is inserted newly <ins>HTML ins tag</ins> </body> </html>
ISINDEX TAG

<!Doctype html> <html> <head> <title>HTML isindex Tag</title> <isindex prompt = "Search" /> </head> </html>
K

KBD TAG

<!DOCTYPE html> <html> <head> <title>HTML kbd Tag</title> </head> <body> <p>Open previously closed tab using HTML <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd> </body> </html>
KEYGEN TAG

<!DOCTYPE html> <html> <head> <title>HTML keygen Tag</title> </head> <body> <form> <keygen name="random_key" challenge="0987654321"> <input name="firstname" value="first name"> </form> </body> </html>
L

LABEL TAG

<!DOCTYPE html> <html> <head> <title>HTML label Tag</title> </head> <body> <label for="email">EMAIL-ID:<br /> <input type="email" value="" name="emailid" size="30" placeholder="Enter a valid email address"><br /><br /> <label for="phone">PHONE NO:<br /> <input type="text" value="" name="phno" size="30" maxlength="10" placeholder="Enter a valid phone number" pattern="[09]{10}"><br /><br /> </body> </html>
LAYER TAG

<!DOCTYPE html> <html> <head> <title>HTML layer Tag</title> </head> <body> <layer id="layer1" top="250" left="50" width="200" height="200" bgcolor="red"> <p>layer 1</p> </layer> <layer id="layer2" top="350" left="150" width="200" HTML height="200" bgcolor="blue"> <p>layer 2</p> </layer> <layer id="layer3" top="450" left="250" width="200" height="200" bgcolor="green"> <p>layer 3</p> </layer> </body> </html>
LEGEND TAG

<!DOCTYPE html> <html> <head> <title>HTML legend Tag</title> </head> <body> <form> <fieldset> <legend>Details</legend> Student Name: <input type="text"><br /> MCA Subjects:<input type="text"><br /> Course Link:<input type="url" name="websitelink"> </fieldset> </form> </body> </html>
LI TAG

<!DOCTYPE html> <html> <head> <title>HTML li Tag</title> </head> <body> <ul> <li>ol - ordered list</li> <li>ul - unordered list</li> <li>dir - directory list</li> <li>menu - menu list</li> </ul> </body> </html>
LINK TAG

<!DOCTYPE html> HTML <html> <head> <title>HTML link Tag</title> <link rel="stylesheet" href="stylenew.css"> </head> <body> <div id="contentinfo"> <p>Welcome to our website. We provide tutorials on various subjects.</p> </div> </body> </html>
M

MAIN TAG

<!DOCTYPE html> <html> <body> <main> <h1>Learning</h1> <p>Learn to gain experience and try to share your knowledge with others.</p> <article> <h3>Web Development Tutorials</h3> HTML <p>Consist of CSS, HTML, and PHP tutorials for 2nd Semester exams.</p> </article> <article> <h3>Academic Tutorials</h3> <p>Consist of Computer Fundamental, Computer Network tutorials for 1st Semester exams.</p> </article> </main> </body> </html>
MAP TAG

<!DOCTYPE html> <html> <head> <title>HTML map Tag</title> </head> <body> <img src="/images/html.gif" alt="HTML Map" border="0" usemap="#html"/>  <map name="html"> <area shape="circle" coords="154,150,59" href="about/about_team.htm" alt="Team" target="_self" /> </map> </body> </html>
MARK TAG

<!DOCTYPE html> <html> <head> <title>HTML Mark Tag</title> </head> <body> <h2>Cricketers in India</h2> <p>Sachin Tendulkar is <mark>god</mark> of cricket.</p> </body> </html>
MARQUEE TAG

<!DOCTYPE html> <html> <head> <title>HTML marquee Tag</title> </head> <body> <marquee>This is basic example of marquee</marquee> <marquee direction="up">The direction of text will be from bottom to top.</marquee> </body> </html>
MENU TAG

<!DOCTYPE html> <html> <head> <title>HTML menu Tag</title> </head> <body> <menu> <li>ol - ordered list</li> <li>ul - unordered list</li> <li>dir - directory list</li> <li>menu - menu list</li> </menu> </body> </html>
MENUITEM

<!Doctype html> <html> <head> <title>HTML menuitem Tag</title> </head> <body> <div style="border:1px solid #000;padding:20px;" contextmenu="clickmenu"> <p>Right click inside here....</p> <menu type="context" id="clickmenu"> <menuitem label="Tutorialspoint" onclick=""> </menuitem> </menu> </div> </body> </html>
META TAG

<html> <head> <title>HTML meta tag</title> <meta name="keywords" content="HTML, meta tag, metadata" /> <meta name="description" content="Brief description of the document" /> <meta http-equiv="refresh" content="10" /> </head> <body style="background-color:orange"> Document content goes here </body> </html>
METER TAG

<!DOCTYPE html> <html> <head> <title>HTML meter Tag</title> </head> <body> <meter value="7" min="0" max="10">2 out of 10</meter><br /> <p>gauge value can be seen here</p> </body> </html>
MULTICOL TAG

<!DOCTYPE html> <html> <head> <title>HTML meter Tag</title> </head> <body><h1>Breaking News</h1> <multicol cols=3> <p>State media said more than 2,000 soldiers, police and miners closed the breach in the dike in Shandong province early Sunday and installed pipes and five high-speed pumps, but gave no indication if there were any signs of life.<p> <p>The Huayuan Mining Co. mine flooded on Friday afternoon when the Wen river burst a dike, sending water pouring into a shaft and trapping 172 miners, Xinhua and state television said.<p> </multicol> </body> </html>
N

NAV TAG

<!DOCTYPE html> <html> <head> <title>HTML Nav Tag</title> </head> <body> <p>Database Tutorials:</p> <nav> <a href="dbms/index.htm">DBMS</a> | <a href="mongodb/index.htm">MongoDB</a> | <a href="mysql/index.htm">MySQL</a> | <a href="plsql/index.htm">PL/SQL</a> | <a href="sql/index.htm">SQL</a> </nav> </body> </html>
NOBR TAG

<!DOCTYPE html> <html> <head> <title>HTML nobr Tag</title> </head> <body> <nobr> This is a very long sequence of text that is forced to be on a single line, even if doing so causes <wbr /> the browser to extend the document window beyond the size of the viewing pane and the poor user must scroll right <wbr /> to read the entire line. </nobr> </body> </html>
NOEMBED TAG

<!DOCTYPE html> <html> <head> <title>HTML noembed Tag</title> </head> <body> <embed src="/html/yourfile.swf" width="200" height="200" > <noembed><img src="yourimage.gif" alt="Alternative Media" ></noembed> </embed> </body> </html>
NOFRAMES

<!DOCTYPE html> <html> <head> <title>HTML noframes Tag</title> </head> <body> <frameset cols="200, *"> <frame src="/html/menu.htm" name="menu_page" /> <frame src="/html/main.htm" name="main_page" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </body> </html>
NOSCRIPT TAG

<!DOCTYPE html> <html> <head> <title>HTML noscript Tag</title> </head> <body> <script type="text/JavaScript">  document.write("Hello JavaScript!") </script> <noscript> Your browser does not support JavaScript! </noscript> </body> </html>
O

OBJECT TAG

<!DOCTYPE html> <html> <head> <title>HTML object Tag</title> </head> <body> <object data="data/test.htm" type="text/html" width="300" height="200"> alt : <a href="data/test.htm">test.htm</a> </object> </body> </html>
OL TAG

<!DOCTYPE html> <html> <head> <title>HTML ol Tag</title> </head> <body> <ol> <li>ol - ordered list</li> <li>ul - unordered list</li> <li>dir - directory list</li> <li>menu - menu list</li> </ol> </body> </html>
OPTGROUP

<!DOCTYPE html> <html> <head> <title>HTML optgroup Tag</title> </head> <body> <select> HTML <optgroup label="India"> <option value ="mumbai">Mumbai</option> <option value ="delhi">Delhi</option> </optgroup> <optgroup label="USA"> <option value ="florida">Florida</option> <option value ="newyork">New York</option> </optgroup> </select> </body> </html>
OPTION TAG

<!DOCTYPE html> <html> <head> <title>HTML option Tag</title> </head> <body> <form action="/cgi-bin/dropdown.cgi" method="post"> <select name="dropdown"> <option value="Java" selected>Maths</option> <option value="Ruby">Physics</option> </select> <input type="submit" value="Submit" /> </form> </body> </html>
OUTPUT TAG

<!DOCTYPE html> <html> <head> <title>HTML Output Tag</title> </head> <body> <form oninput="sumresult.value=parseInt(z1.value)+parseInt(z2.value)+parseInt(z3.valu e)"> <input type="range" name="z1" value="0" /> + <input type="number" name="z2" value="20" /> + <input type="number" name="z3" value="40" /><br /> The output is: <output name="sumresult"></output> </body></html>
P TAG

<!DOCTYPE html> <html> <head> <title>HTML p Tag</title> </head> <body> <p>This paragraph is defined using the HTML p tag</p> </body> </html>
PARAM TAG

<!DOCTYPE html> <html> <head> <title>HTML param Tag</title> </head> <body> <object title="Test Object." classid="java.class"> <param name="audio" value="music.wav" /> <param name="width" value="600" /> <param name="height" value="400" /> </object> </body> </html>
PLAINTEXT TAG

<PLAINTEXT><!DOCTYPE html> <html> <head> <title>HTML plaintext Tag</title> </head> <body> </body> </html>
PRE TAG

<!DOCTYPE html> <html> <head> <title>HTML pre Tag</title> </head> <body> <pre> This text is in a fixed-pitch font, and it preserves both </pre> </body> </html>
PROGRESS TAG

<!DOCTYPE html> <html> <head> <title>HTML Progress Tag</title> </head> <body> <h1>Student's Intelligence level</h1> <progress value="20" max="100"/> HTML </body> </html>
Q TAG

<!DOCTYPE html> <html> <head> <title>HTML q Tag</title> </head> <body> Here comes a short quotation: <q> here is a short quotation </q> </body> </html>
RP TAG

<!DOCTYPE html> <html> <head> <title>HTML Rp Tag</title> </head> <body> <ruby> 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> </body> </html>
RT TAG

<!DOCTYPE html> <html> <head> <title>HTML Rt Tag</title> </head> <body> <ruby> 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> </body> </html>
RUBY TAG

<!DOCTYPE html> <html> <head> HTML <title>HTML Ruby Tag</title> </head> <body> <ruby> æ˜Žæ—¥ <rp>(</rp><rt>This is it</rt><rp>)</rp> </ruby> </body> </html>
STRIKE TAG

<!DOCTYPE html> <html> <head> <title>HTML strike Tag</title> </head> <body> The HTML strike tag renders a <strike>strike</strike> through the middle of the text . </body> </html>
SCRIPT TAG

<!DOCTYPE html> <html> <head> <title>HTML script Tag</title> </head> <body> <script type="text/JavaScript"> document.write("You're visiting tutorialspoint!") </script> </body> </html>
SECTION TAG

<!DOCTYPE html> <html> <head> <title>HTML Section Tag</title> </head> <body> <section> <h1>Java</h1> HTML <h3>Inheritance</h3> <p>Inheritance defines the relationship between superclass and subclass.</p> </section> </body> </html>
SELECT TAG

<!DOCTYPE html> <html> <head> <title>HTML select Tag</title> HTML </head> <body> <form action="/cgi-bin/dropdown.cgi" method="post"> <select name="dropdown"> <option value="Data Structures" selected>Data Structures</option> <option value="Data Mining">Data Mining</option> </select> <input type="submit" value="Submit" /> </form> </body> </html>
SPACER TAG

<!DOCTYPE html> <html> <head> <title>HTML spacer Tag</title> </head> <body> Create some space <spacer type="block" width="50" /> here. </body> </html>
SMALL TAG

<!DOCTYPE html> <html> <head> <title>HTML small Tag</title> </head> <body> <h2>www.tutorialspoint.com</h2> <p><small> Simply Easy Learning</small></p> </body> </html>
SOURCE TAG

<!Doctype html> <html> <head> <title>HTML source Tag</title> </head> <body> <audio controls> <source src = "yourfile.mp3"> <p>The browser doesnot support the file</p> </audio> </body> </html>
SPAN TAG

<!DOCTYPE html> <html> <head> <title>HTML span Tag</title> </head> <body> <p>This is a paragraph <span style="color:#FF0000;"> This is a paragraph</span> This is a paragraph</p> <p><span style="color:#8866ff;"> This is another paragraph</span></p> </body> </html>
STRIKE TAG

<!DOCTYPE html> <html> <head> <title>HTML strike Tag</title> </head> <body> The HTML strike tag renders a <strike>strike</strike> through the middle of the text . </body> </html>
STRONG TAG

<!Doctype html> <html> <head> <title>HTML strong Tag</title> </head> <body> <p>This is a <strong>strong</strong> text</p> </body> </html>
STYLE TAG

<!Doctype html> <html> <head> <style type="text/css"> h1 { color:#F1F1F1 } </style> </head> <body>RITESH</body> </html>
SUB TAG

<!DOCTYPE html> <html> <head> <title>HTML sub Tag</title> </head> <body> Value of y<sub>1</sub> - y<sub>3</sub> = 17 </body> </html>
SUMMARY TAG

<!DOCTYPE html> <html> <head> <title>HTML Summary Tag</title> </head> <body> <details> <summary>Some details</summary> <p>Provide more info about the details here.</p> </details> </section> </body> </html>
SUP TAG

<!DOCTYPE html> <html> <head> <title>HTML sup Tag</title> </head> <body> Value of 5<sup>2</sup> + 3<sup>3</sup> = 52 </body> </html>
SVG(Scalable Vector Graphics) TAG

The HTML <svg> tag is used for making drawings, shapes, logos, graphics etc.

Examples: How to make a square.
<!DOCTYPE html> <html> <head> <title>HTML SVG Tag Tutorial:How to make a square</title> </head> <body><svg><rect x="50" y="50" width="10" height="10" stroke="black" fill="none"/> </svg></body></html>
If you have to change the size of the square then change the no. 20 written in width or height and run the html code.

If you have to change the colour of outline of the shape to black to red then erase the black written in stroke and write red.

And if you have to change the colour of outline to black to green then erase the black written in stroke and write green.

Like these there where many more(131) colours(or HEX codes) like:
1. AliceBlue or #F0F8FF(HEX code)
2. AntiqueWhite or #FAEBD7(HEX code)
3. Aqua or #00FFFF(HEX code)
4. Aquamarine or #7FFFD4(HEX code)
5. Azure (#F0FFFF)
6. Beige (#F5F5DC)
7. Bisque (#FFE4C4)
8. Black (#000000)
9. BlanchedAlmond (#FFEBCD)
10. Blue (#0000FF)
11. BlueViolet (#8A2BE2)
12. Brown (#A52A2A)
13. BurlyWood (#DEB887)
14. CadetBlue (#5F9EA0)
15. Chartreuse (#7FFF00)
16. Chocolate (#D2691E)
17. Coral (#FF7F50)
18. CornflowerBlue (#6495ED)
19. Cornsilk (#FFF8DC)
20. Crimson (#DC143C)
21. Cyan (#00FFFF)
22. DarkBlue (#00008B)
23. DarkCyan (#008B8B)
24. DarkGoldenRod (#B8860B)
25. DarkGray (#A9A9A9)
26. DarkGreen (#006400)
27. DarkKhaki (#BDB76B)
28. DarkMagenta (#8B008B)
29. DarkOliveGreen (#556B2F)
30. DarkOrange (#FF8C00)
31. DarkOrchid (#9932CC)
32. DarkRed (#8B0000)
33. DarkSalmon (#E9967A)
34. DarkSeaGreen (#8FBC8F)
35. DarkSlateBlue (#483D8B)
36. DarkSlateGray (#2F4F4F)
37. DarkTurquoise (#00CED1)
38. DarkViolet (#9400D3)
39. DeepPink (#FF1493)
40. DeepSkyBlue (#00BFFF)
41. DimGray (#696969)
42. DodgerBlue (#1E90FF)
43. FireBrick (#B22222)
44. FloralWhite (#FFFAF0)
45. ForestGreen (#228B22)
46. Fuchsia (#FF00FF)
47. Gainsboro (#DCDCDC)
48. GhostWhite (#F8F8FF)
49. Gold (#FFD700)
50. GoldenRod (#DAA520)
51. Gray (#808080F)
52. Green (#008000)
53. GreenYellow (#ADFF2F)
54. HoneyDew (#F0FFF0)
55. HotPink (#FF69B4)
56. IndianRed (#CD5C5C)
57. Indigo (#4B0082)
58. Ivory (#FFFFF0)
59. Khaki (#F0E68C)
60. Lavender (#E6E6FA)
61. LavenderBlush (#FFF0F5)
62. LawnGreen (#7CFC00)
63. LemonChiffon (#FFFACD)
64. LightBlue (#ADD8E6)
65. LightCoral (#F08080)
66. LightCyan (#E0FFFF)
67. LightGray (#D3D3D3)
68. LightGreen (#90EE90)
69. LightPink (#FFB6C1)
70. LightSalmon (#FFA07A)
71. LightSeaGreen (#20B2AA)
72. LightSkyBlue (#87CEFA)
73. LightSlateGray (#778899)
74. LightSteelBlue (#B0C4DE)
75. Lime (#00FF00)
76. LimeGreen (#32CD32)
77. Linen (#FAF0E6)
78. Magenta (#FF00FF)
79. Maroon (#800000)
80. MediumAquaMarine (#66CDAA)
81. MediumBlue (#0000CD)
82. MediumOrchid (#BA55D3)
83. MediumPurple (#9370DB)
84. MediumSeaGreen (#3CB371)
85. MediumSlateBlue (#7B68EE)
86. MediumSpringGreen(#00FA9A)
87. MediumTurquoise (#48D1CC)
88. MistyRose (#FFE4E1)
89. Moccasin (#FFE4B5)
90. Navy (#000080)
91. Olive (#808000)
92. OliveDrab (#6B8E23)
93. Orange (#FFA500)
94. OrangeRed (#FF4500)
95. Orchid (#DA70D6)
96. PaleGreen (#98FB98)
97. PaleTurquoise (#AFEEEE)
98. PaleVioletRed (#DB7093)
99. Peru (#CD853F)
100. Pink (#FFC0CB)
101. Plum (#DDA0DD)
102. PowderBlue (#B0E0E6)
103. Purple (#800080)
104. RebeccaPurple (#663399)
105. Red (#FF0000)
106. RosyBrown (#BC8F8F)
107. RoyalBlue (#4169E1)
108. SaddleBrown (#8B4513)
109. Salmon (#FA8072)
110. SandyBrown (#F4A460)
111. SeaGreen (#2E8B57)
112. SeaShell (#FFF5EE)
113. Sienna (#A0522D)
114. Silver (#C0C0C0)
115. SkyBlue (#87CEEB)
116. SlateBlue (#6A5ACD)
117. SlateGray (#708090)
118. Snow (#FFFAFA)
119. SpringGreen (#00FF7F)
120. SteelBlue (#4682B4)
121. Tan (#D2B48C)
122. Teal (#008080)
123. Thistle (#D8BFD8)
124. Tomato (#FF6347)
125. Turquoise (#40E0D0)
126. Violet (#EE82EE)
127. Wheat (#F5DEB3)
128. White (#FFFFFF)
129. WhiteSmoke (#F5F5F5)
130. Yellow (#FFFF00)
131. YellowGreen (#9ACD32)
  If you have to fill colour in the square. Then erase the 'fill' attribute 'none' and then write a colour name or HEX code.
  
  If you have to change the position of the shape then erase the 'c' or 'x' attribute. And write a number then run the html code.
TABLE TAG

<!DOCTYPE html> <html> <head> <title>HTML table Tag</title> HTML </head> <body> <table border="1"> <tr> <th>Team</th> <th>Ranking</th> </tr> <tr> <td>India</td> <td>1</td> </tr> <tr> <td>South Africa</td> <td>2</td> </tr> <tr> <td>Australia</td> <td>3</td> </tr> </table> </body> </html>
TBODY TAG

<!DOCTYPE html> <html> <head> <title>HTML tbody Tag</title> </head> <body> <table style="width:100%" border="1"> <thead> <tr> <td colspan="4">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan="4">This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> HTML <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> </table> </body> </html>
TD TAG

<!DOCTYPE html> <html> <head> HTML <title>HTML td Tag</title> </head> <body> <table border="1"> <tr> <th>Subject</th> <th>Topic</th> </tr> <tr> <td>Java</td> <td>Threading</td> </tr> <tr> <td>C++</td> <td>Virtual Functions</td> </tr> <tr> <td>Linux</td> <td>File Systems</td> </tr> </table> </body> </html>
TEXTAREA TAG

<!DOCTYPE html> <html> <head> <title>HTML textarea Tag Tutorial</title> </head> <body> <form action="/cgi-bin/hello_get.cgi" method="get"> Fill the Detail: <br /> <textarea rows="5" cols="50" name="description"> Enter your name </textare> </form> </body> </html>
TFOOT TAG

<!DOCTYPE html> <html> <head> <title>HTML tfoot Tag</title> </head> <body> HTML <table style="width:100%" border="1"> <thead> <tr> <td colspan="4">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan="4">This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> </table> </body> </html>
TH TAG

<!DOCTYPE html> <html> <head> <title>HTML th Tag</title> </head> <body> <table border="1"> <tr> <th>ID</th> <th>Product Details</th> </tr> <tr> <td>00L1</td> <td>i3, 500gb laptop</td> </tr> </table> </body> </html>
THEAD TAG

<!DOCTYPE html> <html> <head> <title>HTML thead Tag</title> </head> <body> HTML <table style="width:100%" border="1"> <thead> <tr> <td colspan="4">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan="4">This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> </table> </body> </html>
TIME TAG

<!Doctype html> <html> <head> <title>HTML time Tag</title> </head> <body> <p>The time is <time>12:51 pm</time></p> </body> </html>
TITLE TAG

<!DOCTYPE html> <html> <head> <title>Title comes here</title> </head> <body> <p>title tag is used for indicating the title of the HTML document. HTML document title is visible via browser’s title bar.</p> </body> </html>
TR TAG

<!DOCTYPE html> <html> <head> <title>HTML tr Tag</title> </head> <body> <table border="1"> <tr> <th>Cricketers</th> <th>Ranking</th> </tr> <tr> <td>M.S Dhoni</td> <td>1</td> </tr> <tr> <td>Yuvraj Singh</td> <td>2</td> </tr> <tr> <td>Virat Kohli</td> <td>3</td> </tr> </table> </body> </html>
TRACK TAG

<!Doctype html> <html> <head> <title>HTML source Tag</title> </head> <body> <audio controls> <source src = "yourfile.mp3"> <track src = "subtitles.vtt" kind="subtitles" srclang="en" label="English"> <p>:The browser doesnot support the file</p> </audio> </body> </html>
TT TAG

<!DOCTYPE html> <html> <head> <title>HTML tt Tag</title> </head> <body> <p>tutorialspoint</p> <tt>learning website</tt> </body> </html>
U TAG

<!DOCTYPE html> <html> <head> <title>HTML u Tag</title> </head> <body> <u>tutorialspoint.com</u> was started by <b>Mr. Mohammad Mohtashim,</b> in the year 2006. </body> </html>
UL TAG

<!DOCTYPE html> <html> <head> <title>HTML ul Tag</title> </head> <body> <p>Sports Club Games</p> <ul> <li>Cricket</li> <li>Football</li> <li>Hockey</li> <li>Badminton</li> <li>Squash</li> HTML </ul> </body> </html>
VAR TAG

<!DOCTYPE html> <html> <head> <title>HTML var Tag</title> </head> <body> <p> The equations: <var>3x</var> - <var>7z</var> = <var>8y</var> + 2 and <var>x</var> + <var>3z</var> = <var>4y</var> + 9 </p> </body> </html>
VIDEO TAG

<!DOCTYPE html> <html> <head> <title>HTML video Tag</title> </head> <body> <p>Run your first program using an Online Compiler (compileonline.com)</p><br /> <video width="500" height="300" controls> <source src="/html/compileonline.mp4" type="video/mp4"> This browser doesn't support video tag. </video> </body> </html>
WBR TAG

<!DOCTYPE html> <html> <head> <title>HTML wbr Tag</title> </head> <body> <wbr /> the browser to extend the document window beyond the size of the viewing pane and the poor user must scroll right <wbr /> </body> </html>
XMP TAG

<!DOCTYPE html> <html> <head> <title>HTML xmp Tag</title> </head> <body> HTML tags include <b> for bold text, <i> for italic text. </body> </html>
Download html tutorial pdf

HTML, CSS AND JS QUIZ

Make $50 for free by sharing ads.

HTML tutorial basics

HTML TUTORIAL BY RITESH

INTRODUCTION TO HTML LANGUAGE

All the list and meaning of 128 HTML tags

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

A

A tag

Abbr tag

ACRONYM tag

ADDRESS TAG

AREA TAG

APPLET TAG

ARTICLE TAG

ASIDE TAG

AUDIO TAG

B

B TAG

BASE TAG

BASEFONT TAG

BDO TAG

BDI TAG

BGSOUND TAG

BIG TAG

BLINK TAG

BLOCKQUOTE TAG

BODY TAG

BR TAG

BUTTON TAG

C

CANVAS TAG

CAPTION TAG

CENTER TAG

CITE TAG

CODE TAG

COL TAG

COLGROUP TAG

COMMENT TAG

D

DATALIST

DD TAG

DEL TAG

DFN

DIALOG TAG

DIR TAG

DIV TAG

DL TAG

DT TAG

E

EM TAG

EMBED TAG

F

FIELDSET TAG

FIGCAPTION

FIGURE TAG

FONT TAG