100+ A to Z HTML Tags : A Complete HTML Learning Guide For Beginners

HTML

What is HTML?

HTML, or HyperText Markup Language, is the foundational language of the web. It’s what makes up every webpage and it is the structure behind the web. It’s a simple, text-based coding language used to structure content on the web. HTML uses “tags” to format and organize text, images, links, and other multimedia, so web browsers can interpret and display content correctly.

HTML Elements

Everything between the starting and ending tags is included in the HTML element. Consequently, an HTML document is made up of a series of tags. Understanding every HTML tag and its associated properties in detail is crucial to becoming an expert in HTML. In this HTML learning program of MAT IT Solutions, we divide the lessons into two sections: one focusing on all tags and the other on all attributes. In this first section, you will discover how to make effective use of every HTML tag.

What We Need

We need a code editor like VsCode or Notepad++ to write code and a browser to view the output of the code. You can read our article about Code Editor.

HTML File Format

Every HTML file ends with .html or .htm

HTML Tags

1.HTML Basic Tags

All HTML documents must begin with a document type declaration: <!DOCTYPE html>.

There also need to contain the basic HTML starting tag <html> and the ending tag </html>.

An HTML document also uses two other necessary tags: <head></head> and <body></body>.

The <head> </head> section contains the document’s metadata, and the visible content is between the <body> and </body> tags.

The <body> tags contain all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. There can only be one <body> element in an HTML document.

Example Code:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

2. title

<title> tag is used to define a title for the document

Example Code:

<head>

<title>MAT IT Solutions</title>

</head>

3. meta

The <meta> tag specifies an HTML document’s metadata. The page will not display metadata. Search engines, browsers, and other web services all use metadata.

Example Code:

<head>

</head>

4. base

The <base> tag is used to define the primary target URL for all relative URLs within a webpage.

It is essential for the <base> tag to include at least one of the attributes: href or target, or it may contain both.

Furthermore, it is important to note that a document can contain only one <base> tag.

Example Code:

<head>

</head>

5. style

The <style> tag specifies style information for a single HTML page:

Example Code:

<head>

<style>

body {background-color: blue;}

</style>

</head>

6. link

The <link> tag connects the current document with an external resource. The main purpose of it is to refer to external style sheets.

Example Code:

<head>

</head>

7. Headings h1 to h6

The <h1> to <h6> tags are used to show HTML headings, which may be titles or subtitles on a page.

The most important heading is written by <h1>. The least important heading is written by <h6>.

<h1> </h1> is used for the text with font-size: 2em,

<h2></h2> is used for the text with font-size: 1.5em,

<h3></h3> is used for the text with font-size: 1.17em,

<h4></h4> is used for the text with font-size: 1em,

<h5></h5> is used for the text with font-size: 0.83em,

<h6></h6> is used for the text with font-size: 0.67em

Example Code:

<head>

<title>MAT IT Solutions</title>

</head>

<body>

<h1>MAT IT Solutions</h1>

<h2>MAT IT Solutions</h2>

<h3>MAT IT Solutions</h3>

<h4>MAT IT Solutions</h4>

<h5>MAT IT Solutions</h5>

<h6>MAT IT Solutions</h6>

</body>

8. p

The <p> tag is used to define a paragraph

Example Code:

<head>

<title>MAT IT Solutions</title>

</head>

<body>

<h1>MAT IT Solutions</h1>

<p>MAT IT Solutions offers unparalleled IT solutions for any problem. With expertise in the digital landscape, we are committed to helping businesses navigate and succeed in the ever-changing online environment.</p>

</body>

9. a

The <a> tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

By default, links will 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

Example Code:

<body>

<a href=”https://www.matitsolutions.com”>Visit MATITSolutions.com</a>

</body>

10. img

The <img> tag is used to show an image in an HTML page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

src – Specifies the path to the image

alt – Specifies an alternate text for the image, if the image for some reason cannot be displayed

