HTML Tutorial

Written By:

Updated on

HTML Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 1179 reviews
  1. Home
  2. Frontend
  3. HTML Tutorial
  1. HTML
  2. HTML Origin
  3. HTML Versions
  4. HTML Editors
  5. HTML Tags
  6. HTML Attributes
  7. HTML Doctype
  8. HTML Comments
  9. Online Editor

HTML Tutorials for beginners with HTML5. Learn HTML from beginning with latest HTML5 web standards and live code examples.

What is HTML

HTML or Hyper Text Markup language is the standard language of web used to build the structure of a website. HTML along with CSS and JavaScript is the core part of web technologies. HTML is used to create & display content of a website. This content can be text, headings, media, list, tables etc on a web browser. It is impossible to build a website without html.

HTML is very easy to learn. HTML contains predefined tags and attributes used to build webpage structure. HTML is browser embedded and need no compilation. HTML is parsed in browser on runtime.

What is a Markup Language?

A Markup Language is a computer language which use tags and attributes to create structure. For exp HTML and XML both are markup languages. XML is used to send, store and receive data on server.

Popular Markup Languages

  1. HTML
  2. XML
    1. XHTML
    2. SVG
  3. SGML

HTML is used in?

HTML is used in following applications.

  1. Website Designing and Development
  2. Emailers Designing
  3. Hybrid Applications (like VS Code)
HTML Tutorial
HTML Tutorial

How to learn HTML

HTML is a markup language, as it contains markup tags or tags. HTML Tags are used to build structure of a webpage like paragraphs, headings, tables, lists, buttons, forms, images, audio, video etc.

HTML build the structure of web pages. It is also known as Building Block of a website. Browsers interpret html tags and render content. HTML is Browser Interpreted language, thus load fast as compilation is not required.

To learn web designing, one should starts with HTML first. HTML includes 145 tags and attributes to build webpage layout. The latest version of html is HTML5, which included HTML, CSS and JavaScript. HTML and CSS are static languages, while JavaScript is dynamic programming language.

HTML Facts

  1. HTML is not a programming language.
  2. HTML can build Websites, emails and Hybrid Apps.
  3. HTML and CSS are Second Most Popular Technologies in Stack Overflow Survey 2022
  4. World's First Web site was created on 12 Mar 1989 using html only. World's first website.
  5. HTML comes under SGML.

HTML Origin

Tim Berners Lee

Tim Berners-Lee (CEO W3C)

HTML was invented by a CERN scientist Tim Berners-Lee in 1989. The primary purpose to invent HTML was to share information on web for Research Scientists and Engineers so that other professionals in same domain can have access to your research work. Writing Books and Journals are only limited to some people. To run html, a web browser WorldWideWeb was developed, but later on it was renamed to Nexus.

Tim Berners-Lee's Inventions

  1. HTML
  2. HTTP
  3. Web Server
  4. WorldWideWeb Browser

Visit World's First Website

W3C

W3C is the organization who build web standards for the development of World Wide Web. W3C was founded by Tim Berners-Lee in Oct 1994. Tim Berners-Lee is also the current CEO of W3C. To check a webpage standards, we use W3C Validator.

WHATWG

WHATWG or Web Hypertext Application Technology Working Group is a community that develops & maintains web standards including HTML and DOM. WHATWG was founded in 2004 by members of Apple, Mozilla and Opera. Currently Google and Microsoft are also members of WHATWG.

World Wide Web facts

  1. There are 1.8 Billions+ websites on world wide web.
  2. Archie was the first search engine.
  3. First image on web was published on 1992.
  4. China is no 1 on web surfers list.
  5. India is second country on most web surfers list.
  6. Mobile Websites is more in use then desktop websites.

HTML Versions

HTML was first formed in 1991. Till now, HTML receive many updates. Here is a list of HTML versions with release date.

Its recommended to use HTML5 versions for all websites now.

HTML Versions
HTML Version Date
HTML 1991
HTML 2 1995
HTML 3.2 1997
HTML 4 1997
HTML 4.01 1999
XHTML 1.0 2000
XHTML 1.1 2001
HTML5 2011
HTML5.2 2017
HTML5.3 2021

HTML Editors

