HTML Tutorial

Table of content

HTML stands for HyperText Markup Language, it is a Standard Markup language for web pages. HTML is used to create content and structure of any web page. If you think of the human body as a web page then HTML is the skeleton of the body. It is the building block of 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.

In this tutorial you will learn html fundamentals like tags, attributes, layouts,etc. Aim of this tutorial is to make you HTML expert by covering each tag attribute's example codes. You can make changes on the provided code of each article and see the difference live.

Who Should Learn HTML?

This HTML tutorial is designed for aspiring Web Designers and Developers with a need to understand the HTML and its newest versions(HTML5) in enough detail along with its simple overview, and practical examples. We highly recommend you to do code on each topic mentioned in the left bar. With our “Edit & Run” run button button you can edit the HTML code and view the result.

HTML Online Editor

We offer an HTML Online Editor that enables you to edit and execute HTML code directly within your web browser. Simply click the "Run" button icon to see the HTML Hello World program in action.

<!DOCTYPE html>
<html>
<head>
    <title>Online HTML Editor</title>
</head>
<body>
    <h1>Online HTML Editor</h1>
    <p>Hello World</p>
</body>
</html>

Why to Learn HTML?

HTML is a MUST for students and working professionals to become a Web Developer. HTML is being widely used to create web pages with the help of different tags and attributes along with the HTML you can learn CSS and JavaScript.

  • Create a Website: 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 career 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 the best results.

Get Started with HTML

By keeping things in mind like, having no knowledge to sound knowledge of HTML we have categories topics in 12 smaller parts, so learning curve can be easy as much as possible and you can relate topics like where and when to use which tag or attrubute.

  • HTML Basics: In basic part we have covered all the fundamentals of HTML like - editors, basic tags, elements, attributes, heading, paragraph, formatting, etc..
  • HTML Tables: After getting the knowledge of fundamentals of HTML we should learn about tables. The primary tags used to create tables are <table>, <tr>, <td>, and <th>.
  • HTML Lists: The lists can be ordered or underdered depending on the requirement. In html we can create both order and unorder lists by using <ol> and <ul> tags and for the list item we can use <li> tag.
  • HTML Links: Links allow visitors to navigate between Web sites by clicking on words, phrases, and images. A link is specified using HTML tag <a>.
  • HTML Backgrounds: Background of a webpage is a layer behind its content, which includes text, images, colors and various other elements. HTML allow to change background color of any elements within a document using bgcolor attribute.
  • HTML Colors: Colors are a way of specifying the appearance of web elements. Colors are very important aspects of web design, as they not only enhance the visual appeal but also influence user behavior. They are also used to evoke emotions and highlight important content.
  • HTML Form: HTML forms are simple form that has been used to collect data from the users. HTML form has interactive controls and varius input types such as text, numbers, email, passowrd, radio butons, checkboxes, buttons, etc. There are lots of form elements in HTML, you can learn those from HTML - Forms.
  • HTML Media: Media is an improtant element in HTML, sometines we wants to include videos and audios into our websites, we can embed any media into our websites.
  • HTML Header: Header part of an HTML document is represented by the <head> tag. It serve as a container of various other important tags like <title>, <meta>, <link>, <base>, <style>, <script>, and <noscript> tags.
  • HTML Layout: Layouts specifies the arrangement of components on an HTML web page. A good layout structure of the webpage is important to provide a user-friendly experience on our website. It takes considerable time to design a website's layout with a great look and feel.
  • HTML Graphics: HTML allows two types of graphics development in the doument directly. SVG is an XML-based markup language used for creating scalable 2D graphics and graphical applications, and Canvas gives you an easy and powerful way to draw graphics using JavaScript.
  • HTML API: APIs are essential for the development of software because they let programmers use the features and services offered by other software components to create more complex applications. Let’s dive into the API we will learn in this tutorial - Geolocation, Drag & Drop, Web Workers, WebSockets, Web Storage and Server Sent Events.

After completing the above topics you can check our Interview Questions, Quizes, and Tests set to test your knowledge.

HTML Applications

As mentioned before, HTML is one of the most widely used languages on the web.

  • Web Page Development: HTML is used to create pages that are rendered over the web. Almost every page of the web has HTML tags in it to render its details in the browser.
  • Responsive UI: HTML pages now-a-days works well on all platforms, mobile, tabs, desktop or laptops owing to responsive design strategy.
  • Game Development: HTML5 has native support for rich experience and is now useful in the gaming development arena as well.
  • Mobile application development: HTML with CSS3 and Javascript can be used for developing cross-platform mobile applications.
  • Multimedia and video streaming: HTML5 offers support for multimedia elements like video and audio, which enables seamless media playback directly in web browsers.
  • Geolocation: Allows websites to request a user’s geographic location. This is helpful for location-based applications and services.

