- >
- <html>
- <head>
- <title>Web page titletitle>
- head>
- <body>
- <h1>Write Your First Headingh1>
- <p>Write Your First Paragraph.p>
- body>
- html>
Description of HTML Example
: It defines the document type or it instruct the browser about the version of HTML.
:This tag informs the browser that it is an HTML document. Text between html tag describes the web document. It is a container for all other elements of HTML except
: It should be the first element inside the element, which contains the metadata(information about the document). It must be closed before the body tag opens.
:</strong> As its name suggested, it is used to add title of that HTML page which appears at the top of the browser window. It must be placed inside the head tag and should close immediately. (Optional)</p><p><strong><body> </strong>: Text between body tag describes the body content of the page that is visible to the end user. This tag contains the main content of the HTML document.</p><p><strong><h1></strong> : Text between <h1> tag describes the first level heading of the webpage.</p><p><strong><p> </strong>: Text between <p> tag describes the paragraph of the webpage.</p><h2 class="h2">Brief History of HTML</h2><p>In the late 1980’s , a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a system for CERN researchers. In 1989, he wrote a memo proposing an internet based hypertext system.</p><p><strong>Tim Berners-Lee</strong> is known as the father of HTML. The first available description of HTML was a document called “HTML Tags” proposed by Tim in late 1991. The latest version of HTML is HTML5, which we will learn later in this tutorial.</p><h2 class="h2">HTML Versions</h2><p>Since the time HTML was invented there are lots of HTML versions in market, the brief introduction about the HTML version is given below:</p><p><strong>HTML 1.0:</strong> The first version of HTML was 1.0, which was the barebones version of HTML language, and it was released in1991.</p><p><strong>HTML 2.0:</strong> This was the next version which was released in 1995, and it was standard language version for website design. HTML 2.0 was able to support extra features such as form-based file upload, form elements such as text box, option button, etc.</p><p><strong>HTML 3.2:</strong> HTML 3.2 version was published by W3C in early 1997. This version was capable of creating tables and providing support for extra options for form elements. It can also support a web page with complex mathematical equations. It became an official standard for any browser till January 1997. Today it is practically supported by most of the browsers.</p><p><strong>HTML 4.01:</strong> HTML 4.01 version was released on December 1999, and it is a very stable version of HTML language. This version is the current official standard, and it provides added support for stylesheets (CSS) and scripting ability for various multimedia elements.</p><p><strong>HTML5 :</strong> HTML5 is the newest version of HyperText Markup language. The first draft of this version was announced in January 2008. There are two major organizations one is W3C (World Wide Web Consortium), and another one is WHATWG( Web Hypertext Application Technology Working Group) which are involved in the development of HTML 5 version, and still, it is under development.</p><h2 class="h2">Features of HTML</h2><p>1) It is a very <strong>easy and simple language</strong>. It can be easily understood and modified.</p><p>2) It is very easy to make an <strong>effective presentation</strong> with HTML because it has a lot of formatting tags.</p><p>3) It is a <strong>markup language</strong>, so it provides a flexible way to design web pages along with the text.</p><p>4) It facilitates programmers to add a <strong>link</strong> on the web pages (by html anchor tag), so it enhances the interest of browsing of the user.</p><p>5) It is <strong>platform-independent</strong> because it can be displayed on any platform like Windows, Linux, and Macintosh, etc.</p><p>6) It facilitates the programmer to add <strong>Graphics, Videos, and Sound</strong> to the web pages which makes it more attractive and interactive.</p><p>7) HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-case.</p><h4 class="n">NOTE: It is recommended to write all tags in lower-case for consistency, readability, etc.</h4><h1 class="h1">HTML text Editors</h1><ul class="points"><li>An HTML file is a text file, so to create an HTML file we can use any text editors.</li><li>Text editors are the programs which allow editing in a written text, hence to create a web page we need to write our code in some text editor.</li><li>There are various types of text editors available which you can directly download, but for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).</li><li>After learning the basics, you can easily use other professional text editors which are, <strong>Notepad++, Sublime Text, Vim, etc</strong>.</li><li>In our tutorial, we will use Notepad and sublime text editor. Following are some easy ways to create your first web page with Notepad, and sublime text.</li></ul><h2 class="h3"><span class="ez-toc-section" id="A_HTML_code_with_Notepad_Recommended_for_Beginners"></span>A. HTML code with Notepad. (Recommended for Beginners)<span class="ez-toc-section-end"></span></h2><p>Notepad is a simple text editor and suitable for beginners to learn HTML. It is available in all versions of Windows, from where you easily access it.</p><p><strong>Step 1: Open Notepad (Windows)</strong></p><p><img decoding="async" src="https://images.tpointtech.com/htmlpages/images/text-editors.png" alt="text Editors" /></p><p><strong>Step 2: Write code in HTML</strong></p><p><img decoding="async" src="https://images.tpointtech.com/htmlpages/images/text-editors2.png" alt="text Editors" /></p><p><strong>Step 3: Save the HTML file with .htm or .html extension.</strong></p><p><img decoding="async" src="https://images.tpointtech.com/htmlpages/images/text-editors3.png" alt="text Editors" /></p><p><strong>Step 4: Open the HTML page in your web browser.</strong></p><p>To run the HTML page, you need to open the file location, where you have saved the file and then either double-click on file or click on open with option</p><p><img decoding="async" src="https://images.tpointtech.com/htmlpages/images/text-editors4.png" alt="text Editors" /><br /><img decoding="async" src="https://images.tpointtech.com/htmlpages/images/text-editors5.png" alt="text Editors" /></p><hr /><h2 class="h3"><span class="ez-toc-section" id="B_HTML_code_with_Sublime_Text-editorRecommended_after_learning_basics_of_HTML"></span>B. HTML code with Sublime Text-editor.(Recommended after learning basics of HTML)<span class="ez-toc-section-end"></span></h2><p>When you will learn the basics of HTML, then you can use some professional text editors, which will help you to write an efficient and fast code. So to use Sublime Text editors, first it needs to download and install from internet. You can easily download it from this https://www.sublimetext.com/download link and can install in your PC. When installation of Sublime text editor done then you can follow the simple steps to use it:</p><p><strong>Step 1: Open Sublime Text editor(Windows 8):</strong></p><p>To open Sublime Text editor go to <strong>Start screen ⤏ type Sublime Text⤏ Open</strong> it. To open a new page press <strong>CTRL+N.</strong></p><p><img decoding="async" src="https://images.tpointtech.com/htmlpages/images/text-editors6.png" alt="text Editors" /></p><p><strong>Step 2: Save the page before writing any code.</strong></p><p>To save your page in Sublime Text press Ctrl+S or go to File option ⤏ save, to save a file use extension .htm or .html. We recommend to save the file first then write the code because after saving the page sublime text editor will give you suggestions to write code.</p><p><img decoding="async" src="https://images.tpointtech.com/htmlpages/images/text-editors7.png" alt="text Editors" /></p><p><strong>Step 3: Write the code in Sublime Text editor</strong></p><p><img decoding="async" src="https://images.tpointtech.com/htmlpages/images/text-editors8.png" alt="text Editors" /></p><p><strong>Step 4: Open the HTML page in your Browser</strong></p><p>To execute or open this page in Web browser just <strong>right click</strong> by mouse on sublime text page and click on <strong>Open in Browser</strong>.</p><p><img decoding="async" src="https://images.tpointtech.com/htmlpages/images/text-editors9.png" alt="text Editors" /><br /><img decoding="async" src="https://images.tpointtech.com/htmlpages/images/text-editors10.png" alt="text Editors" /></p><h4 class="n">Note: You can execute HTML file in any browser, but there are some tags which are not supported by Some Web browser.</h4><h1 class="h1"><span class="ez-toc-section" id="Building_blocks_of_HTML"></span>Building blocks of HTML<span class="ez-toc-section-end"></span></h1><p>An HTML document consist of its basic building blocks which are:</p><ul class="points"><li><strong>Tags:</strong> An HTML tag surrounds the content and apply meaning to it. It is written between < and > brackets.</li><li><strong>Attribute:</strong> An attribute in HTML provides extra information about the element, and it is applied within the start tag. An HTML attribute contains two fields: name & value.</li></ul><h2 class="h3"><span class="ez-toc-section" id="Syntax"></span>Syntax<span class="ez-toc-section-end"></span></h2><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">tag</span> name <span class="attribute">attribute_name</span>= <span class="attribute-value">” attr_value”</span><span class="tag">></span> content <span class="tag"></</span> <span class="tag-name-test">tag</span> name<span class="tag">></span> </li></ol></div></div><ul class="points"><li><strong>Elements:</strong> An HTML element is an individual component of an HTML file. In an HTML file, everything written within tags are termed as HTML elements.</li></ul><p><img decoding="async" src="https://d2jdgazzki9vjm.cloudfront.net/htmlpages/images/html-building-blocks.png" alt="HTML Building blocks " /></p><div class="codewrapper"><h3 class="h3">Example</h3><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><!DOCTYPE html<span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">html</span><span class="tag">></span> </li><li class="alt"> <span class="tag"><</span><span class="tag-name-test">head</span><span class="tag">></span> </li><li class=""> <span class="tag"><</span><span class="tag-name-test">title</span><span class="tag">></span>The basic building blocks of HTML<span class="tag"></</span><span class="tag-name-test">title</span><span class="tag">></span> </li><li class="alt"> <span class="tag"></</span><span class="tag-name-test">head</span><span class="tag">></span> </li><li class=""> <span class="tag"><</span><span class="tag-name-test">body</span><span class="tag">></span> </li><li class="alt"> <span class="tag"><</span><span class="tag-name-test">h2</span><span class="tag">></span>The building blocks<span class="tag"></</span><span class="tag-name-test">h2</span><span class="tag">></span> </li><li class=""> <span class="tag"><</span><span class="tag-name-test">p</span><span class="tag">></span>This is a paragraph tag<span class="tag"></</span><span class="tag-name-test">p</span><span class="tag">></span> </li><li class="alt"> <span class="tag"><</span><span class="tag-name-test">p</span> <span class="attribute">style</span>=<span class="attribute-value">“color: red”</span><span class="tag">></span>The style is attribute of paragraph tag<span class="tag"></</span><span class="tag-name-test">p</span><span class="tag">></span> </li><li class=""> <span class="tag"><</span><span class="tag-name-test">span</span><span class="tag">></span>The element contains tag, attribute and content<span class="tag"></</span><span class="tag-name-test">span</span><span class="tag">></span> </li><li class="alt"> <span class="tag"></</span><span class="tag-name-test">body</span><span class="tag">></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">html</span><span class="tag">></span> </li></ol><h1 class="h1"><span class="ez-toc-section" id="HTML_Tags"></span>HTML Tags<span class="ez-toc-section-end"></span></h1><p>HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.</p><p>When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.</p><p>An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.</p><ul class="points"><li>All HTML tags must enclosed within < > these brackets.</li><li>Every tag in HTML perform different tasks.</li><li>If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)</li></ul><h2 class="h3"><span class="ez-toc-section" id="Syntax-2"></span>Syntax<span class="ez-toc-section-end"></span></h2><p><tag> content </tag></p><hr /><h2 class="h3"><span class="ez-toc-section" id="HTML_Tag_Examples"></span>HTML Tag Examples<span class="ez-toc-section-end"></span></h2><h4 class="n">Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given below:</h4><div class="codeblock"><p><p> Paragraph Tag </p></p><h2 class="h2"><h2> Heading Tag </h2></h2><p><b>Bold Tag</b></p><p><i>Italic Tag</i></p><p><u><u> Underline Tag</u></u></p></div><p><span class="testit"><a href="https://www.tpointtech.com/oprweb/test.jsp?filename=htmltags1" target="" rel="noopener">Test it Now</a></span></p><hr /><h2 class="h3"><span class="ez-toc-section" id="Unclosed_HTML_Tags"></span>Unclosed HTML Tags<span class="ez-toc-section-end"></span></h2><p>Some HTML tags are not closed, for example br and hr.</p><p><br> Tag: br stands for break line, it breaks the line of the code.</p><p><hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.</p><hr /><h2 class="h3"><span class="ez-toc-section" id="HTML_Meta_Tags"></span>HTML Meta Tags<span class="ez-toc-section-end"></span></h2><p>DOCTYPE, title, link, meta and style</p><hr /><h2 class="h3"><span class="ez-toc-section" id="HTML_Text_Tags"></span>HTML Text Tags<span class="ez-toc-section-end"></span></h2><p><p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br></p><hr /><h2 class="h3">HTML Link Tags</h2><p><a> and <base></p><hr /><h2 class="h3">HTML Image and Object Tags</h2><p><img>, <area>, <map>, <param> and <object></p><hr /><h2 class="h3">HTML List Tags</h2><p><ul>, <ol>, <li>, <dl>, <dt> and <dd></p><hr /><h2 class="h3">HTML Table Tags</h2><p>table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption</p><hr /><h2 class="h3">HTML Form Tags</h2><p>form, input, textarea, select, option, optgroup, button, label, fieldset and legend</p><hr /><h2 class="h3">HTML Scripting Tags</h2><p>script and noscript</p><h4 class="n">Note: We will see examples using these tags in later charters.</h4><h2 class="h2">All HTML Tags</h2><p>Let’s discuss the complete tag list that is present in the HTML that is represented below.</p><h3 class="h3">1. Comments:</h3><p>With the help of this tag, we can add comments in the HTML. After commenting on the elements, the browser does not render it. Also, these comments parts are not displayed on the web page. But these commented codes are available in the source code.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">strong</span><span class="tag">></span><span class="comments"><!– –></span><span class="tag"></</span><span class="tag-name-test">strong</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">2. Doctype:</h3><p>With the help of this tag, we can declare the version of the markup language to the web browser.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span> !DOCTYPE html <span class="tag">></span> </li></ol></div></div><h3 class="h3">3. <a>:</h3><p>With the help of this tag, we can create a hyperlink to the web page. The hyperlink can be done with the help of another file in a different location.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">a</span> <span class="attribute">href</span>=<span class="attribute-value">“url”</span><span class="tag">></span>Link Text<span class="tag"></</span><span class="tag-name-test">a</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">4. <abbr>:</h3><p>With the help of this tag, we can define the abbreviations or acronyms of longer words, such as www, HTML, HTTP, etc.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">abbr</span> <span class="attribute">title</span>=<span class="attribute-value">“expanded-text”</span><span class="tag">></span>abbreviation<span class="tag"></</span><span class="tag-name-test">abbr</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">5. <<strong>address>:</strong></h3><p>With the help of this tag, we can find the address or the contact details of the web page’s author. The <address> tag contains addresses, cellphone numbers, emails, website connections, etc.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">address</span><span class="tag">></span> </li><li class="">Contact Information Goes Here </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">address</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">6. <area>:</h3><p>With the help of this tag, we can identify the clickable area associated with the hyperlink.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">area</span> <span class="attribute">shape</span>=<span class="attribute-value">“shape-type”</span> <span class="attribute">coords</span>=<span class="attribute-value">“coordinates”</span> <span class="attribute">href</span>=<span class="attribute-value">“destination-url”</span> <span class="attribute">alt</span>=<span class="attribute-value">“alternative-text”</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">7. <article>:</h3><p>With the help of this tag, we can represent a piece of content that is used to be distributed to other websites without being a part of this. With the help of <article> tag, we can display entire blog posts, news articles, or similar content, etc.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">article</span><span class="tag">></span> </li><li class=""><span class="comments"><!– Content goes here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">article</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">8. <audio>:</h3><p>With the help of this tag, we can embed the audio file into the webpage. To do this, there is no need for additional plug-ins like Flash.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">audio</span> <span class="attribute">src</span>=<span class="attribute-value">“audio-file.mp3”</span> controls<span class="tag">></span> </li><li class="">Your browser does not support the audio element. </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">audio</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">9. <aside>:</h3><p>With the help of this tag, we can define the content related to the web page’s main content, but they are not constituted to the web page.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">aside</span><span class="tag">></span> </li><li class=""><span class="comments"><!– Content goes here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">aside</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">10. <b>:</h3><p>With the help of this tag, we can make the text bold without any additional significance.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">b</span><span class="tag">></span>Text to be displayed in bold<span class="tag"></</span><span class="tag-name-test">b</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">11. <base>:</h3><p>With the help of this tag, we can create the target address, which is targeted by all the URLs present in the document.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">base</span> <span class="attribute">href</span>=<span class="attribute-value">“base-url”</span> <span class="attribute">target</span>=<span class="attribute-value">“base-target”</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">12. <bdi>:</h3><p>With the help of this tag, we can tell the browser to isolate the text that comes from other destinations with the help of a bidirectional algorithm.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">bdi</span><span class="tag">></span>Text with different directionality<span class="tag"></</span><span class="tag-name-test">bdi</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">13. <bdo>:</h3><p>With the help of this tag, we can override the current text.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">bdo</span> <span class="attribute">dir</span>=<span class="attribute-value">“direction”</span><span class="tag">></span>Text with overridden directionality<span class="tag"></</span><span class="tag-name-test">bdo</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">14. <blockquote>:</h3><p>With the help of this tag, we can provide a way to insert the quotation in the document from another source. By default, the browser takes the text inside a quote tag as indented.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">blockquote</span><span class="tag">></span> </li><li class="">Quoted content goes here. </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">blockquote</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">15. <body>:</h3><p>With the help of this tag, we can define the web page’s main content. The body tag includes text, paragraphs, headings, images, tables, links, and videos.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">body</span><span class="tag">></span> </li><li class=""> <span class="comments"><!– Content goes here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">body</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">strong</span><span class="tag">></span> <span class="tag"></</span><span class="tag-name-test">strong</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">16. <br>:</h3><p>With the help of this tag, we can produce a line break on the web page. We can use this tag basically during the writing of poems or addresses that require line breaks.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">br</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">strong</span><span class="tag">></span> <span class="tag"></</span><span class="tag-name-test">strong</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">17. <button>:</h3><p>With the help of this tag, we can create a clickable button on the web page. We can use the button tag in forms or anywhere in a document.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">button</span><span class="tag">></span>Button Text<span class="tag"></</span><span class="tag-name-test">button</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">strong</span><span class="tag">></span> <span class="tag"></</span><span class="tag-name-test">strong</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">18. <canvas>:</h3><p>With the help of this tag, we can define a particular region used for drawing graphics through scripting (usually JavaScript).</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">canvas</span> <span class="attribute">id</span>=<span class="attribute-value">“canvas-id”</span> <span class="attribute">width</span>=<span class="attribute-value">“width”</span> <span class="attribute">height</span>=<span class="attribute-value">“height”</span><span class="tag">></span><span class="tag"></</span><span class="tag-name-test">canvas</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">19. <caption>:</h3><p>With the help of this tag, we can create the table caption, which is used to create the title for the table.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">table</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">caption</span><span class="tag">></span>Caption Text<span class="tag"></</span><span class="tag-name-test">caption</span><span class="tag">></span> </li><li class="alt"><span class="comments"><!– Table content goes here –></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">table</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">20. <cite>:</h3><p>With the help of this tag, we can do some creative work and give a title for that creative work.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">cite</span><span class="tag">></span>Referenced Content<span class="tag"></</span><span class="tag-name-test">cite</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">21. <code>:</h3><p>With the help of this tag, we can insert a particular code fragment, which might be HTML or CSS code.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">code</span><span class="tag">></span>Code goes here<span class="tag"></</span><span class="tag-name-test">code</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">22. <col>:</h3><p>With the help of this tag, we can specify all the column’s properties. We can specify it inside the <colgroup> element.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">col</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">23. <colgroup>:</h3><p>With the help of this tag, we can specify one or more columns in a group. With the help of this, we can apply the style to the entire column without repeating the style for every column and every row.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">colgroup</span><span class="tag">></span> </li><li class=""><span class="comments"><!– col elements go here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">colgroup</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">24. <data>:</h3><p>With the help of this tag, we can add machine-readable translation. The processor generates it, and the browser can generate the human-readable value.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">data</span> <span class="attribute">value</span>=<span class="attribute-value">“data-value”</span><span class="tag">></span>Data Label<span class="tag"></</span><span class="tag-name-test">data</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">25. <datalist>:</h3><p>With the help of this tag, we can provide an auto-complete feature to the form element. With the help of this, the user can select the option from the option list.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">input</span> <span class="attribute">list</span>=<span class="attribute-value">“datalist-id”</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">datalist</span> <span class="attribute">id</span>=<span class="attribute-value">“datalist-id”</span><span class="tag">></span> </li><li class="alt"><span class="comments"><!– option elements go here –></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">datalist</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">26. <dd>:</h3><p>With the help of this tag, we can define the definition description in the HTML. It is also used to describe an item in the list of descriptions.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">dl</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">dt</span><span class="tag">></span>Term<span class="tag"></</span><span class="tag-name-test">dt</span><span class="tag">></span> </li><li class="alt"><span class="tag"><</span><span class="tag-name-test">dd</span><span class="tag">></span>Description or definition goes here<span class="tag"></</span><span class="tag-name-test">dd</span><span class="tag">></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">dl</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">27. <del>:</h3><p>With the help of this tag, we can declare the particular section that will be deleted from the document. After doing this, the web browser strike over that particular section in the webpage.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">del</span><span class="tag">></span>Deleted Text<span class="tag"></</span><span class="tag-name-test">del</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">28. <details>:</h3><p>With the help of this tag, we can create a toggle. This toggle contains all the information but is in a closed state. When we mouse hover over it, it comes to an open state and displays all the hidden information.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">details</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">summary</span><span class="tag">></span>Summary Text<span class="tag"></</span><span class="tag-name-test">summary</span><span class="tag">></span> </li><li class="alt"><span class="comments"><!– Content goes here –></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">details</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">29. <dfn>:</h3><p>With the help of this tag, we can represent the definition element. With the help of the definition element, we can define the instances of the definition. When a term first appears in the document, it is known as the instances of the definition.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">dfn</span><span class="tag">></span>Term Definition<span class="tag"></</span><span class="tag-name-test">dfn</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">30. <dialog>:</h3><p>With the help of this tag, we can define a dialogue box and the other webpage components. With the help of this component, the webpage can interact with the user beautifully.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">dialog</span> open<span class="tag">></span> </li><li class=""><span class="comments"><!– Dialog content goes here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">dialog</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">31. <div>:</h3><p>With the help of this tag, we can create a generic container that can hold the flow of the content. It also does not have the default rendering.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">div</span><span class="tag">></span> </li><li class=""><span class="comments"><!– Content goes here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">div</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">32. <dl>:</h3><p>With the help of this tag, we can define the list of items on the web page. We can also represent the metadata with the help of this tag.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">dl</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">dt</span><span class="tag">></span>Term 1<span class="tag"></</span><span class="tag-name-test">dt</span><span class="tag">></span> </li><li class="alt"><span class="tag"><</span><span class="tag-name-test">dd</span><span class="tag">></span>Definition 1<span class="tag"></</span><span class="tag-name-test">dd</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">dt</span><span class="tag">></span>Term 2<span class="tag"></</span><span class="tag-name-test">dt</span><span class="tag">></span> </li><li class="alt"><span class="tag"><</span><span class="tag-name-test">dd</span><span class="tag">></span>Definition 2<span class="tag"></</span><span class="tag-name-test">dd</span><span class="tag">></span> </li><li class=""><span class="comments"><!– more terms and definitions –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">dl</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">33. <dt>:</h3><p>With the help of this tag, we can define the definition list on the web page. we have to write the <dt> tag within the <dl> tag. We can also flow this element with the help of <dd> tag.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">dl</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">dt</span><span class="tag">></span>Term<span class="tag"></</span><span class="tag-name-test">dt</span><span class="tag">></span> </li><li class="alt"><span class="comments"><!– Definition or description goes here –></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">dl</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">34. <em>:</h3><p>With the help of this tag, we can emphasize a particular word or phrase within a sentence. It converts the normal word or sentence into italic and semantic styles.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">em</span><span class="tag">></span>Emphasized Text<span class="tag"></</span><span class="tag-name-test">em</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">35. <embed>:</h3><p>With the help of this tag, we can embed external things such as audio or video into the webpage.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">embed</span> <span class="attribute">src</span>=<span class="attribute-value">“content-url”</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">36. <fieldset>:</h3><p>With the help of this tag, we can create a group of related elements inside a form. Also, with the help of this, we can create a box around the element.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">fieldset</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">legend</span><span class="tag">></span>Fieldset Title<span class="tag"></</span><span class="tag-name-test">legend</span><span class="tag">></span> </li><li class="alt"><span class="comments"><!– Form controls go here –></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">fieldset</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">37. <figcaption>:</h3><p>With the help of this tag, we can attach the caption for the image, table, or chart contained within the <figure> element.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">figure</span><span class="tag">></span> </li><li class=""><span class="comments"><!– Content goes here –></span> </li><li class="alt"><span class="tag"><</span><span class="tag-name-test">figcaption</span><span class="tag">></span>Caption or Description<span class="tag"></</span><span class="tag-name-test">figcaption</span><span class="tag">></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">figure</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">38. <figure>:</h3><p>With the help of this tag, we can create self-contained content, also referred to as a single entity.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">figure</span><span class="tag">></span> </li><li class=""><span class="comments"><!– Content goes here –></span> </li><li class="alt"><span class="tag"><</span><span class="tag-name-test">figcaption</span><span class="tag">></span>Caption or Description<span class="tag"></</span><span class="tag-name-test">figcaption</span><span class="tag">></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">figure</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">39. <footer>:</h3><p>With the help of this element, we can represent the footer part in the root element.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">footer</span><span class="tag">></span> </li><li class=""><span class="comments"><!– Footer content goes here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">footer</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">40. <form>:</h3><p>With the help of this tag, we can receive the information from the user.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">form</span> <span class="attribute">action</span>=<span class="attribute-value">“form-handler-url”</span> <span class="attribute">method</span>=<span class="attribute-value">“HTTP-method”</span><span class="tag">></span> </li><li class=""><span class="comments"><!– Form controls go here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">form</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">41. <head>:</h3><p>With the help of this tag, we can specify the header part of the header section of the code. It contains all the information regarding the document.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">head</span><span class="tag">></span> </li><li class=""> <span class="comments"><!– Head content goes here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">head</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">42. <header>:</h3><p>With the help of this tag, we can define the webpage’s header. It also contains information regarding the title and heading of the document and section.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">header</span><span class="tag">></span> </li><li class=""> <span class="comments"><!– Header content goes here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">header</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">43. <hgroup>:</h3><p>With the help of this tag, we can represent the heading group. It is also used for group heading elements, such as headings and subheadings, from <h1> to <h6>.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">h1</span><span class="tag">></span>Main Heading<span class="tag"></</span><span class="tag-name-test">h1</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">h2</span><span class="tag">></span>Subheading 1<span class="tag"></</span><span class="tag-name-test">h2</span><span class="tag">></span> </li><li class="alt"><span class="tag"><</span><span class="tag-name-test">h3</span><span class="tag">></span>Sub-subheading 1.1<span class="tag"></</span><span class="tag-name-test">h3</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">h3</span><span class="tag">></span>Sub-subheading 1.2<span class="tag"></</span><span class="tag-name-test">h3</span><span class="tag">></span> </li><li class="alt"><span class="tag"><</span><span class="tag-name-test">h2</span><span class="tag">></span>Subheading 2<span class="tag"></</span><span class="tag-name-test">h2</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">44. <h1> to <h6>:</h3><p>With the help of this tag, we can define the web page’s heading. It also makes the heading as large and bold by default. the <h1> headings are displayed in the largest font, whereas the <h6> headings are displayed in the smallest font.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">h1</span><span class="tag">></span>Heading level 1<span class="tag"></</span><span class="tag-name-test">h1</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">h2</span><span class="tag">></span>Heading level 2<span class="tag"></</span><span class="tag-name-test">h2</span><span class="tag">></span> </li><li class="alt"><span class="tag"><</span><span class="tag-name-test">h3</span><span class="tag">></span>Heading level 3<span class="tag"></</span><span class="tag-name-test">h3</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">h4</span><span class="tag">></span>Heading level 4<span class="tag"></</span><span class="tag-name-test">h4</span><span class="tag">></span> </li><li class="alt"><span class="tag"><</span><span class="tag-name-test">h5</span><span class="tag">></span>Heading level 5<span class="tag"></</span><span class="tag-name-test">h5</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">h6</span><span class="tag">></span>Heading level 6<span class="tag"></</span><span class="tag-name-test">h6</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">45. <hr>:</h3><p>With the help of this tag, we can divide the web page. It stands for horizontal rule or theme break.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">hr</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">46. <html>:</h3><p>With the help of this tag, all other elements are contained by it. It is also known as the root of the HTML element.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><!DOCTYPE html<span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">html</span><span class="tag">></span> </li><li class="alt"><span class="comments"><!– HTML content goes here –></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">html</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">47. <i>:</h3><p>With the help of this tag, we can make any content italicized. It Highlights an important term, phrase, or technical term.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">i</span><span class="tag">></span>Italicized Text<span class="tag"></</span><span class="tag-name-test">i</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">48. <iframe>:</h3><p>With the help of this tag, we can embed another HTML page into the current webpage.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">iframe</span> <span class="attribute">src</span>=<span class="attribute-value">“url”</span><span class="tag">></span><span class="tag"></</span><span class="tag-name-test">iframe</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">49. <img>:</h3><p>With the help of this tag, we can embed an image into the current web page. It links an image to the image without directly inserting it into the web page.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">img</span> <span class="attribute">src</span>=<span class="attribute-value">“image-url”</span> <span class="attribute">alt</span>=<span class="attribute-value">“alternative-text”</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">50. <input></h3><p>With the help of this tag, we can enable interactive control in the form. It also depends on the various fields of the attribute type.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">input</span> <span class="attribute">type</span>=<span class="attribute-value">“input-type”</span> <span class="attribute">name</span>=<span class="attribute-value">“input-name”</span> <span class="attribute">value</span>=<span class="attribute-value">“default-value”</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">51. <ins>:</h3><p>With the help of this tag, we can specify the block of the inserted text. It also signifies that a particular range of text has been added to the document.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">ins</span><span class="tag">></span>Inserted Text<span class="tag"></</span><span class="tag-name-test">ins</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">52. <kbd>:</h3><p>With the help of this tag, we can refer to the textual part of the inline text that represents the user’s keyboard, voice, or any other text input device.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">kbd</span><span class="tag">></span>Keyboard Input<span class="tag"></</span><span class="tag-name-test">kbd</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">53. <label>:</h3><p>With the help of this tag, we can improve the usability for mouse users, i.e., clicking on the label will toggle the control.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">label</span> <span class="attribute">for</span>=<span class="attribute-value">“input-id”</span><span class="tag">></span>Label Text<span class="tag"></</span><span class="tag-name-test">label</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">54. <legend>:</h3><p>With the help of this tag, we can define the title for the child’s content. Legends are the parent element of all the child elements. We can define these elements with the help of <fieldset>.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">fieldset</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">legend</span><span class="tag">></span>Fieldset Caption<span class="tag"></</span><span class="tag-name-test">legend</span><span class="tag">></span> </li><li class="alt"><span class="comments"><!– Form controls go here –></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">fieldset</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">55. <li>:</h3><p>With the help of this tag, we can represent the list of items on the web page. It contains an ordered list (an unordered or a menu) as a parent element.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">ul</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">li</span><span class="tag">></span>List Item 1<span class="tag"></</span><span class="tag-name-test">li</span><span class="tag">></span> </li><li class="alt"> <span class="tag"><</span><span class="tag-name-test">li</span><span class="tag">></span>List Item 2<span class="tag"></</span><span class="tag-name-test">li</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">li</span><span class="tag">></span>List Item 3<span class="tag"></</span><span class="tag-name-test">li</span><span class="tag">></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">ul</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">56. <link>:</h3><p>With the help of this tag, we can link external resources to the current webpage.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">link</span> <span class="attribute">rel</span>=<span class="attribute-value">“stylesheet”</span> <span class="attribute">href</span>=<span class="attribute-value">“stylesheet.css”</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">57. <main>:</h3><p>With the help of this tag, we can make an ordinary element the most important element. We have to write this tag inside the <body> tag.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">main</span><span class="tag">></span> </li><li class=""><span class="comments"><!– Main content goes here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">main</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">58. <map>:</h3><p>With the help of this tag, we can define the map image. The image map also has a clickable area.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">map</span> <span class="attribute">name</span>=<span class="attribute-value">“map-name”</span><span class="tag">></span> </li><li class=""><span class="comments"><!– Area tags go here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">map</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">59. <mark>:</h3><p>With the help of this tag, we can represent the text as highlighted, which will be used for reference or notation purposes. Based on the importance of the content, it highlighted the text.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">mark</span><span class="tag">></span>Highlighted Text<span class="tag"></</span><span class="tag-name-test">mark</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">60. <meta>:</h3><p>With the help of this tag, we can represent the document’s metadata. The metadata contains page description, keywords, copyright, the language used, and the author.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">meta</span> <span class="attribute">name</span>=<span class="attribute-value">“metadata-name”</span> <span class="attribute">content</span>=<span class="attribute-value">“metadata-value”</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">61. <meter>:</h3><p>With the help of this tag, we can represent the Measurements within a given range or fractional values. It is also known as the gauge.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">meter</span> <span class="attribute">value</span>=<span class="attribute-value">“current-value”</span> <span class="attribute">min</span>=<span class="attribute-value">“minimum-value”</span> <span class="attribute">max</span>=<span class="attribute-value">“maximum-value”</span><span class="tag">></span>Fallback Content<span class="tag"></</span><span class="tag-name-test">meter</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">62. <nav>:</h3><p>With the help of this tag, we can represent the section of navigational links in a document. Some examples of nav tags are Menus, tables of contents, indexes, etc.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">nav</span><span class="tag">></span> </li><li class=""><span class="comments"><!– Navigation links or menus go here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">nav</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">63. <noscript>:</h3><p>With the help of this, we can provide an alternative script when the user’s browser does not support the particular script. It also works whenever the user’s browser does not support client-side scripting or does not support any scripting language.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">noscript</span><span class="tag">></span> </li><li class=""><span class="comments"><!– Alternate content goes here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">noscript</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">64. <object>:</h3><p>With the help of this tag, we can display multimedia like audio, videos, images, PDFs, and Flash on web pages.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">object</span> <span class="attribute">data</span>=<span class="attribute-value">“resource-url”</span><span class="tag">></span><span class="tag"></</span><span class="tag-name-test">object</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">65. <ol>:</h3><p>This tag is used for the creation of the ordered list. The ordered list can be numerical or alphabetical. Inside the <ol> tag, we can create the list using the <li> tag. It will then follow the order.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">ol</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">li</span><span class="tag">></span>First Item<span class="tag"></</span><span class="tag-name-test">li</span><span class="tag">></span> </li><li class="alt"><span class="tag"><</span><span class="tag-name-test">li</span><span class="tag">></span>Second Item<span class="tag"></</span><span class="tag-name-test">li</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">li</span><span class="tag">></span>Third Item<span class="tag"></</span><span class="tag-name-test">li</span><span class="tag">></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">ol</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">66. <optgroup>:</h3><p>This tag is used in the creation of the drop-down list. With the help of this tag, we can define the group of options.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">select</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">optgroup</span> <span class="attribute">label</span>=<span class="attribute-value">“Group Label”</span><span class="tag">></span> </li><li class="alt"> <span class="tag"><</span><span class="tag-name-test">option</span> <span class="attribute">value</span>=<span class="attribute-value">“option1”</span><span class="tag">></span>Option 1<span class="tag"></</span><span class="tag-name-test">option</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">option</span> <span class="attribute">value</span>=<span class="attribute-value">“option2”</span><span class="tag">></span>Option 2<span class="tag"></</span><span class="tag-name-test">option</span><span class="tag">></span> </li><li class="alt"><span class="comments"><!– Additional options –></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">optgroup</span><span class="tag">></span> </li><li class="alt"><span class="comments"><!– Additional outgroup or option elements –></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">select</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">67. <option>:</h3><p>With the help of this tag, we can define the option in the drop-down list by using the <select> tag.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">select</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">option</span> <span class="attribute">value</span>=<span class="attribute-value">“option-value”</span><span class="tag">></span>Option Text<span class="tag"></</span><span class="tag-name-test">option</span><span class="tag">></span> </li><li class="alt"><span class="comments"><!– Additional options –></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">select</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">68. <output>:</h3><p>With the help of this tag, we can create the container for the element that injects the result of the calculation.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">output</span> <span class="attribute">for</span>=<span class="attribute-value">“input-id”</span><span class="tag">></span><span class="tag"></</span><span class="tag-name-test">output</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">69. :</h3><p>With the help of this tag, we can define the paragraph tag. With the help of a paragraph tag, we can represent the visual media as blocks of text separated from adjacent blocks by blank lines or first-line indentation.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt">Paragraph text goes here. </li></ol></div></div><h3 class="h3">70. <param>:</h3><p>With the help of this tag, we can define the parameter for an object. With the help of this, we can pass the parameter for another embedded object.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">object</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">param</span> <span class="attribute">name</span>=<span class="attribute-value">“param-name”</span> <span class="attribute">value</span>=<span class="attribute-value">“param-value”</span><span class="tag">></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">object</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">71. <picture>:</h3><p>With the help of this tag, we can provide flexibility to the web page by specifying the image. It also contains tags like <source> and <img>.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">picture</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">source</span> <span class="attribute">srcset</span>=<span class="attribute-value">“image1.jpg”</span> <span class="attribute">media</span>=<span class="attribute-value">“media-query”</span><span class="tag">></span> </li><li class="alt"><span class="tag"><</span><span class="tag-name-test">source</span> <span class="attribute">srcset</span>=<span class="attribute-value">“image2.jpg”</span> <span class="attribute">media</span>=<span class="attribute-value">“media-query”</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">img</span> <span class="attribute">src</span>=<span class="attribute-value">“fallback-image.jpg”</span> <span class="attribute">alt</span>=<span class="attribute-value">“Fallback Image”</span><span class="tag">></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">picture</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">72. <pre>:</h3><p>With the help of this tag, we can declare the block of pre-formatted text on the web page the pre-formatted character, such as spaces, line breaks, tabs, etc.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">pre</span><span class="tag">></span> </li><li class="">The pre-formatted text goes here. </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">pre</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">73. <progress>:</h3><p>With the help of this tag, we can display the progression of the task. With the help of this, the developer can create a progress bar on their web page.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">progress</span> <span class="attribute">value</span>=<span class="attribute-value">“current-value”</span> <span class="attribute">max</span>=<span class="attribute-value">“maximum-value”</span><span class="tag">></span><span class="tag"></</span><span class="tag-name-test">progress</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">74. <q>:</h3><p>With the help of this tag, we can create an inline quotation on the web page. The text is contained inside the quotation marks in most browsers today.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt">Here is a <span class="tag"><</span><span class="tag-name-test">q</span><span class="tag">></span>short quotation<span class="tag"></</span><span class="tag-name-test">q</span><span class="tag">></span> within a sentence. </li></ol></div></div><h3 class="h3">75. <rp>:</h3><p>With the help of this tag, we can use it in the fallback parenthesis when a browser does not support ruby annotations.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">ruby</span><span class="tag">></span> </li><li class="">Base text <span class="tag"><</span><span class="tag-name-test">rp</span><span class="tag">></span>(<span class="tag"></</span><span class="tag-name-test">rp</span><span class="tag">></span><span class="tag"><</span><span class="tag-name-test">rt</span><span class="tag">></span>Ruby text<span class="tag"></</span><span class="tag-name-test">rt</span><span class="tag">></span><span class="tag"><</span><span class="tag-name-test">rp</span><span class="tag">></span>)<span class="tag"></</span><span class="tag-name-test">rp</span><span class="tag">></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">ruby</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">76. <rt>:</h3><p>With the help of this tag, we can define the pronunciation of the character inside the ruby annotation.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">ruby</span><span class="tag">></span> </li><li class="">Base text <span class="tag"><</span><span class="tag-name-test">rt</span><span class="tag">></span>Ruby text<span class="tag"></</span><span class="tag-name-test">rt</span><span class="tag">></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">ruby</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">77. <ruby>:</h3><p>With the help of this, we can define the East Asian characters’ pronunciations and represent small annotations above, below, or next to the base text.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">ruby</span><span class="tag">></span> </li><li class="">Base text <span class="tag"><</span><span class="tag-name-test">rt</span><span class="tag">></span>Ruby text<span class="tag"></</span><span class="tag-name-test">rt</span><span class="tag">></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">ruby</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">78. <s>:</h3><p>With the help of this tag, we can render the text with a strikethrough or a line through it. We can use this tag when Things are no longer accurate or relevant.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><div class="bar"><div class="tools"> </div></div><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">s</span><span class="tag">></span>Struck-through text<span class="tag"></</span><span class="tag-name-test">s</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">79. <samp>:</h3><p>With the help of this tag, we can define the sample output of the computer program. The content of this tag is displayed using a monospaced font in the browser.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">samp</span><span class="tag">></span>Sample text or code goes here<span class="tag"></</span><span class="tag-name-test">samp</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">80. <script>:</h3><p>With the help of this tag, we can insert the client-side scripting. It also enables the insertion of the script in the HTML web page.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">script</span> <span class="attribute">src</span>=<span class="attribute-value">“script.js”</span><span class="tag">></span><span class="tag"></</span><span class="tag-name-test">script</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">81. <section>:</h3><p>With the help of this tag, we can create the header and footer or any other section on the web page.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">section</span><span class="tag">></span> </li><li class=""> <span class="comments"><!– Content goes here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">section</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">82. <select>:</h3><p>With the help of this tag, we can define the list of options inside the list.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">select</span><span class="tag">></span> </li><li class=""> <span class="tag"><</span><span class="tag-name-test">option</span> <span class="attribute">value</span>=<span class="attribute-value">“option-value”</span><span class="tag">></span>Option Text<span class="tag"></</span><span class="tag-name-test">option</span><span class="tag">></span> </li><li class="alt"> <span class="comments"><!– Additional options –></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">select</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">83. <small>:</h3><p>With the help of this tag, we can reduce the font size by one size smaller than its base size, for instance, from large to small.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">small</span><span class="tag">></span>Small text goes here<span class="tag"></</span><span class="tag-name-test">small</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">84. <source></h3><p>With the help of this tag, we can link multiple media resources like <audio> and <video>,</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">source</span> <span class="attribute">src</span>=<span class="attribute-value">“media-file.mp4”</span> <span class="attribute">type</span>=<span class="attribute-value">“video/mp4”</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">85. <strong></h3><p>With the help of this tag, we can define the content as very important. The browser will display that element in bold.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">strong</span><span class="tag">></span>Emphasized text<span class="tag"></</span><span class="tag-name-test">strong</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">86. <span>:</h3><p>It is the most generic element in the HTML. We can apply the style by grouping the elements.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">span</span><span class="tag">></span>Text or content goes here<span class="tag"></</span><span class="tag-name-test">span</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">87. <style>:</h3><p>We can provide the style information for the document with the help of this tag.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">style</span><span class="tag">></span> </li><li class=""> CSS rules go here </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">style</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">88. <sub>:</h3><p>With the help of this tag, we can display the subscript element only for typographical reasons.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">sub</span><span class="tag">></span>Subscript text<span class="tag"></</span><span class="tag-name-test">sub</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">89. <summary>:</h3><p>With the help of this tag, we can create a box with the help of <details> element that contains the summary, caption, or legend. When we click on the summary button, it performs the open/closed state of the parent *details> element.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">details</span><span class="tag">></span> </li><li class=""><span class="tag"><</span><span class="tag-name-test">summary</span><span class="tag">></span>Summary text<span class="tag"></</span><span class="tag-name-test">summary</span><span class="tag">></span> </li><li class="alt"><span class="comments"><!– Collapsible content goes here –></span> </li><li class=""><span class="tag"></</span><span class="tag-name-test">details</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">90. <sup>:</h3><p>With the help of this tag, we can display any text as the superscript of the inline element.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">sup</span><span class="tag">></span>Superscript text<span class="tag"></</span><span class="tag-name-test">sup</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">91. <svg>:</h3><p>With the help of this tag, we can embed the SVG graphs into the web page. Also, we can define the vector graphics in an XML format with the help of this tag.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">svg</span><span class="tag">></span> </li><li class=""> <span class="comments"><!– SVG content goes here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">svg</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">92. <table>:</h3><p>With the help of this tag, we can define the data in a tabular format in HTML. It will create a two-dimensional table that has some rows and columns.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">table</span><span class="tag">></span> </li><li class=""> <span class="comments"><!– Table content goes here –></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">table</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">93. <tbody>:</h3><p>With the help of this tag, we can encapsulate the table’s rows associated with the table body.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">table</span><span class="tag">></span> </li><li class=""> <span class="tag"><</span><span class="tag-name-test">tbody</span><span class="tag">></span> </li><li class="alt"> <span class="comments"><!– Table rows go here –></span> </li><li class=""> <span class="tag"></</span><span class="tag-name-test">tbody</span><span class="tag">></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">table</span><span class="tag">></span> </li></ol></div></div><h3 class="h3">94. <td>:</h3><p>With the help of this tag, we can define the table’s cell. A table row may consist of more than one <td> element. The default alignment is left in this element.</p><p><strong>Syntax:</strong></p><div class="codeblock"><div class="dp-highlighter"><ol class="dp-xml" start="1"><li class="alt"><span class="tag"><</span><span class="tag-name-test">tr</span><span class="tag">></span> </li><li class=""> <span class="tag"><</span><span class="tag-name-test">td</span><span class="tag">></span>Table cell content<span class="tag"></</span><span class="tag-name-test">td</span><span class="tag">></span> </li><li class="alt"><span class="tag"></</span><span class="tag-name-test">tr</span><span class="tag">></span> </li></ol></div></div></div></div></div></div></div></div> </div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-d48e7e8" data-id="d48e7e8" data-element_type="column" data-e-type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-9d210ec elementor-widget elementor-widget-spacer" data-id="9d210ec" data-element_type="widget" data-e-type="widget" data-widget_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
<!-- Comment form for pages -->
<div class='container'> <div class="row">
<div class="col-md-12">
</div>
</div>
</div><!-- /.container --> <!-- End Comment form for pages -->
</div><!-- /.inner-container -->
</div><!-- /.content -->
</div><!-- /.wrap -->
<div class="prefooter"></div>
<footer class="footer" role="contentinfo">
<div class="container">
<div class="footer-widgets row th-widget-area">
<div class="footer-area-1 col-md-3 col-sm-6">
<section class="widget text-2 widget_text"><div class="widget-inner"><h3 class="widget-title">About Us</h3> <div class="textwidget"><p>Indic Technologies is a premier software training institute offering a comprehensive range of services, including specialized Software Training, Project Guidance, IT Consulting, and Technology Workshops. We leverage an advanced global software training delivery methodology to ensure an exceptional learning experience.</p>
</div>
</div></section><section class="widget text-4 widget_text"><div class="widget-inner"><h3 class="widget-title">Contact Info</h3> <div class="textwidget"></div>
</div></section>
<section class="widget widget-th-contact-info">
<div class="widget-inner">
<div class="th-contact-info-widget">
<div class='icon-blocks'><div class="icon-block"><p><a target='_blank' href='mailto:contact@indictechnologies.com'><i class='fa fa-envelope-open-o'></i><span>contact@indictechnologies.com</span></a></p></div><div class="icon-block"><p><a target='_blank' href='http://+91%208019916594'><i class='fa fa-comment-o'></i><span>+91 8019916594</span></a></p></div><div class="icon-block"><p><a href='#'><i class='fa fa-map-o'></i><span>Location</span></a></p></div></div> </div>
</div>
</section>
<section class="widget widget-social">
<div class="widget-inner">
<div class="soc-widget">
<a target=_blank href='https://www.facebook.com/indictechnologies'><i class='fa fa-facebook'></i></a><a target=_blank href='#0'><i class='fa fa-twitter'></i></a><a target=_blank href='https://www.instagram.com/indic_technologies/?hl=en'><i class='fa fa-instagram'></i></a><a target=_blank href='https://www.linkedin.com/in/indic-technologies-753977345/'><i class='fa fa-linkedin'></i></a><a target=_blank href='https://www.youtube.com/@IndicTechnologies'><i class='fa fa-youtube'></i></a> </div>
</div>
</section>
</div>
<div class="footer-area-2 col-md-3 col-sm-6">
<section class="widget nav_menu-6 widget_nav_menu"><div class="widget-inner"><h3 class="widget-title">Blogs</h3><div class="menu-groovy-menu-icons-container"><ul id="menu-groovy-menu-icons" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-373"><a href="#">Pages</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-344"><a href="https://www.indictechnologies.com/blog/">Blog</a></li>
</ul></div></div></section> </div>
<div class="footer-area-3 col-md-3 col-sm-6">
<section class="widget pages-3 widget_pages"><div class="widget-inner"><h3 class="widget-title">Quick Links</h3>
<ul>
<li class="page_item page-item-168"><a href="https://www.indictechnologies.com/contact-us/">Contact Us</a></li>
<li class="page_item page-item-177"><a href="https://www.indictechnologies.com/about-us/">About Us</a></li>
<li class="page_item page-item-186"><a href="https://www.indictechnologies.com/home/">Home</a></li>
<li class="page_item page-item-217"><a href="https://www.indictechnologies.com/blog/">Blog</a></li>
<li class="page_item page-item-1006"><a href="https://www.indictechnologies.com/workshops/">workshops</a></li>
<li class="page_item page-item-3372"><a href="https://www.indictechnologies.com/new-courses/">Courses</a></li>
<li class="page_item page-item-3427"><a href="https://www.indictechnologies.com/internship/">Internships</a></li>
<li class="page_item page-item-4057"><a href="https://www.indictechnologies.com/home-2/">Home</a></li>
</ul>
</div></section> </div>
<div class="footer-area-4 col-md-3 col-sm-6">
<section class="widget nav_menu-3 widget_nav_menu"><div class="widget-inner"><h3 class="widget-title">Our Courses</h3><div class="menu-courses-container"><ul id="menu-courses" class="menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4323"><a href="https://www.indictechnologies.com/machine_learning_course_content/">Machine Learning Course</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4324"><a href="https://www.indictechnologies.com/data-science_course_content/">Data Science Course</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4326"><a href="https://www.indictechnologies.com/artificial-intelligence-course-content/">Artificial Intelligence Course</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4327"><a href="https://www.indictechnologies.com/javascript-course-content/">JavaScript Course</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4328"><a href="https://www.indictechnologies.com/html5-css3-course-content/">Html5 Css3 Course</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4329"><a href="https://www.indictechnologies.com/vuejs-course-content/">VueJS Course</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4330"><a href="https://www.indictechnologies.com/reactjs-course-content/">ReactJS Course</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4331"><a href="https://www.indictechnologies.com/angular-course-content/">Angular Course</a></li>
</ul></div></div></section><section class="widget nav_menu-4 widget_nav_menu"><div class="widget-inner"><h3 class="widget-title">Full Stack Courses</h3><div class="menu-full-stack-container"><ul id="menu-full-stack" class="menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4346"><a href="https://www.indictechnologies.com/java-full-stack-course-content/">Java Full stack Course</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4347"><a href="https://www.indictechnologies.com/mean-stack-course-content/">MEAN Stack Course</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4348"><a href="https://www.indictechnologies.com/mern-stack-course-content/">MERN Stack Course</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4349"><a href="https://www.indictechnologies.com/mevn-course-content/">MEVN Stack Course</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4350"><a href="https://www.indictechnologies.com/python-full-stack-course-content/">Python Full stack Course</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4351"><a href="https://www.indictechnologies.com/vuejs-course-content/web-full-stack-course-content/">Web Full Stack Course</a></li>
</ul></div></div></section> </div>
</div>
</div>
<div class="footer-btm-bar">
<div class="container">
<div class="footer-copyright row">
<div class="col-xs-12">
<p> <span class='footer_credit'>Copyright © 2024 Indic Technologies. </span></p>
</div>
</div>
</div>
</div>
</footer>
<script id='kirki-viewport-lists'>var kirkiViewports = {"md":{"value":1200,"scale":1,"minWidth":1200,"maxWidth":1200,"title":"Desktop","icon":"desktop","activeIcon":"desktop-hover","id":"md","type":"max"},"tablet":{"value":991,"scale":1,"minWidth":991,"maxWidth":991,"title":"Tablet","icon":"tablet-default","activeIcon":"tablet-hover","type":"max","id":"tablet"},"mobileLandscape":{"value":767,"scale":1,"minWidth":767,"maxWidth":767,"title":"Landscape","icon":"phone-hr-default","activeIcon":"phone-hr-hover","type":"max","id":"mobileLandscape"},"mobile":{"value":575,"scale":1,"minWidth":575,"maxWidth":575,"title":"Mobile","icon":"phone-vr-default","activeIcon":"phone-vr-hover","type":"max","id":"mobile"}};</script><script id='kirki-variable-lists'>var kirkiCSSVariable = {"data":[{"title":"Colors","key":"color","modes":[{"title":"Default","key":"default"}],"variables":[]},{"title":"Numbers","key":"size","modes":[{"title":"Default","key":"default"}],"variables":[]},{"title":"Text Styles","key":"text-style","modes":[{"title":"Default","key":"default"}],"variables":[]},{"title":"Font Family","key":"font-family","modes":[{"title":"Default","key":"default"}],"variables":[]}]};</script><script id="kirki-api-and-nonce">
window.wp_kirki = {
ajaxUrl: "https://www.indictechnologies.com/wp-admin/admin-ajax.php",
restUrl: "https://www.indictechnologies.com/wp-json/",
siteUrl: "https://www.indictechnologies.com",
apiVersion: "v1",
postId: "1846",
nonce: "48392d59b5",
call_from: "",
templateId: "",
context: {"id":1846,"type":"post"}
};
</script> <script>
const lazyloadRunObserver = () => {
const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
entries.forEach( ( entry ) => {
if ( entry.isIntersecting ) {
let lazyloadBackground = entry.target;
if( lazyloadBackground ) {
lazyloadBackground.classList.add( 'e-lazyloaded' );
}
lazyloadBackgroundObserver.unobserve( entry.target );
}
});
}, { rootMargin: '200px 0px 200px 0px' } );
lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
lazyloadBackgroundObserver.observe( lazyloadBackground );
} );
};
const events = [
'DOMContentLoaded',
'elementor/lazyload/observe',
];
events.forEach( ( event ) => {
document.addEventListener( event, lazyloadRunObserver );
} );
</script>
<link rel='stylesheet' id='eztoc-css' href='https://www.indictechnologies.com/wp-content/plugins/easy-table-of-contents/assets/css/screen.min.css?ver=2.0.82.2' type='text/css' media='all' />
<style id='eztoc-inline-css' type='text/css'>
div#ez-toc-container .ez-toc-title {font-size: 120%;}div#ez-toc-container .ez-toc-title {font-weight: 500;}div#ez-toc-container ul li , div#ez-toc-container ul li a {font-size: 95%;}div#ez-toc-container ul li , div#ez-toc-container ul li a {font-weight: 500;}div#ez-toc-container nav ul ul li {font-size: 90%;}.ez-toc-box-title {font-weight: bold; margin-bottom: 10px; text-align: center; text-transform: uppercase; letter-spacing: 1px; color: #666; padding-bottom: 5px;position:absolute;top:-4%;left:5%;background-color: inherit;transition: top 0.3s ease;}.ez-toc-box-title.toc-closed {top:-25%;}
</style>
<script type="text/javascript" src="https://www.indictechnologies.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=4.0.7" id="elementor-webpack-runtime-js"></script>
<script type="text/javascript" src="https://www.indictechnologies.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=4.0.7" id="elementor-frontend-modules-js"></script>
<script type="text/javascript" src="https://www.indictechnologies.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script>
<script type="text/javascript" id="elementor-frontend-js-before">
/* <![CDATA[ */
var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}},"hasCustomBreakpoints":false},"version":"4.0.7","is_static":false,"experimentalFeatures":{"additional_custom_breakpoints":true,"global_classes_should_enforce_capabilities":true,"e_variables":true,"e_opt_in_v4_page":true,"e_components":true,"e_interactions":true,"e_widget_creation":true,"import-export-customization":true},"urls":{"assets":"https:\/\/www.indictechnologies.com\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/www.indictechnologies.com\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/www.indictechnologies.com\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"b77d656100","atomicFormsSendForm":"8128c2a566"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":1846,"title":"Html%20-%20Indic%20Technologies","excerpt":"","featuredImage":false}};
/* ]]> */
</script>
<script type="text/javascript" src="https://www.indictechnologies.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=4.0.7" id="elementor-frontend-js"></script>
<script type="text/javascript" id="chaty-front-end-js-extra">
/* <![CDATA[ */
var chaty_settings = {"ajax_url":"https:\/\/www.indictechnologies.com\/wp-admin\/admin-ajax.php","analytics":"0","capture_analytics":"0","token":"a56ce8d014","chaty_widgets":[{"id":0,"identifier":0,"settings":{"cta_type":"simple-view","cta_body":"","cta_head":"","cta_head_bg_color":"","cta_head_text_color":"","show_close_button":1,"position":"right","custom_position":1,"bottom_spacing":"25","side_spacing":"25","icon_view":"vertical","default_state":"click","cta_text":"","cta_text_color":"#333333","cta_bg_color":"#ffffff","show_cta":"first_click","is_pending_mesg_enabled":"off","pending_mesg_count":"1","pending_mesg_count_color":"#ffffff","pending_mesg_count_bgcolor":"#dd0000","widget_icon":"chat-base","widget_icon_url":"","font_family":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","widget_size":"44","custom_widget_size":"44","is_google_analytics_enabled":0,"close_text":"Hide","widget_color":"#A886CD","widget_icon_color":"#ffffff","widget_rgb_color":"168,134,205","has_custom_css":0,"custom_css":"","widget_token":"3f3af5b4a9","widget_index":"","attention_effect":""},"triggers":{"has_time_delay":1,"time_delay":"0","exit_intent":0,"has_display_after_page_scroll":0,"display_after_page_scroll":"0","auto_hide_widget":0,"hide_after":0,"show_on_pages_rules":[],"time_diff":0,"has_date_scheduling_rules":0,"date_scheduling_rules":{"start_date_time":"","end_date_time":""},"date_scheduling_rules_timezone":0,"day_hours_scheduling_rules_timezone":0,"has_day_hours_scheduling_rules":[],"day_hours_scheduling_rules":[],"day_time_diff":0,"show_on_direct_visit":0,"show_on_referrer_social_network":0,"show_on_referrer_search_engines":0,"show_on_referrer_google_ads":0,"show_on_referrer_urls":[],"has_show_on_specific_referrer_urls":0,"has_traffic_source":0,"has_countries":0,"countries":[],"has_target_rules":0},"channels":[{"channel":"Whatsapp","value":"918019916594","hover_text":"WhatsApp","chatway_position":"","svg_icon":"<svg width=\"39\" height=\"39\" viewBox=\"0 0 39 39\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle class=\"color-element\" cx=\"19.4395\" cy=\"19.4395\" r=\"19.4395\" fill=\"#49E670\"\/><path d=\"M12.9821 10.1115C12.7029 10.7767 11.5862 11.442 10.7486 11.575C10.1902 11.7081 9.35269 11.8411 6.84003 10.7767C3.48981 9.44628 1.39593 6.25317 1.25634 6.12012C1.11674 5.85403 2.13001e-06 4.39053 2.13001e-06 2.92702C2.13001e-06 1.46351 0.83755 0.665231 1.11673 0.399139C1.39592 0.133046 1.8147 1.01506e-06 2.23348 1.01506e-06C2.37307 1.01506e-06 2.51267 1.01506e-06 2.65226 1.01506e-06C2.93144 1.01506e-06 3.21063 -2.02219e-06 3.35022 0.532183C3.62941 1.19741 4.32736 2.66092 4.32736 2.79397C4.46696 2.92702 4.46696 3.19311 4.32736 3.32616C4.18777 3.59225 4.18777 3.59224 3.90858 3.85834C3.76899 3.99138 3.6294 4.12443 3.48981 4.39052C3.35022 4.52357 3.21063 4.78966 3.35022 5.05576C3.48981 5.32185 4.18777 6.38622 5.16491 7.18449C6.42125 8.24886 7.39839 8.51496 7.81717 8.78105C8.09636 8.91409 8.37554 8.9141 8.65472 8.648C8.93391 8.38191 9.21309 7.98277 9.49228 7.58363C9.77146 7.31754 10.0507 7.1845 10.3298 7.31754C10.609 7.45059 12.2841 8.11582 12.5633 8.38191C12.8425 8.51496 13.1217 8.648 13.1217 8.78105C13.1217 8.78105 13.1217 9.44628 12.9821 10.1115Z\" transform=\"translate(12.9597 12.9597)\" fill=\"#FAFAFA\"\/><path d=\"M0.196998 23.295L0.131434 23.4862L0.323216 23.4223L5.52771 21.6875C7.4273 22.8471 9.47325 23.4274 11.6637 23.4274C18.134 23.4274 23.4274 18.134 23.4274 11.6637C23.4274 5.19344 18.134 -0.1 11.6637 -0.1C5.19344 -0.1 -0.1 5.19344 -0.1 11.6637C-0.1 13.9996 0.624492 16.3352 1.93021 18.2398L0.196998 23.295ZM5.87658 19.8847L5.84025 19.8665L5.80154 19.8788L2.78138 20.8398L3.73978 17.9646L3.75932 17.906L3.71562 17.8623L3.43104 17.5777C2.27704 15.8437 1.55796 13.8245 1.55796 11.6637C1.55796 6.03288 6.03288 1.55796 11.6637 1.55796C17.2945 1.55796 21.7695 6.03288 21.7695 11.6637C21.7695 17.2945 17.2945 21.7695 11.6637 21.7695C9.64222 21.7695 7.76778 21.1921 6.18227 20.039L6.17557 20.0342L6.16817 20.0305L5.87658 19.8847Z\" transform=\"translate(7.7758 7.77582)\" fill=\"white\" stroke=\"white\" stroke-width=\"0.2\"\/><\/svg>","is_desktop":1,"is_mobile":1,"icon_color":"#49E670","icon_rgb_color":"73,230,112","channel_type":"Whatsapp","custom_image_url":"","order":"","pre_set_message":"","is_use_web_version":"1","is_open_new_tab":"1","is_default_open":"0","has_welcome_message":"1","emoji_picker":"1","input_placeholder":"Write your message...","chat_welcome_message":"<p>How can I help you? :)<\/p>","wp_popup_headline":"Let's chat on WhatsApp","wp_popup_nickname":"","wp_popup_profile":"","wp_popup_head_bg_color":"#4AA485","qr_code_image_url":"","mail_subject":"","channel_account_type":"personal","contact_form_settings":[],"contact_fields":[],"url":"https:\/\/web.whatsapp.com\/send?phone=918019916594","mobile_target":"","desktop_target":"_blank","target":"_blank","is_agent":0,"agent_data":[],"header_text":"","header_sub_text":"","header_bg_color":"","header_text_color":"","widget_token":"3f3af5b4a9","widget_index":"","click_event":"","viber_url":""}]}],"data_analytics_settings":"off","lang":{"whatsapp_label":"WhatsApp Message","hide_whatsapp_form":"Hide WhatsApp Form","emoji_picker":"Show Emojis"},"has_chatway":""};
/* ]]> */
</script>
<script defer type="text/javascript" src="https://www.indictechnologies.com/wp-content/plugins/chaty/js/cht-front-script.min.js?ver=3.5.31737705622" id="chaty-front-end-js"></script>
<script type="text/javascript" src="https://www.indictechnologies.com/wp-content/plugins/chaty/admin/assets/js/picmo-umd.min.js?ver=3.5.3" id="chaty-picmo-js-js"></script>
<script type="text/javascript" src="https://www.indictechnologies.com/wp-content/plugins/chaty/admin/assets/js/picmo-latest-umd.min.js?ver=3.5.3" id="chaty-picmo-latest-js-js"></script>
<script type="text/javascript" src="https://www.indictechnologies.com/wp-content/plugins/th-widget-pack/js/themo-foot.js?ver=2.2.6" id="themo-js-foot-js"></script>
<script type="text/javascript" src="https://www.indictechnologies.com/wp-content/themes/stratusx/assets/js/vendor/vendor_footer.js?ver=1.2" id="t_vendor_footer-js"></script>
<script type="text/javascript" src="https://www.indictechnologies.com/wp-content/themes/stratusx/assets/js/main.js?ver=1.3" id="roots_main-js"></script>
<script type="text/javascript" id="eztoc-scroll-scriptjs-js-extra">
/* <![CDATA[ */
var eztoc_smooth_local = {"scroll_offset":"30","add_request_uri":"","add_self_reference_link":""};
/* ]]> */
</script>
<script type="text/javascript" src="https://www.indictechnologies.com/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js?ver=2.0.82.2" id="eztoc-scroll-scriptjs-js"></script>
<script type="text/javascript" src="https://www.indictechnologies.com/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1" id="eztoc-js-cookie-js"></script>
<script type="text/javascript" src="https://www.indictechnologies.com/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2" id="eztoc-jquery-sticky-kit-js"></script>
<script type="text/javascript" id="eztoc-js-js-extra">
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>","chamomile_theme_is_on":""};
/* ]]> */
</script>
<script type="text/javascript" src="https://www.indictechnologies.com/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.82.2-1776879466" id="eztoc-js-js"></script>
</body>
</html>
