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:
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?
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.