Prerequisites to Learn HTML

HTML is text-based computer coding so there are no prerequisites for learning it, you will just have to be familiar with computer, and basic working knowledge with files or directory.

Careers and Salary

HTML (Hypertext Markup Language) and HTML5 are the backbone of web development. By completing this tutorial you will confident enough to apply on the below mentioned profiles.

  • HTML Email Developer - Salary Ranges from ₹ 2.0 Lakhs to ₹ 11.0 Lakhs
  • HTML Coder - Salary Ranges from ₹ 1.0 Lakhs to ₹ 7.3 Lakhs

Along with HTML if you learn CSS and JavaScript then number of oppurtunities will grow.

Frequently Asked Questions about HTML

There are some very Frequently Asked Questions(FAQ) about HTML, this section tries to answer them briefly.

The full form of HTML is Hypertext Markup Language. It is the standard markup language for developing web pages.

HTML is used in web pages for the following reasons −

  • It is used to provide a basic structure to web pages.

  • The HTML tags help search engines understand the content of the web page.

  • The HTML forms enable user interactions and include call-to-action buttons, text fields, checkboxes, and many more.

  • Using HTML, we can embed various types of media like images, audio, video, etc., into a web page.

  • It is also used in the creation of hyperlinks that can point to other web pages, different sections of the same page, or other resources on the web.

To save an HTML file, follow these simple steps −

  • Open a text editor (like Notepad, Sublime Text, Atom, etc.) on your system.

  • Write your HTML code.

  • Click on the "File" menu in your text editor.

  • Click on "Save As".

  • In the dialogue box, choose the location where you want to save the file.

  • Type a name for your file, followed by the .html extension so that the browser interprets it as an HTML file. For example, index.html.

  • Click "Save".

HTML was invented by Tim Berners-Lee, a physicist at CERN, in late 1991. However, the first standard HTML specification was published in 1995.

HTML has several key features as follows −

  • Simplicity − HTML is easy to learn and use. It has a clear and straightforward syntax which makes it simpler for beginners also.

  • Flexibility − HTML allows developers to create a wide variety of web documents, from simple static web pages to complex web applications.

  • Platform Independent − HTML is a standard that is supported by all modern web browsers. This means that an HTML document can be displayed in any web browser on any operating system.

  • Linking − One of the key features of HTML is the ability to create links to other web pages.

  • Embedding Media − It also allows embedding various types of media like images, audio, video, etc., into a web page.

  • Interactivity − HTML provides elements to create interactive forms that allow users to input data. This is crucial for tasks like user registration, submitting search queries, and more.

  • Semantics − HTML5 introduced semantic elements that convey the meaning of the content to the browser and developer. Examples include <header>, <footer>, <article>, and <section>.

  • Integration − HTML works well with other languages that are commonly used in web development, such as CSS (Cascading Style Sheets) and JavaScript. CSS is used for styling and layout of web pages while JavaScript is used for interactivity.

The latest version of HTML is HTML 5 which was drafted in 2008 and accepted in the year 2014 by W3C.

No, HTML is not a programming language. It is a markup language that structures the content on the web. It stands for HyperText Markup Language.

HTML Web Storage (DOM storage) is a feature of HTML5 that allows web applications to store data locally within the user's browser. It stores data in the form of key-value pairs.

There are two types of web storage −

  • localStorage − This object stores data with no expiration date. The data will not be erased when the browser is closed and will be available in the next session.

  • sessionStorage − This object stores data for one session. The data is lost when the browser tab is closed.

To run an HTML file in a browser, first, save your HTML file with a .html extension. For example, index.html. Then, locate your file and double-click to open it in your default browser.

HTML components, also known as HTML elements, are the building blocks of HTML pages. They represent parts of a webpage and are defined by HTML tags. Here are some of the main components −

  • DOCTYPE Declaration − An HTML document starts with a <!DOCTYPE html> declaration followed by a <html> tag.

  • Headings − HTML provides six levels of headings from <h1> to <h6>, with <h1> being the highest (or most important) level and <h6> the lowest.

  • Paragraphs − The <p> tag defines a paragraph.

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

  • Images − The <img> tag is used to embed images in an HTML page.

  • Lists − HTML supports ordered, unordered, and definition lists.

  • Tables − The <table> tag defines a table in HTML.

  • Forms − The <form> tag is used to create an HTML form for user input.

  • Divisions & Sections − The <div> tag is a container unit that encapsulates other page elements and divides the HTML document into sections. HTML5 introduced semantic elements like <section>, <article>, <header>, <footer>, <nav>, etc., which serve a similar purpose but provide additional semantic information.

  • Media Elements − HTML5 introduced media elements like <video> and <audio> which can be used to embed video and audio files in an HTML document.

Advertisements