Your browser does not support JavaScript!'

HTML Tutorial For Beginners [All HTML Tags] at one Place ~ VUSs

Welcome to VUSs, as you guys know. VUSs is all about Computer Science's fundamentals and Tests Preparation.
All published articles are organized in simple, easy, and short English sentences to familiarize the students with computer science.
In that respect today's article is HTML Tutorial For Beginners [All HTML Tags] at one Place

Menu Find
Find

Today's Topic
HTML Tutorial For Beginners [All HTML Tags] at one Place


HTML Tutorial for Beginners

What is HTML?

HTML is a basic Frontend Development language which is used to build structue of a web page by using the markup symbols of HTML All the HTML <body> section tags have certain effects to display on the web browsers. However, HTML is not a programming language in sense to do logically. Because it

HTML Editor: Online HTML Editor

Tag Description In HTML5?
<!--...--> This <!-- This Is Comment --> Tag is used to add a comments to an HTML document OR in the source Page. The all contents which are placed between opning and closing tag of comment are invisible to the users AND Web Browseres. However, Comments can be viewed in Source code by selecting View Page Souece HTML Comment  
<!doctype> All "HTML" documents must start with a <!doctype> declaration. It's used to specify the Document type. It tells the type of the document to the visitor's browser.
eg: <!doctype HTML> reffers to "html Document"
Html DocType Remember: DOCTYPE declaration is NOT case sensitive. 		 
<a> Ancher Tag is used to insert an Link into a web Page. This link can be internal OR External. A user can shift from one page to another using HyperLinks. (HyperLink has different attribute as href) A Tag OR Href links example:
<a href="https://VU-Ss.Blogspot.Com">VU Study Solution</a> Image also can be used as a Ancher ex: <a href="https://VU-Ss.Blogspot.Com"> <img src="Image.jpg"/> </a>
<head>

Output:     
VU Study Solution
This yellow Box an Example of the Image Link
 
<abbr> Describes an abbreviation (acronyms). HTML <abbr> Tag (Abbr) represents an abbreviation or acronym, An "Abbr" element is used with a title attribute to associate a complete text explanation of an Abbreviation. But title attribute in the Abbr is completely optional, it can provide an expansion or description for the abbreviation.
ex: <abbr title="VU Study Solution">VU-SS</abbr> 		 
<acronym> An Acronyms HTML Tag allows the users to specify a sequence of characters OR Words that compose an acronym or abbreviation for a word. But in modern Web development it can't be used because Acronmy is deprecated in HTML5 || it's not Not Supported in HTML5. However it's work is similarly like Abbr <abbr title="VU Study Solution">VU-SS</abbr> REMOVE
<address> HTML Address TagThe <address> is used to bind the contact OR Living Address Imformation for the author/Person/Client in a document or in an Article.
<address> </address> Written by <a href="mailto:EMail@example.com">Author</a>.
Visit us at: <a href="https://Vu-Ss.blogspot.com">VUSs</a>.
FSD, Punjab
Pakistan

Output:     
Writer : Author
Visit us at: VU Study Solution
FSD, Punjab
Pakistan
 		 
<applet> Applet Tag is used to Embed an applet in HTML document. But it's not supported in HTML5. It's provided in HTML4, but now in HTML5 it is deprecated.
However, you can use other Tags Instead as.

<video>  <!-- To embed a Video Media File -->
<audio>  <!-- To embed a Audio Media File -->
<img>    <!-- To embed a Graphic such as images -->
<iframe> <!-- To embed a document is better to use iframe -->

 REMOVED