HTML Editor is the software used to write html code. A web browser is used to view webpage. Some Popular code editors are notepad++, Brackets, sublime text, atom, and Visual Studio Code etc. You can use any one of them.

List of Top HTML Editors

HTML Editor OS Type
VS Code ( by Microsoft) Windows / Mac / Linux Open Source
Sublime Text Windows / Mac / Linux Open Source / Paid
Brackets (by Adobe) Windows / Mac / Linux Open Source
Atom ( by Github) Windows / Mac / Linux Open Source
Notepad++ Windows Open Source
Dreamweaver Windows / Mac Licensed

Brackets, Visual Studio Code, and Atom by Github editors are Hybrid apps build using electron ( a NodeJS framework). The User Interface is developed using HTML and CSS and functional part by JavaScript / NodeJS.

How to create a website using html

To build a webpage using html, use following steps. These steps are based on HTML5 web standards. Just follow these simple steps, and your first html page is ready, with W3C Standards.

  1. Open code editor.
  2. Create the doctype of webpage. e.g. <!doctype html>
  3. Create Parent html tag e.g. <html> </html>
  4. Create head tag inside html tag, e.g. <head> </head>
  5. Create body tag after head tag closing, e.g. <body> </body>
  6. Add title tag inside head, e.g. <title> </title>
  7. Add meta tag inside head, e.g. <meta charset="utf-8">
  8. Save page as index.html file on your system.
  9. Double Click the file and your webpage is live on browser.
  10. To edit webpage, right click on html file and select open in editor.

Hello HTML Example


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Webpage Title</title>
    <meta charset="utf-8">
</head>
<body>
</body>
</html>

Add text to HTML

In body tag, add some text, for example, Hello HTML. 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello HTML</title>
    <meta charset="utf-8">
</head>
<body>
    Hello HTML 
</body>
</html>

HTML5 recommended structure

This is the recommended Html5 structure used in modern websites including responsive websites.

To autocomplete this structure, use html:5 or ! in VS CODE and press enter or tab key. This is emmet extension preinstalled in VS Code. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Hello HTML</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
Hello HTML 
</body>
</html>

HTML Tags

HTML Tags are used to build components in a webpage. Everything in a webpage is create by HTML Tags. Here are some popular HTML Tags and their use.

Tag Name Description
<html> HTML Tag is the parent tag or root tag of a webpage.
<head> Head Tag is first child of html tag and is used to write the information for web browsers and Search engines.
<title> Title tag is used only once inside head tag. Title is always displayed in browsers tab. Title is also use-use full for search engines to know about the webpage. Its max character limit is 60-70. Title should be unique for every webpage.
<meta> Meta tag is used to define the charset family, description, keywords, Author, robots and Geo Location of a website.
<body> Body tag is used to create the page structure or content. Structure includes Headings, Paragraphs, images, tables, division, etc of the website. Body includes all the content which users see on a website.

Know more about HTML Tags

Overall, there are 145 Standard Tags in HTML5. These tags will be explained one by one in our next articles. To View Full List, Click Here, HTML Tags List

HTML Attributes

HTML Attributes are used to add additional information to an HTML Element. Attributes are used in start tag. An attribute can be used only once in a tag. Attribute repetition is not allowed. Here are some popular HTML Attributes.

Attribute Description
class group single or multiple elements. 
<p class="text">para</p>
id Set unique id of single element. 
<p id="text">para</p>
title Tooltip of an element. Shows title content on mouseover. 
<p title="this is sample title">para</p>
type Specific type of html Elements. 
<input type="text">
src Source of media elements like images, iframes, Audio, Video. 
<img src="logo.png" alt="">
href Hypertext Reference of Hyperlinks or Link Tag. 
<a href="about.html">About</a>

See all HTML Attributes.

HTML Doctype

An HTML page is always started with doctype first. HTML doctype is not a tag. Doctype define the html version to browsers, search engines and W3C validator with DTD. HTML Doctype

HTML5 Doctype


 <!doctype html>

HTML Comments

HTML Comments are used to write messages or notifications for web developers. Comments are started with <!-- and ends with -->. These comments are not visible in browsers, but remain in page source code. 


    <!-- HTML Comment -->

HTML Online Editor

Try HTML Online Editor to quickly check your html output while typing.

Live View

The output in online editor and web browser may very. Please run html file in web browser for actual output of code.