Home » Learn » HTML

HTML Basics 101

 · 3 min · Nasir

What is HTML?

Learn HTML

To create websites or web apps, a grasp of HTML is needed. This article aims to provide an introduction to that.

Have you heard of extensions such as .jpeg for images and .mp3 for audios? Similarly, HTML, or the HyperText Markup Language, is the standard markup language for files with the .html extension for web pages to show in a web browser. It can have a simple or an intricate structure depending on how the web developer wishes it.

To create one from scratch, open a text editor and save the file with the .html extension instead of .txt.

Elements

HTML is made out of different elements. There are utilized to surround, wrap, or mark up distinct portions of content to show or behave particularly. The surrounding tags alters the content into bold words, an image to show, and others.

Paragraph Element

Consider the following text:

Welcome to Heksagon

We could specify it as a paragraph by surrounding it with the <p> element:

<p>Welcome to Heksagon</p>

An element consists of the content, wrapped between the opening and closing tags like so:

An element
The basic structure of an element.

Note: Tags in HTML could be written in uppercase or lowercase; they are not case-sensitive. A <title> tag may be written as <title>, <TITLE>, <Title>, <TiTlE>, etc., and it will work. However, for consistency and readability, it is best practice that all tags are written in lowercase.

Analysis of an HTML document

Basic Structure

The following is a skeleton structure of an HTML Document (toggle between HTML and Result):

See the Pen Sample HTML by Heksagon (@Heksagonnet) on CodePen.


Yes, it is not much right now. But the above example acts as a base to understand HTML before moving to its more advance structures.

The Doctype

<!DOCTYPE html> is to make sure the HTML document work as intended.

HTML Element

The <html>...</html> element encompasses all of the component of the page. Otherwise, it is also known as the root element.

Head Element

This element contains other elements to be included in the HTML page but it is not shown directly to the website visitors. The <head>...</head> element may include page title, CSS to style the website, page description, other metadata (data that supplies information about other data) and many more.

Title Element

Where is the Webpage Title shown in between the <title>...</title> tags?

Title Tag
It will appear in the browser's title bar or in the page's tab.

The title element will be identified as the main title of the page and shown at bookmarks, or when sharing to social media websites other than in the browser’s title bar or in the page’s tab.

Body Element

The <body>...</body> element includes the content that is directly shown to website visitors. It may in the form of text, images, videos, games, audio tracks, or anything that the web developer types.

Heading Element

We have seen the paragraph element. In a single web page, there may be more than one paragraph. Therefore the heading element signifies the title of each paragraph or each content partition.

See the Pen Sample HTML by Heksagon (@Heksagonnet) on CodePen.


Each web page should have a unique <h1> element to signify the main content of the page. This is important for SEO (Search Engine Optimization) which will be discussed later on.

Summary

Congratulations for reaching the end! I hope you have enjoyed this short introduction. You now have a basic grasp of HTML documents in terms of how it looks like, and writing a few elements. The following articles will discuss further and explore other concepts of HTML.

We use cookies to improve your experience on our site and to show you relevant advertising.

Read cookie policy

Accept & Close