<area> HTML Area Tag is used to specify an Area inside an Image map this area is a clickable portion of the Map. AreaTag always used inside of map  
<article> Htmal Article Tag is a new Markup tag in the latest version of "HTML" which is HTML5. This can be used to contain blog "Posts", "Comment Boxes" OR It can contains the self contained content. NEW
<aside> The aside Describes and contains aside information about the realted content. In simple words we can say that, Aside contains aside content from main content. Mostly sidebars are represented by the use of sidebar. NEW
<audio> Html Audio tag is used to Specify an audio content. The AUDIO tag can be used to EMBED AND place an audio online streaming within the HTML web page. ex: <audio src="https://Vu-Ss.blogspot.com/Audio-File.Mp3"/> <audio src="https://Vu-Ss.blogspot.com/Audio-File.Mp3"/>
Output:     
AND Some Audio Controls
NEW
<b> HTML b Tag is used to make the text bolder. However, now you can use <Strong> to make it bolder.  
<base> Base Tag It is used to set a base URL for all the relative links OR URLS within a document  
<basefont> BaseFont is used to set default font color, size, face for HTML elements in HTML pages. But it is not supported in "The latest version of HTML" REMOVED
<bb> bb markup Tag is used to invoke a browser OR clint absed commands, that command are invoked as per client OR Viewers Action. REMOVED From HTML5
<bdo> bdo is the short form of Bidirectional Override. You can use OBD Tag to override on the current direction of the content OR text. Useful for languages that use right to left text. Specific direction of text display  
<big> big Tag in HTML is used to make font size larger as one level than its surrounding content. But in the latest version of HTML it is not supported. Alternatives to Big Tag:
<h1>This is H1 Heading! restyle with CSS (Font Size 15px)</h1>
<style> h1{ font-size:15px; } </style>
Output:     
This is H1 Heading! restyle with CSS (Font Size 15px) 		REMOVED
<blockquote> It specifies a long quotation from an external web page || source.  
<body> HTML body Tag is a main section in a HTML page. It contains all the content which are visible to the Users AND Visitors.  
<br /> br tag is used to specific a single line break. As name emplies br as short for break. BR is a self closing tag <br/>  
<button> Button Tag in HTML OR HTML5 is a press && clickable button to make the event or action complete.  
<canvas> Canvas Tag is used to specifies a graphics space on HTML web Page NEW
<caption> Caption Tag is used to define a caption in a tabe OR as well as for images caption  
<center> Center Tagspecifies a text on teh web page to center. But it is not supported in html5. <p id="pInCenter">I'm in the Center</p>

<style> #pInCenter{ text-align:center; } </style>

Output:

I'm in the Center

 		REMOVED
<cite> Cite tag is used to pecifies a text citation OR to define the title of the book, website, etc.  
<code> Code Tag specifies a snipt of computer code as a text  
<col> col is used to specifie a column within a <colgroup> tag in table  
<colgroup> colgroup Is used to defines a group of one || more columns inside a table  
<command> Command Elment define a command button in an HTML document NEW
<datalist> DataList Is used to define a list of predefined Data for input option <input> tag NEW
<dd> dd is used to set a definition description in a definition list  
<del> del tag is used to make a text deleted in web document without actually deleting it. <del>Is am i deleted Now </del>

Output:      I'm deleted Now 		 
<details> Details Tag to hide or show aditional details as per user action <details>Detail is Dislayed Now! </details>

Output:     
Detail is Dislayed Now!
NEW
<dfn> DFN defines a definition, It is used to define a term which is defined within a sentence OR a phrase  
<dialog> dialog defines a chat, conversation box OR or other interactive components between different users. NEW/ REMOVE
<dir> dir is used to define a directory list in HTNL files OR directory list of files. but it is not supported in HTML5 REMOVED
<div> div is used to define a division of HTML Pages  
<dl> dl Define a definition OR description list in </dd>  
<dt> DT tag is used to define an exact definition team OR title in </dd>  
<em> em tag make the text in emphasize format It is an alternative to </i> Tag  
<embed> embed is used to embed an external application OR meda file in the HTML pages. New in HTML5 NEW
<fieldset> FieldsetIt is used to group the different related tags/elements within a form Element.  
<figcaption> Figcaption Is used to add a caption text corresponding with a <figure> element NEW
<figure> FigureRepresents self-contained content corresponding with a <figcaption> element <figure>
<img src="img/image-source1.png">
<figcaption> This a caption about the Image </figcaption>

</figure>

Output:     


This a caption about the Image 		NEW
<font> font defines font size, font face and font color for the selected text. But it not supported in HTML5 Alternatives to Font Tag:
Alternatives to Font Tag is CSS font size,color,weight etc are cited below.
<span>Font Tags Alternative</span>
<style> span{ font-size:15px; font-color:chartreuse; font-weight:bolder ; } </style>

Output:      Font Tags Alternative 		REMOVD
<footer> Footer Tag is used to define certain section for the footer of web page. It contains all the details and information about the author, ContactUs, Sitemap, etc. it is the bottom of the Page. NEW
<form> Form Tag Defines a form that having interactive input controls to submit informatio to a server OR to the page.  
<h1> to <h6> Defines a Headings level from 1 to 6 different sizes. H1 to H6:
H1 to H6 H represent Heading.
<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
<h4>This is H4</h4>
<h5>This is H5</h5>
<h6>This is H6</h6>
Output:     
This is H1
This is H2
This is H3
This is H4
This is H5
This is H6
 		 