Example Code:

<body>

</body>

11. br

The <br> tag inserts a single line break in a html document.

The <br> tag is useful for writing addresses or poems.

The <br> tag is an empty tag which means that it has no end tag.

Example Code:

<head>

<title>MAT IT Solutions</title>

</head>

<body>

<h1>MAT IT Solutions</h1>

<p>MAT IT Solutions offers unparalleled IT solutions for any problem. With expertise in the digital landscape,<br> we are committed to helping businesses navigate and succeed in the ever-changing online environment.</p>

</body>

12. hr

The <hr> tag is used to define a thematic change in the content

Example Code:

<head>

<title>MAT IT Solutions</title>

</head>

<body>

<h1>MAT IT Solutions</h1>

</body>

13.Comment

The <!–.–> tag is used to define a comment

Example Code:

<head>

<title>MAT IT Solutions</title>

</head>

<body>

<h1>MAT IT Solutions</h1>

<!–This is a comment. –>

<!–

function displayMsg() {

alert(“Hello World!”)

}

//–>

</body>

14. abbr

The <abbr> tag is used to define an abbreviation or an acronym, like “HTML”, “CSS”, “WHO.”, “UNDP”, “UN”, “ATM”.

Example Code:

<body>

<h1>The abbr element</h1>

<p><abbr title=”Cascading Style Sheets”>CSS</abbr> is a language that describes the style of an HTML document.</p>

</body>

15. address

The <address> tag is used to define the contact information for the author/owner of a document or an article. The contact information can be an email address, URL, physical address, phone number, social media handle, etc.

Example Code:

<body>

<h1>MAT IT Solutions</h1>

Visit us at: www.matitsolutions.com<br>

Box 564, Disneyland<br>

USA

</address>

</body>

16. b

The <b> tag is used to show bold text.

Example Code:

<body>

<p>This is normal text – <b>and this is bold text</b>.</p>

</body>

17. strong

The <strong> tag is used to show text with strong importance. Text inside <strong>-</strong> is typically displayed in bold.

Example Code:

<body>

<p>This text is normal.</p>

<p><strong>This text is important!</strong></p>

</body>

18. small

The <small> tag is used to show smaller text.

Example Code:

<body>

<p>This is some normal text.</p>

<p><small>This is some smaller text.</small></p>

</body>

19. em

The <em> tag is used to show emphasized text that is typically displayed in italic.

Example Code:

<body>

<h1>The em element</h1>

<p>You <em>have</em> to hurry up!</p>

<p>We <em>cannot</em> live like this.</p>

</body>

20. i

The <i> tag is used to show a part of text in an alternate mood. The content inside <i>-</i> is typically displayed in italic.

Example Code:

<body>

<h1>The i element</h1>

<p><i>Lorem ipsum</i> is the most popular filler text in history.</p>

<p>The <i>RMS Titanic</i>, a luxury steamship, sank on April 15, 1912 after striking an iceberg.</p>

</body>

21. cite

The <cite> tag is used to define the title of a creative work like a song, a book, a poem, a movie, a painting, a sculpture, etc.

Note: A person’s name is not the title of a work and the text in the <cite> element usually renders in italic.

Example Code:

<body>

<h1>The cite element</h1>

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

</body>

22. bdi

The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it.

This element is useful for embedding user-generated content with an unknown text direction and it BDI stands for Bi-Directional Isolation.

Example Code:

<body>

<h1>The bdi element</h1>

<ul>

<li>User <bdi>hrefs</bdi>: 60 points</li>

<li>User <bdi>jdoe</bdi>: 80 points</li>

<li>User <bdi>إيان</bdi>: 90 points</li>

</ul>

</body>

23. bdo

The <bdo> tag is used to override the current text direction. It stands for Bi-Directional Override.

Example Code:

<body>

<h1>The bdo element</h1>

</body>

24. blockquote

