HTML Tutorial
HTML is the standard markup language for Web pages.
How we Learn
We will learn with example and you can see output here like following,
Just click on HTML, CSS, and JS tab to see the code, you can edit here as well as on codepen by just click on Edit on Codepen on the right top
See the Pen intro to html by Arpit (@soniarpit) on CodePen.
HTML is easy to learn. Following is table of content. So refer this first.
Table of Content (HTML Tutorial)
Before starting an HTML tutorial and If you are new in web development then read the following articles.
Now table of content for HTML tutorial. Just click on link to access tutorial.
- Introduction to HTML
- Editors for HTML
- HTML Basic
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- Text Formatting
- HTML Phrase tags
- HTML Links
- HTML Images
- HTML Tables
- HTML Lists
- HTML Block and Inline Tags
- Block-level Elements
- Inline Elements
- The tag
- The tag
- HTML class Attribute
- HTML id Attribute
- HTML iFrame
- The Head Element
- The HTML Tag
- The HTML
Tag</a></li> <li><a href="https://www.codesnail.com/html-the-head-element/#2-the-html-ltmetagt-tag">The HTML <meta> Tag</a></li> <li><a href="https://www.codesnail.com/html-the-head-element/#4-the-html-ltbasegt-tag">The HTML <base> Tag</a></li> <li><a href="https://www.codesnail.com/html-the-head-element/#5-the-html-ltlinkgt-tag">The HTML <link</a><a href="https://www.codesnail.com/html-the-head-element/#5-the-html-ltlinkgt-tag">></a> <a href="https://www.codesnail.com/html-the-head-element/#5-the-html-ltlinkgt-tag">Tag</a></li> <li><a href="https://www.codesnail.com/html-the-head-element/#6-the-html-ltstylegt-tag">The HTML <style> Tag</a></li> <li><a href="https://www.codesnail.com/html-the-head-element/#7-the-html-ltscriptgt-tag">The HTML <script> Tag</a></li> </ul> </li> <li><a href="https://www.codesnail.com/html-semantic-elements/">HTML Semantic Elements</a> <ul> <li><a href="https://www.codesnail.com/html-semantic-elements/#0-what-are-semantic-elements">What are Semantic Elements?</a></li> <li><a href="https://www.codesnail.com/html-semantic-elements/#1-semantic-elements-in-html">Semantic Elements in HTML</a></li> <li><a href="https://www.codesnail.com/html-semantic-elements/#2-why-semantic-elements">Why Semantic Elements?</a></li> <li><a href="https://www.codesnail.com/html-semantic-elements/#3-html-ltsectiongt-element">HTML <section> Element</a></li> <li><a href="https://www.codesnail.com/html-semantic-elements/#4-html-ltarticlegt-element">HTML <article> Element</a></li> <li><a href="https://www.codesnail.com/html-semantic-elements/#6-html-ltheadergt-element">HTML <header> Element</a></li> <li><a href="https://www.codesnail.com/html-semantic-elements/#7-html-ltfootergt-element">HTML <footer> Element</a></li> <li><a href="https://www.codesnail.com/html-semantic-elements/#8-html-ltnavgt-element">HTML <nav> Element</a></li> <li><a href="https://www.codesnail.com/html-semantic-elements/#9-html-ltasidegt-element">HTML <aside> Element</a></li> <li><a href="https://www.codesnail.com/html-semantic-elements/#10-html-ltfiguregt-and-ltfigcaptiongt-tags">HTML <figure> and <figcaption> Tags</a></li> </ul> </li> <li><a href="https://www.codesnail.com/html-entities/">HTML Entities</a></li> <li><a href="https://www.codesnail.com/html-forms-basic/">HTML Forms – Basic</a> <ul> <li><a href="https://www.codesnail.com/html-forms-basic/#0-html-ltformgt-element">HTML <form> element</a></li> <li><a href="https://www.codesnail.com/html-forms-basic/#1-html-ltinputgt-element">HTML <input> element</a></li> </ul> </li> <li><a href="https://www.codesnail.com/html-form-attribute/">HTML Form Attribute</a> <ul> <li><a href="https://www.codesnail.com/html-form-attribute/#0-action-attribute">Action attribute</a></li> <li><a href="https://www.codesnail.com/html-form-attribute/#1-target-attribute">Target attribute</a></li> <li><a href="https://www.codesnail.com/html-form-attribute/#2-method-attribute">Method Attribute</a></li> <li><a href="https://www.codesnail.com/html-form-attribute/#3-autocomplete-attribute">Autocomplete attribute</a></li> <li><a href="https://www.codesnail.com/html-form-attribute/#4-novalidate-attribute">Novalidate Attribute</a></li> <li><a href="https://www.codesnail.com/html-form-attribute/#5-enctype-attribute">enctype attribute</a></li> <li><a href="https://www.codesnail.com/html-form-attribute/#6-list-of-all-ltformgt-attributes">List of All <form> Attributes</a></li> </ul> </li> <li><a href="https://www.codesnail.com/html-form-elements/">HTML Form Elements</a> <ul> <li><a href="https://www.codesnail.com/html-form-elements/#0-html-ltformgt-elements">HTML <form> Elements</a></li> <li><a href="https://www.codesnail.com/html-form-elements/#1-ltinputgt-tag"><input> Tag</a></li> <li><a href="https://www.codesnail.com/html-form-elements/#2-ltlabelgt-tag"><label> Tag</a></li> <li><a href="https://www.codesnail.com/html-form-elements/#3-ltselectgt-tag"><select> Tag</a></li> <li><a href="https://www.codesnail.com/html-form-elements/#6-ltoptgroupgt-tag"><optgroup> Tag</a></li> <li><a href="https://www.codesnail.com/html-form-elements/#7-lttextareagt-tag"><textarea> Tag</a></li> <li><a href="https://www.codesnail.com/html-form-elements/#8-ltbuttongt-tag"><button> Tag</a></li> <li><a href="https://www.codesnail.com/html-form-elements/#9-ltfieldsetgt-and-ltlegendgt-tag"><fieldset> and <legend> Tag</a></li> <li><a href="https://www.codesnail.com/html-form-elements/#10-ltdatalistgt-tag"><datalist> Tag</a></li> <li><a href="https://www.codesnail.com/html-form-elements/#11-ltoutputgt-tag"><output> Tag</a></li> </ul> </li> <li><a href="https://www.codesnail.com/html-input-types/">HTML Input types</a> <ul> <li><a href="https://www.codesnail.com/html-input-types/#0-html-input-types">HTML Input Types</a></li> <li><a href="https://www.codesnail.com/html-input-types/#1-input-type-text">Input Type Text</a></li> <li><a href="https://www.codesnail.com/html-input-types/#2-input-type-password">Input Type Password</a></li> <li><a href="https://www.codesnail.com/html-input-types/#3-input-type-submit">Input Type Submit</a></li> <li><a href="https://www.codesnail.com/html-input-types/#4-input-type-reset">Input Type Reset</a></li> <li><a href="https://www.codesnail.com/html-input-types/#5-input-type-radio">Input Type Radio</a></li> <li><a href="https://www.codesnail.com/html-input-types/#6-input-type-checkbox">Input Type Checkbox</a></li> <li><a href="https://www.codesnail.com/html-input-types/#7-input-type-button">Input Type Button</a></li> <li><a href="https://www.codesnail.com/html-input-types/#8-input-type-color">Input Type Color</a></li> <li><a href="https://www.codesnail.com/html-input-types/#9-input-type-date">Input Type Date</a></li> <li><a href="https://www.codesnail.com/html-input-types/#10-input-type-datetime-local">Input Type Datetime-local</a></li> <li><a href="https://www.codesnail.com/html-input-types/#11-input-type-email">Input Type Email</a></li> <li><a href="https://www.codesnail.com/html-input-types/#12-input-type-file">Input Type File</a></li> <li><a href="https://www.codesnail.com/html-input-types/#13-input-type-month">Input Type Month</a></li> <li><a href="https://www.codesnail.com/html-input-types/#14-input-type-number">Input Type Number</a></li> <li><a href="https://www.codesnail.com/html-input-types/#15-input-restrictions">Input Restrictions</a></li> <li><a href="https://www.codesnail.com/html-input-types/#16-input-type-range">Input Type Range</a></li> <li><a href="https://www.codesnail.com/html-input-types/#17-input-type-search">Input Type Search</a></li> <li><a href="https://www.codesnail.com/html-input-types/#18-input-type-tel">Input Type Tel</a></li> <li><a href="https://www.codesnail.com/html-input-types/#19-input-type-time">Input Type Time</a></li> <li><a href="https://www.codesnail.com/html-input-types/#20-input-type-url">Input Type Url</a></li> <li><a href="https://www.codesnail.com/html-input-types/#21-input-type-week">Input Type Week</a></li> </ul> </li> <li><a href="https://www.codesnail.com/html-input-attributes/">HTML Input Attributes</a> <ul> <li><a href="https://www.codesnail.com/html-input-attributes/#0-the-value-attribute">The value Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-attributes/#1-the-readonly-attribute">The readonly Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-attributes/#2-the-disabled-attribute">The disabled Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-attributes/#3-the-size-attribute">The size Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-attributes/#4-the-maxlength-attribute">The maxlength Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-attributes/#5-the-min-and-max-attributes">The min and max Attributes</a></li> <li><a href="https://www.codesnail.com/html-input-attributes/#6-the-multiple-attribute">The multiple Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-attributes/#7-the-pattern-attribute">The pattern Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-attributes/#8-the-placeholder-attribute">The placeholder Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-attributes/#9-the-required-attribute">The required Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-attributes/#10-the-step-attribute">The step Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-attributes/#11-the-autofocus-attribute">The autofocus Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-attributes/#12-the-height-and-width-attributes">The height and width Attributes</a></li> <li><a href="https://www.codesnail.com/html-input-attributes/#13-the-list-attribute">The list Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-attributes/#14-the-autocomplete-attribute">The autocomplete Attribute</a></li> </ul> </li> <li><a href="https://www.codesnail.com/html-input-form-attributes/">HTML Input form* Attributes</a> <ul> <li><a href="https://www.codesnail.com/html-input-form-attributes/#0-the-form-attribute">The form Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-form-attributes/#1-the-formaction-attribute">The formaction Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-form-attributes/#2-the-formenctype-attribute">The formenctype Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-form-attributes/#3-the-formmethod-attribute">The formmethod Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-form-attributes/#4-the-formtarget-attribute">The formtarget Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-form-attributes/#5-the-formnovalidate-attribute">The formnovalidate Attribute</a></li> <li><a href="https://www.codesnail.com/html-input-form-attributes/#6-the-novalidate-attribute">The novalidate Attribute</a></li> </ul> </li> <li><a href="https://www.codesnail.com/html-audio-control/">HTML Audio Control</a></li> <li><a href="https://www.codesnail.com/html-video-control/">HTML Video Control</a></li> <li><a href="https://www.codesnail.com/html-geolocation-api/">HTML Geolocation API</a></li> <li><a href="https://www.codesnail.com/html-drag-and-drop-api/">HTML Drag and Drop API</a></li> <li><a href="https://www.codesnail.com/html-web-storage-api/">HTML Web Storage API</a></li> <li><a href="https://www.codesnail.com/difference-between-html-and-xhtml/">Difference between HTML and XHTML</a></li> </ul> <p><em>Table of content will update as soon as new html tutorial will post</em>. But now this is done (updated).</p> <p><em>ref: w3schools, tutorialspoint, javatpoint</em></p> </div></article></main><footer><div class="border-t-2 border-dashed border-skin-line py-4 mt-16"><nav class="footer-nav w-full flex justify-between items-start"><ul class="flex gap-4 text-sm mb-5 text-skin-base/70"><li><a href="/about" class="hover:text-skin-accent">About</a></li><li><a href="/contact" class="hover:text-skin-accent">Contact</a></li><li><a href="/privacy" class="hover:text-skin-accent">Privacy</a></li><li><a href="/disclaimer" class="hover:text-skin-accent">Disclaimer</a></li></ul><button id="theme-btn" class="focus-outline" title="Toggles light & dark" aria-label="auto" aria-live="polite"><svg xmlns="http://www.w3.org/2000/svg" id="moon-svg"><path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" id="sun-svg"><path d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path></svg></button></nav><div class="flex justify-between text-sm items-center text-skin-base/60"><span>© 2026 All rights reserved.</span></div></div></footer><script src="/scripts/toggle_theme.js"></script></body></html>