<head> Head tag contains specific information about the web page. Head contents are not visible to the users, All styles, JavaScrips, and meta tags are included into head section of HTML document. Head tag example:
<head>

<style> CSS styles</style>
<script> Javascript</script>
<meta name="NAME" content="CONTENTS"/>

</head>
<head>
Output:     
Head contents are invisible to the Browsers
 		 
<header> Header Tag is used to defines a container that hold introductory content or navigation links. Header tag example:
<header>
<nav>
<ul>
<li>
<a href="/">Root of the Domain</a>
</li>
</ul>
</nav>
</header>
<head>

Output:     
 		NEW
<hr /> Hr TagRepresent a thematic break between paragraph-level tags. It is typically draw horizontal line. HR tag example:
<hr/>

Output:     
 		 
<html> HTML TgaIs the first HTML tage which is used to define a document is a HTML markup language  
<i> i Tag is used to defines a italic format text i tag example:
<i>italic</i>

Output:     
italic 		 
<Iframe> Iframe Tag is used to embedded an external content such as pdf, Audio, Video etc into current web document. Iframe tag example:
<iframe src="https://youtube/embed/ID" width="200" height="80"></iframe>
Output:     

 
<img> img Tag is used to insert image into a web page. img tag example:
<img src="source of the image"/>
Output:     

 
<input> input Tag is used to define && get information from the users input tag example:
<input type="text"/>
Output:     
 
<kbd> kbd is used to identify text that are represents keyboard input it is different from form element input.  
<keygen> keygen tag is used to to generate certificate OR Used for authentication with a security certificate to authenticate the services. NEW/ REMOVE
<label> Used to caption a text label with a form <input> element. label tag example:
<label>
First Name:
<input type="text" name="FirstName:">
</label>

Output:     
 
<legend> legend Tagis used to add a title onto a group of form elements that are grouped into a <fieldset> tag. legend tag example:
<fieldset>
<legend>
I'm a Legend
</legend>
</fieldset>

Output:     
I'm a Legend
 		 
<li> li TagDefine a list items either an ordered list || An Unordered list items.  
<link> link TagUsed for linking resources such as external stylesheets into HTML document. Typically seen between <head> </head> referring to an external CSS styleSheet. LINK tag example:
<link rel="stylesheet" type="text/css" href="//source.css"/>

Output:      Styles of the Page 		 
<map> Map Tag defines an clickable are for an image map.  
<mark> mark Tag is used to highlight OR (mark) a specific text. mark tag example:
<mark>Hey, It's Marked text</mark>

Output:      Hey, It's Marked text 		NEW
<menu> menu Tag is used to display or creating various kinds of unordered list of items/menu.  
<meta> meta Tags are used to provide some aditional information about the web page OR metadata about the data. Some meta tags are very important is SEO  
<meter> Meter Tag is used to measure OR represent data when the minimum and maximum range is given for example 47%. meter tag example:
<meter value="1"></meter>

Output:      		NEW
<nav> nav Tag defines a group of navigation links. Nav AND li tag example:
<nav>
<ul>
<li>
<a href="/">VU Study Solutions</a>
</li>
<li>
<a href="/p/learn-html.html">HTML Tutorials</a>
</li>
<li>
<a href="/p/learn-css.html">CSS Tutorials</a>
</li>
<li>
<a href="/p/learn-php.html">PHP Tutorials</a>
</li>
</ul>
</nav>

<head>

Output:     
 		NEW
<noscript> noscript Tag is used to invoke if the browser does not support or have blocked JavaScript.  
<ol> Defines an ordered list of items. noscript tag example:
<ol type="1">
<li>
First list item
</li>
<li>
Second list item
</li>
<li>
Third list item
</li></ol>
Output:     
  1. First list item
  2. Second list item
  3. Third list item
 		 
<optgroup> optgroup is used to grouping objects. optgroup tag example:
<optgroup>
   <option>
     Option 1
   </option>
   <option>
     Option 2
   </option>
</optgroup>

Output:     
 		 
<option> option Tag is used to represent an option within thw <select>,optgroup> and <datalist> element. Option tag example:
<optgroup>/<select>/<datalist>
   <option>
     Option 1
   </option>
   <option>
     Option 2
   </option>