The <blockquote> tag is used to specify a section that is quoted from another source.

Example Code:

<body>

<h1>The blockquote element</h1>

<p>Here is a quote from WWF’s website:</p>

<blockquote>

WWF works in 100 countries and is supported by 1.2 million members in the United States.

</blockquote>

</body>

25. q

The <q> tag is used to show a short quotation. <q> tag show the text within quotation marks .

Example Code:

<body>

<h1>The <q>q </q> element</h1>

</body>

26. code

The <code> tag is used to define a piece of coding language.

Example Code:

<body>

<h1>The code element</h1>

<p> <code>button</code> tag defines a clickable button. & <code>background-color</code> property defines the background color in a HTML document.</p>

</body>

27. kbd

The <kbd> tag is used to show keyboard input.

Example Code:

<body>

<h1>The kbd element</h1>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text </p>

</body>

28. samp

The <samp> tag is used to show output from a computer program.

Example Code:

<body>

<h1>The samp element</h1>

<p>Message from my computer:</p>

<p><samp>File not found.<br>Press F1 to continue</samp></p>

</body>

29. del

The <del> tag is used to define text that has been line through deleted text from a document.

Example Code:

<body>

<h1>The del element</h1>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body>

30. s

The <s> tag is used to show text that is no longer correct, accurate or relevant. The <s> tag display text with a line through it. The <s> tag should not be used to define deleted text in a document.

Example Code:

<body>

<h1>The s element</h1>

<p><s>Only 50 tickets left!</s></p>

<p>SOLD OUT!</p>

</body>

31. u

The <u> tag represents some text that is unarticulated and styled differently from normal text with underline. Avoid using the <u> element where it could be confused for a hyperlink!

Example Code:

<body>

<h1>The u element</h1>

<p>This is some <u>mispeled</u> text.</p>

</body>

32. ins

The <ins> tag is used to show an underlined inserted text into a document.

Example Code:

<body>

<h1>The ins element</h1>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body>

33. mark

The <mark> tag is used to show text in marked or highlighted format with yellow color.

Example Code:

<body>

<h1>The mark element</h1>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>

34. dfn

The <dfn> tag is used to specify a term that is going to be defined within the content.

Example Code:

<body>

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

</body>

35. meter

The <meter> tag is used to show a scalar measurement within a known range, or a fractional value. <meter> tag should not be used to indicate progress.

Examples: Disk usage, the relevance of a query result, etc.

Example Code:

<body>

<p>The meter element is used to display a gauge:</p>

<label for=”disk_c”>Disk usage C:</label>

<meter id=”disk_c” value=”2″ min=”0″ max=”10″>2 out of 10</meter><br>

<label for=”disk_d”>Disk usage D:</label>

<meter id=”disk_d” value=”0.6″>60%</meter>

</body>

36. progress

The <progress> tag is used to show the completion progress of a task.

Example Code:

<body>

<h1>The progress element</h1>

<label for=”file”>Downloading progress:</label>

<progress id=”file” value=”32″ max=”100″> 32% </progress>

</body>

37. pre

The <pre> tag is used to show preformatted text.

Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

Example Code:

<body>

<h1>The pre element</h1>

<pre>

Text in a pre element is displayed in a fixed-width

font, and it preserves both spaces and line breaks

</pre>

</body>

38. sub

The <sub> tag is used to show subscript text that appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.

Example Code:

<body>

<h1>The sub and sup elements</h1>

<p>This text contains <sub>subscript</sub> text.</p>

</body>

39. sup

The <sup> tag is used to show superscript text that appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1].

Example Code:

<body>

<p>This text contains <sub>subscript</sub> text.</p>

<p>This text contains <sup>superscript</sup> text.</p>

</body>

40. time

The <time> tag defines a specific time (or datetime).

The datetime attribute of this element is used translate the time into a machine-readable format so that browsers can offer to add date reminders through the user’s calendar, and search engines can produce smarter search results.

