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
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.
Consider the following text:
Welcome to Heksagon
We could specify it as a paragraph by surrounding it with the
<p>Welcome to Heksagon</p>
An element consists of the content, wrapped between the opening and closing tags like so:
Note: Tags in HTML could be written in uppercase or lowercase; they are not case-sensitive. A
<title>tag may be written as
<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
The following is a skeleton structure of an HTML Document (toggle between HTML and Result):
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.
<!DOCTYPE html> is to make sure the HTML document work as intended.
<html>...</html> element encompasses all of the component of the page. Otherwise, it is also known as the root 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.
Where is the
Webpage Title shown in between 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>...</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.
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.
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.
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.