HTML Introduction

HTML stands for HyperText Markup Language. It is a markup language used to create web pages and applications that can be displayed on the internet. HTML is a straightforward computer coding language that was developed in the 90s. It is used to design web pages using a markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between web pages.

HTML tags are used to define HTML elements. An HTML element usually consists of a start tag and an end tag, with the content inserted in between. HTML tags are used to create HTML documents and render their content on web browsers. Some of the basic HTML tags include <html>, <head>, <title>, <body>, <h1> to <h6>, <p>, <br>, <hr>, <ul>, <ol>, <li>, <a>, <img> and many more .

HTML Versions

HTML was first developed by British physicist Tim Berners-Lee in 1990. Since that time, there have been many versions of HTML.

Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

Basic HTML Concepts

Elements, tags, and attributes are basic concepts in HTML.

HTML element is a main structural unit of a web page. HTML tags are used to define HTML elements, and attributes provide additional information about these elements.

HTML Tags

HTML tags are used to structure website content (text, hyperlinks, images, media, etc). Tags are not displayed in the browsers, they only “instruct” browsers how to show the content of the web page.

There are over 100 tags in HTML, and you can find them in our HTML tutorial.

HTML tags are written in angle brackets (e.g <html>).

Most of HTML tags comes in pairs, like <p> </p> tags. The first tag in a pair called the start (opening) tag, and the second tag is the end (closing) tag. The information is written between opening and closing tags.

However, there are unpaired, or empty tags, which only have opening tag. (for ex. <img/>).

Let’s consider an example.

If you need to define a paragraph (which is an element ) you should use <p> tag. The content of the paragraph you should write between opening (<p>) and closing (</p>) tags.

Example

This is a paragraph between opening <p> and closing </p> tags.

HTML Attributes

HTML attributes are added to an HTML element to provide additional information about it. For example, if you define an image with <img/> tag, you can use src, height, width attributes to provide information about its source, height, width correspondingly.

Structure of an HTML Document

The <!DOCTYPE html> declaration specifies the HTML version used in the document. Every HTML document should start with this declaration so that the browsers can render the page compliant with HTML standards.

There exist several types of <!DOCTYPE> defined for each HTML version.

All the content on the webpage is written between <html> </html> tags. The <html> element is used to give information to the browsers that it is an HTML document.

The <head> element contains metadata (data about the HTML document), character set, document title, styles, etc. This data is not shown to viewers.

The <title> displays the title of the website in the browser tab when the page is loaded. The title is written between <title> </title> tags.

The <body> element contains the content of the webpage (text, images, videos, etc). The content is written between <body> </body>.

Heading elements contain different types of headings. There are six heading levels - <h1>-<h6>, where <h1> is the most important and <h6> least important tags.

The <p> element contains paragraphs of the text. The content is written between <p> and </p> tags.

Example

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the document</title>
  </head>
  <body>
    <h1>The most important heading.</h1>
    <p> The first paragraph.</p>
    <h2> Subheading</h2>
  </body>
</html>

Result

structure-example

To start writing HTML code for your website you will need an editor. Let’s speak about HTML editors in our next chapter.

Practice Your Knowledge

What is HTML and what's its use according to the given webpage?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?