#1 Introduction to HTML
Introduction to HTML.
What is HTML?
HTML stands for HyperText Markup Language, which is the most widely used language on the Web to develop web pages.
HTML was created by Berners-Lee in late 1991 but “HTML 2.0” was the first standard HTML specification which was published in 1995.
HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used currently we are having the HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.
Why to learn HTML?
Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.
HTML is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Web Development Domain. I will list down some of the key advantages of learning HTML:
- Create Web site - You can create a website or customize an existing web template if you know HTML well.
- Become a web designer - If you want to start a carrer as a professional web designer, HTML and CSS designing is a must skill.
- Understand web - If you want to optimize your website, to boost its speed and performance, it is good to know HTML to yield best results.
- Learn other languages - Once you understands the basic of HTML then other related technologies like javascript, php, or angular are become easier to understand.
History of HTML
Since the early days of the World Wide Web, there have been many versions of HTML
| Year | Version |
|---|---|
| 1989 | Tim Berners-Lee invented www |
| 1991 | Tim Berners-Lee invented HTML |
| 1993 | Dave Raggett drafted HTML+ |
| 1995 | HTML Working Group defined HTML 2.0 |
| 1997 | W3C Recommendation: HTML 3.2 |
| 1999 | W3C Recommendation: HTML 4.01 |
| 2000 | W3C Recommendation: XHTML 1.0 |
| 2008 | WHATWG HTML5 First Public Draft |
| 2012 | WHATWG HTML5 Living Standard |
| 2014 | W3C Recommendation: HTML5 |
| 2016 | W3C Candidate Recommendation: HTML 5.1 |
| 2017 | W3C Recommendation: HTML5.1 2nd Edition |
| 2017 | W3C Recommendation: HTML5.2 |
| 2021 | W3C Working Group Note, 28 January 2021 |
This tutorial follows the latest HTML5 standard.
Basic HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>- The
<!DOCTYPE html>declaration defines that this document is an HTML5 document - The
<html>element is the root element of an HTML page - The
<head>element contains meta-information about the HTML page - The
element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)</li> <li>The <body> element defines the document’s body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.</li> <li>The <code><h1></code> element defines a big text (there are few more heading tags we will see)</li> <li>The <code><p></code> element defines a paragraph</li> </ul> <h2 id="what-is-an-html-element-tags">What is an HTML Element (tags)?</h2> <p>An HTML element is defined by a start tag, some content, and an end tag:</p> <p><code><tagname>content goes here...</tagname></code></p> <p>The HTML element is everything from the start tag to the end tag:</p> <pre class="astro-code dark-plus" style="background-color:#1E1E1E;color:#D4D4D4; overflow-x: auto;" tabindex="0" data-language="plaintext"><code><span class="line"><span><h1>My First Heading</h1></span></span> <span class="line"><span><p>My first paragraph.</p></span></span></code></pre> <table> <thead> <tr> <th>Start tag</th> <th>Element content</th> <th>End tag</th> </tr> </thead> <tbody> <tr> <td><h1></td> <td>My First Heading</td> <td></h1></td> </tr> <tr> <td><p></td> <td>My first paragraph.</td> <td></p></td> </tr> <tr> <td><br></td> <td><em>none</em></td> <td><em>none</em></td> </tr> </tbody> </table> <p>Hope you enjoyed this tutorial. See you in the next post.</p> <p>Next: <a href="https://www.codesnail.com/editor-for-html/">#2 Editors for HTML</a></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>