Example Code:

<body>

<h1>The time element</h1>

<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>

<p>I have a date on <time datetime=”2008-02-14 20:00″>Valentines day</time>.</p>

</body>

41. var

The <var> tag is used to show a variable in programming or in a mathematical expression. Text inside <var>-</var> tag is typically displayed in italic.

Example Code:

<body>

<h1>The var element</h1>

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>

</body>

42. wbr

The <wbr> (Word Break Opportunity) tag is used When a word is too long, the browser might break it at the wrong place. <wbr> tag add word break opportunities.

Example Code:

<body>

<p>Try to shrink the browser window, to view how the very long word in

the paragraph below will break:</p>

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>

</body>

43. table

The <table> tag is used to show an HTML table.

An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements. There may also include <caption>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.

44. caption

The <caption> tag is used to show caption of a table. The <caption> tag must be inserted immediately after the <table> tag.

45. tr

The <tr> tag is used to show a row in an HTML table.

46. th

The <th> tag is used to show a header cell in an HTML table. The text in <th> elements are bold and centered by default.

47. td

The <td> tag is used to show a standard data cell in an HTML table.

48. colgroup

The <colgroup> tag specifies a group of one or more columns in a table for formatting. This tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

49. col

Specifies column properties for each column within a <colgroup> element

50. thead

The <thead> tag is used to group header content in an HTML table. This tag is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer).

51. tbody

The <tbody> tag is used to group the body content in an HTML table.

52. tfoot

The <tfoot> tag is used to group footer content in an HTML table.

Example Code:

<body>

<table>

<caption>Monthly savings</caption>

<colgroup>

<col span=”2″ style=”background-color:red”>

<col style=”background-color:yellow”>

</colgroup>

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tbody>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$80</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>Sum</td>

<td>$180</td>

</tr>

</tfoot>

</table>

</body>

53. nav

The <nav> tag is used to show a set of navigation links. The <nav> element is intended only for major blocks of navigation links.

Example Code:

<body>

<h1>The nav element</h1>

<nav>

<a href=”/html/”>HTML</a> |

<a href=”/css/”>CSS</a> |

<a href=”/js/”>JavaScript</a> |

<a href=”/python/”>Python</a>

</nav>

</body>

54. menu

The <menu> tag is used to create menu items. The <menu> tag shows an unordered list of content together with the <li> tag.

Example Code:

<body>

<menu>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</menu>

</body>

55. li

The <li> tag is used to show a list item. The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).

The list items <li> is displayed with bullet points In <ul> and <menu> & In <ol>, the list items <li> is displayed with numbers or letters.

Example Code:

<body>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

56. ul

The <ul> tag is used to create an unordered (bulleted) list with the list item <li> tag.

Example Code:

<body>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

57. ol

The <ul> tag is used to create an ordered list with the list item <li> tag. An ordered list can be numerical or alphabetical.

Example Code:

<body>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

<ol start=”50″>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

58. button

The <button> tag is used to show a clickable button.

Example Code:

<body>

<button type=”button” onclick=”alert(‘Hello world!’)”>Click Me!</button>

</body>

59. data

The <data> tag is used to add a machine-readable translation of a given content. This element provides both a machine-readable value for data processors, and a human-readable value for rendering in a browser.

Example Code:

<body>

<p>The following example displays product names but also associates each name with a product number:</p>

<ul>

<li><data value=”21053″>Cherry Tomato</data></li>

<li><data value=”21054″>Beef Tomato</data></li>

<li><data value=”21055″>Snack Tomato</data></li>

</ul>

</body>

60. dl

The <dl> tag is used to create a description list. This <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).

61. dt

The <dt> tag is used to show a term/name in a description list.

62. dd

The <dd> tag is used to describe a term/name in a description list.

Example Code of dl, dt, and dd:

<body>

<p>These three elements are used to create a description list:</p>

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

