Introduction to HTML

HTML is used to create websites. HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags that describe document content. HTML documents are also called web pages.

images/articles/html/introduction-to-html.webp

HTML is used to structure a web page and its content. HTML consists of a series of elements.

1. HTML Elements

The three parts of HTML element are:

  1. Opening tag
  2. Closing tag
  3. Content

HTML tags are keywords (tag names) surrounded by angle brackets (<>) like <html>. Normally, tags come in pairs - start or opening tag and end or closing tag. The end tag is written like the start tag, with a forward slash (/) before the tag name like </html>. tags are not displayed on the web page but offer instructions to the browser about the meaning and structure of the content.  

The opening tag, the closing tag, and the content together comprise the element.

2. HTML Attributes

Elements can also have attributes that contain extra information about the element that carries them. They always appear on the opening tag of the element.

generally, attributes are made up of two parts - name and value. Some attributes (boolean attributes) have no value, such as required.

The name is the property of the element that you want to set. The value is what you want the value of the property to be.

  • HTML5 standard does not require lower case attribute names. However, it is recommended to use lower case as it is the most common good coding practice.
  • HTML5 standard also does not require quotes around attribute values. Again, it is recommended to use double style quotes as it is the most common in HTML.

3. Void Elements

Some elements have no content and are called void elements. For example, img. Void elements does not have closing tag. This is because a void element doesn't wrap content to affect it.

4. HTML Versions

Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2012

5. Where to write HTML Code

You don't need any special programs to write web pages. You can simply use a text editor such as Notepad on Windows or TextEdit on a Mac, and save your files with the .html file extension.

6. Basic HTML Structure

1. The html Element

Whenever you write a web page in HTML, the whole of the page is contained between the opening <html> and closing </html> tags.

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>My First HTML Page!</title>
 </head>
 <body>
  Hello World!
 </body>
</html>

The lang attribute with a value of en, specifies that the document is in English. This attribute is optional.

Inside the <html> element, there are two main parts:

  1. The <head> element: This contains information about the page. For example, it contains title and description of the page, or instructions on where a browser can find CSS rules that explain how the document should look.
  2. The <body> element: This contains the information you actually see in the main browser.

Together, the <html>, <head>, and <body> elements make up the skeleton of an HTML document - they are the foundation upon which every web page is built.

2. The head Element

The first line inside the head defines the character encoding for the document.

<meta charset="utf-8">

In nearly all cases, utf-8 is the value you will be using in your documents. This element sets the character set your document.

3. The body Element

This contains all the content that you want to show to your users when they visit your page.

Create Basic HTML Page

Open a text editor like Notepad or Notepad++. Type the HTML code and save the file with the .html extension.