</optgroup>/</select>/</datalist>

Output:     
 		 
<output> output Tag is used to representing the result of a calculation. NEW
<p> p Tag is used to represents a paragraph OR text in an article. Paragraph tag example:
<p> It's a Paragraph </p>

Output:     

It's a Paragraph

 		 
<param> param Tag provides parameters when parameters are needed to be passed to an embedded object  
<pre> pre Tag is used to display the text as it is || preformatted. Pre tag example:
<pre> It's a preformatted

                                   Text
</pre>

Output:     
It's a preformatted
                               Text
 
<progress> Progress Tag is used to represents a Progress bar of the progress. progress tag example:
<progress value="50" max="100">

Output:     
50% Process complete 		NEW
<q> S Tag is used to represents a short quotation.  
<rp> rp TagUsed to provide parentheses NEW
<rt> rt Tag define the ruby text of ruby annotation. NEW
<ruby> ruby Tag represents a ruby annotation. NEW
<s> S Tag is used to marking a line one the text to show that it is not longer relevant, applicable, or accurate. This will display in a strikethrough style. Strikethrough style example It's a Strikethrough style  
<samp> samp represents that, this is a dummy data OR should be interpreted as sample output from a particular computer system OR an computer program.  
<script> script Tag is used to embed OR defines client-side JavaScript on a web page. Script tag example:
<script type="text/javascript">
Javascript goes here....
</script>

Output:     
Invisible to the users. 		 
<section> Section Tag Can be Used to divide a page into number of several section. NEW
<select> select Tag is used to to create a drop-down list. Select tag example:
<select>
<option>
I want to learn HTML
</option>
<option>
I want to learn CSS
</option>
</select>

Output:     
 		 
<small> Small Tag is used to makes the text smaller.  
<span> span Tag is used to apply styles to an inline elements.  
<strong> Strong Tag display a text in a strong greater format  
<style> Used to add CSS style to an HTML document. <p id="pInCenter">I'm in the Center</p>

<style> #pInCenter{ text-align:center; } </style>

Output:

I'm in the Center

 		 
<table> table TagUsed to defines a table in an HTML document.  
<thead> Theadis used to define a header content section in a table. It contains header information of the table which is shown at the top of the table.  
<tbody> Tbody Tag contains the table rows. In other wors it is the body of the table  
<th> th Tag is used to create header of a cell in HTML table.  
<tr> tr Tag is used to define a row in a table.  
<td> td Tag is used to create data cell in a table.  
<tfoot> tFoot is used to add a footer to a table  
Complete Table Example 
<table>
   <thead>
     <tr>
        <th>
          Table Header "TH" Inside of Thead
        </th>
     </tr>
   </thead>

<tfoot>
   <tr>
     <th>
        Table Foot
     </th>
   </tr>
</tfoot>

<tbody>
     <tr>
       <td>
Table Body Content 1
       </td>
       <td>
Table Body Content 2
       </td>
     </tr>
     <tr>
       <td>
Table Body Content 1
       </td>
       <td>
Table Body Content 2
       </td>
      </tr>
</tbody>
</table>
 
<textarea> TextArea Tag textare tag is used to create an area for multi-line text to input. <textarea> </textarea>


Output:
 		 
<time> time HTML5 Tag represents either date & time in the HTML page. NEW
<title> title Tag is used to provide a title to the HTML pages. Title also can be used as an attribute to an HTML Tag or elements. Title tag example:
<title>VU Study Solution</title>
<p title="This is a Paragraph"> Mouse Hover</p>

Output:     
Title Tag's Content on Browser's Tab:
VU Study Solution x


Mouse Hover 		 
<u> U Tag is used to make the selected text underlined.  
<ul> UL Tag is used to defines an unordered list item. Nav AND li tag example:
<nav>
<ul>
<li>
<a href="/">VU Study Solutions</a>
</li>
<li>
<a href="/p/learn-html.html">HTML Tutorials</a>
</li>
<li>
<a href="/p/learn-css.html">CSS Tutorials</a>
</li>
<li>
<a href="/p/learn-php.html">PHP Tutorials</a>
</li>
</ul>
</nav>

<head>

Output:     
 		 
<var> Var Tag is used to defines a variable within the content of an HTML document.  
<video> video Tag is used to embed media content such as a Mp4, Avi, flv videos into an HTNL document. NEW
<wbr> Defines a word break. NEW

Post a Comment

0 Comments

^