</body>

63. form

The <form> tag is used to create a HTML form for user input. This <form> tag can contain one or more of the following form elements:

64. input

The <input> tag specifies an input field where the user can enter data.

65. textarea

The <textarea> tag is used to collect a multi-line text input from user. It is used in a form, to collect user inputs like comments or reviews.

66. select

The <select> tag is used to create a drop-down list in a form to collect user input.

67. option

The <option> tag is used to show option select from a drop-down list.

68. optgroup

The <optgroup> tag is used to create group related options in a drop-down list.

69. fieldset

The <fieldset> tag is used to draws a box around the group related elements in a form.

70 legend

The <legend> tag is used to show a caption for the <fieldset> element.

71. datalist

The <datalist> tag is used to show a list of pre-defined options for an <input> element.

72. label

The <label> tag is used to show a label for these elements:<input>, <meter>, <progress>, <select>, <textarea>

Example Code for a form :

<!DOCTYPE html>

<html>

<body>

<h2>HTML Forms</h2>

<form action=”/action_page.php”>

<fieldset>

<legend>Personalia:</legend>

<label for=”fname”>First name:</label>

<input type=”text” id=”fname” name=”fname”><br><br>

<label for=”lname”>Last name:</label>

<input type=”text” id=”lname” name=”lname”><br><br>

<label for=”email”>Email:</label>

<input type=”email” id=”email” name=”email”><br><br>

<label for=”birthday”>Birthday:</label>

<input type=”date” id=”birthday” name=”birthday”><br><br>

<input type=”submit” value=”Submit”>

</fieldset>

<fieldset>

<legend>Cars</legend>

<select id=”cars”>

<option value=”volvo”>Volvo</option>

<option value=”saab”>Saab</option>

<option value=”opel”>Opel</option>

<option value=”audi”>Audi</option>

</select>

<input type=”submit” value=”Submit”>

</fieldset>

<fieldset>

<legend>Browser:</legend>

<label for=”browser”>Choose your browser from the list:</label>

<input list=”browsers” name=”browser” id=”browser”>

<datalist id=”browsers”>

<option value=”Edge”>

<option value=”Firefox”>

<option value=”Chrome”>

<option value=”Opera”>

<option value=”Safari”>

</datalist>

<input type=”submit”>

</fieldset>

<fieldset>

<legend>Language:</legend>

<input type=”radio” id=”html” name=”fav_language” value=”HTML”>

<label for=”html”>HTML</label><br>

<input type=”radio” id=”css” name=”fav_language” value=”CSS”>

<label for=”css”>CSS</label><br>

<input type=”radio” id=”javascript” name=”fav_language” value=”JavaScript”>

<label for=”javascript”>JavaScript</label><br><br>

<input type=”submit” value=”Submit”>

</fieldset>

<fieldset>

<legend>I Have</legend>

<input type=”checkbox” id=”vehicle1″ name=”vehicle1″ value=”Bike”>

<label for=”vehicle1″> I have a bike</label><br>

<input type=”checkbox” id=”vehicle2″ name=”vehicle2″ value=”Car”>

<label for=”vehicle2″> I have a car</label><br>

<input type=”checkbox” id=”vehicle3″ name=”vehicle3″ value=”Boat”>

<label for=”vehicle3″> I have a boat</label><br><br>

<input type=”submit” value=”Submit”>

</fieldset>

</form>

</body>

</html>

73. script

The <script> tag is used to embed a client-side script (JavaScript). The <script> element either contains scripting statements, or it points to an external script file through the src attribute.

Example Code:

<body>

<p id=”demo”></p>

<script>

document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;

</script>

</body>

74. noscript

The <noscript> tag is used to show an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn’t support script.

Example Code:

<body>

<script>

document.write(“Hello World!”)

</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

</body>

75. output

The <output> tag is used to represent the result of a calculation.

Example Code:

<body>

<form oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>

<input type=”range” id=”a” value=”50″>

+<input type=”number” id=”b” value=”25″>

=<output name=”x” for=”a b”></output>

</form>

</body>

76. source

The <source> tag is used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture>.

Example Code:

<body>

<picture>

<source media=”(min-width:650px)” srcset=”img_pink_flowers.jpg”>

<source media=”(min-width:465px)” srcset=”img_white_flower.jpg”>

<img src=”img_orange_flowers.jpg” alt=”Flowers” style=”width:auto;”>

</picture>

<audio controls>

<source src=”horse.ogg” type=”audio/ogg”>

<source src=”horse.mp3″ type=”audio/mpeg”>

Your browser does not support the audio element.

</audio>

<video width=”320″ height=”240″ controls>

<source src=”movie.mp4″ type=”video/mp4″>

<source src=”movie.ogg” type=”video/ogg”>

Your browser does not support the video tag.

</video>

</body>

77. audio

The <audio> tag is used to embed sound content in a document, such as music or other audio streams. This <audio> tag contains one or more <source> tags with different audio sources.

Example Code:

<body>

<audio controls>

<source src=”horse.ogg” type=”audio/ogg”>

<source src=”horse.mp3″ type=”audio/mpeg”>

Your browser does not support the audio element.

</audio>

</body>

78. video

The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.

Example Code:

<body>

<video width=”320″ height=”240″ controls>

<source src=”movie.mp4″ type=”video/mp4″>

<source src=”movie.ogg” type=”video/ogg”>

Your browser does not support the video tag.

</video>

</body>

79. picture

The <picture> tag is used to show responsive photo for different devices.This <picture> tag contains two tags: one or more <source> tags and one <img> tag.

Example Code:

<body>

<picture>

<source media=”(min-width:650px)” srcset=”img_pink_flowers.jpg”>

<source media=”(min-width:465px)” srcset=”img_white_flower.jpg”>

<img src=”img_orange_flowers.jpg” alt=”Flowers” style=”width:auto;”>

</picture>

</body>

80. svg

The <svg> tag is used to define a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Example Code:

<body>

<h1>The Circle</h1>

<svg width=”100″ height=”100″>

<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />

</svg>

<h1>The Rectangle</h1>

<svg width=”400″ height=”100″>

<rect width=”400″ height=”100″ style=”fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)” />

</svg>

<h1>The Square</h1>

<svg width=”400″ height=”180″>

<rect x=”50″ y=”20″ rx=”20″ ry=”20″ width=”150″ height=”150″ style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″ />

</svg>

<h1>The Polygon</h1>

<svg width=”300″ height=”200″>

<polygon points=”100,10 40,198 190,78 10,78 160,198″

style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;” />

</svg>

<h1>The Ellipse</h1>

<svg height=”130″ width=”500″>

<defs>

<linearGradient id=”grad1″ x1=”0%” y1=”0%” x2=”100%” y2=”0%”>

<stop offset=”0%”

style=”stop-color:rgb(255,255,0);stop-opacity:1″ />

<stop offset=”100%”

style=”stop-color:rgb(255,0,0);stop-opacity:1″ />

</linearGradient>

</defs>

<ellipse cx=”100″ cy=”70″ rx=”85″ ry=”55″ fill=”url(#grad1)” />

<text fill=”#ffffff” font-size=”45″ font-family=”Verdana”

x=”50″ y=”86″>SVG</text>

Sorry, your browser does not support inline SVG.

</svg>

</body>

81. area

The <area> tag is used to create clickable areas inside an image. This <area> elements are always used inside a <map> tag to show the image with clickable area.

Example Code:

<body>

<img src=”workplace.jpg” alt=”Workplace” usemap=”#workmap” width=”400″ height=”379″>

<map name=”workmap”>

<area shape=”rect” coords=”34,44,270,350″ alt=”Computer” href=”computer.htm”>

<area shape=”rect” coords=”290,172,333,250″ alt=”Phone” href=”phone.htm”>

<area shape=”circle” coords=”337,300,44″ alt=”Cup of coffee” href=”coffee.htm”>

</map>

</body>

82. figure

The <figure> tag is used to specify self-contained content, like illustrations, diagrams, photos, code listings, etc.

83. figcaption

The <figcaption> tag is used to show a caption for a <figure> element. This element can be placed as the first or last child of the <figure> tag.

Example Code:

<body>

<figure>

<figcaption>Fig.1 – Trulli, Puglia, Italy.</figcaption>

<img src=”pic_trulli.jpg” alt=”Trulli” style=”width:100%”>

<figcaption>Fig.1 – Trulli, Puglia, Italy.</figcaption>

</figure>

</body>

84. canvas

The <canvas> tag is used to draw transparent for graphics, you can draw the graphics via scripting (usually JavaScript).

Example Code:

<body>

<canvas id=”myCanvas” width=”300″ height=”150″ style=”border:1px solid grey”></canvas>

<script>

let canvas = document.getElementById(“myCanvas”);

let ctx = canvas.getContext(“2d”);

ctx.fillStyle = “#FF0000”;

ctx.fillRect(0, 0, 80, 80);

</script>

</body>

85. iframe

The <iframe> tag is used creating an inline frame to embed another document within the current HTML document.

Example Code:

<body>

<iframe src=”https://www.w3schools.com” title=”W3Schools Free Online Web Tutorials”>

</iframe>

</body>

86. embed

The <embed> tag is used to embed another document within the current HTML document.

Example Code:

<body>

<embed type=”text/html” src=”snippet.html” width=”500″ height=”200″>

<embed type=”image/jpg” src=”pic_trulli.jpg” width=”300″ height=”200″>

<embed type=”video/webm” src=”movie.mp4″ width=”400″ height=”300″>

</body>

87. map

The <map> tag is used to define an image map which is an image with clickable areas.

Example Code:

<body>

<img src=”workplace.jpg” alt=”Workplace” usemap=”#workmap” width=”400″ height=”379″>

<map name=”workmap”>

<area shape=”rect” coords=”34,44,270,350″ alt=”Computer” href=”computer.htm”>

<area shape=”rect” coords=”290,172,333,250″ alt=”Phone” href=”phone.htm”>

<area shape=”circle” coords=”337,300,44″ alt=”Cup of coffee” href=”coffee.htm”>

</map>

</body>

88. template

The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads.

Example Code:

<body>

<button onclick=”showContent()”>Show hidden content</button>

<template>

<h2>Flower</h2>

<img src=”img_white_flower.jpg” width=”214″ height=”204″>

</template>

<script>

function showContent() {

let temp = document.getElementsByTagName(“template”)[0];

let clon = temp.content.cloneNode(true);

document.body.appendChild(clon);

}

</script>

</body>

89. track

The <track> tag specifies text tracks for <audio> or <video> elements.

Example Code:

<body>

<video width=”320″ height=”240″ controls>

<source src=”forrest_gump.mp4″ type=”video/mp4″>

<source src=”forrest_gump.ogg” type=”video/ogg”>

<track src=”fgsubtitles_en.vtt” kind=”subtitles” srclang=”en” label=”English”>

<track src=”fgsubtitles_no.vtt” kind=”subtitles” srclang=”no” label=”Norwegian”>

</video>

</body>

90. style

The <style> tag is used to define style information (CSS) for a document and it must be included inside the <head> section of the document.

Example Code:

<head>

<style>

h1 {color:red;}

p {color:blue;}

</style>

</head>

<body>

<h1>A heading</h1>

<p>A paragraph.</p>

</body>

91. header

The <header> tag is used to represent a container for introduction of the document or a set of navigational links.

Example Code:

<body>

<header>

<h1>Main page heading here</h1>

<p>Posted by John Doe</p>

</header>

</body>

92. hgroup

The <hgroup> tag is used to surround a heading and one or more <p> elements.

Example Code:

<body>

<hgroup>

<h2>Norway</h2>

<p>The land with the midnight sun.</p>

</hgroup>

</body>

93. footer

The <footer> tag is used to define a footer for a document or section.

Example Code:

<body>

<footer>

<p>Author: Hege Refsnes<br>

<a href=”mailto:hege@example.com”>hege@example.com</a></p>

</footer>

</body>

94. div

The <div> tag is used to define a division or a section in an HTML document. This <div> tag is used as a container.

Example Code:

<head>

<style>

.myDiv {

border: 5px outset red;

background-color: lightblue;

text-align: center;

}

</style>

</head>

<body>

<div class=”myDiv”>

<h2>This is a heading in a div element</h2>

<p>This is some text in a div element.</p>

</div>

</body>

95. span

The <span> tag is used to mark up a part of a text, or a part of a document. The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.

Example Code:

<body>

<p>My mother has <span style=”color:blue;font-weight:bold”>blue</span> eyes and my father has <span style=”color:darkolivegreen;font-weight:bold”>dark green</span> eyes.</p>

</body>

96. main

The <main> tag is used to specify the main content of a document.

97. article

The <article> tag is used to specify independent content.

98. section

The <section> tag is used to define a section in a document.

Example Code:

<body>

<main>

<h1>Most Popular Browsers</h1>

<p>Chrome, Firefox, and Edge are the most used browsers today.</p>

<section>

<article>

<h2>Google Chrome</h2>

<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world’s most popular web browser today!</p>

</article>

</section>

<section>

<article>

<h2>Mozilla Firefox</h2>

<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>

</article>

</section>

<section>

<article>

<h2>Microsoft Edge</h2>

<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>

</article>

</section>

</main>

</body>

99. search

The <search> tag is used to specify that here comes a set of elements that is related to search. Inside a <search> tag typically form elements is used to perform a search.

Example Code:

<body>

<search>

<form>

<input name=”fsrch” id=”fsrch” placeholder=”Search W3Schools”>

</form>

</search>

</body>

100. aside

The <aside> tag is used to define some content aside from the content it is placed in. The <aside> content is often placed as a sidebar in a document.

Example Code:

<head>

<style>

aside {

width: 30%;

padding-left: 15px;

margin-left: 15px;

float: right;

font-style: italic;

background-color: lightgray;

}

</style>

</head>

<body>

<h1>The aside element – Styled with CSS</h1>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>

<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>

</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>

101. details

The <details> tag is used to specify additional details that the user can open and close on demand.

102. summary

The <summary> tag is used to show a heading for the <details> element. The heading can be clicked to view/hide the details.

Example Code:

<body>

<details>

<summary>Epcot Center</summary>

<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>

</details>

</body>

103. dialog

The <dialog> tag is used to create a dialog box or sub window.

Example Code:

<body>

<h1>The dialog element</h1>

<dialog open>This is an open dialog window</dialog>

<p>This is some text.</p>

</body>

104. object

The <object> tag is used to show a container for an external resource.

105. param

The <param> tag is used to define parameters for an <object> element.

Example Code:

<body>

<object data=”pic_trulli.jpg” width=”300″ height=”200″></object>

<object data=”movie.mp4″ width=”400″ height=”300″>

<object data=”horse.wav”>

<param name=”autoplay” value=”true”>

</object>

</body>

106. ruby

The <ruby> tag specifies a ruby annotation.

107. rt

The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.

108. rp

The <rp> tag can be used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotations.

Example Code:

<body>

<h1>The rp element</h1>

<ruby>

漢 <rp>(</rp><rt>ㄏㄢˋ</rt><rp>)</rp>

</ruby>

</body>

This is 1st part of complete learning guide of HTML Tutorial by MAT IT Solutions