Basic to Advanced Guide on HTML

Introduction

In this article, we are going to understand HTML from basics to a little advanced level including Meta Tags, External Links and Scripts loaded in an HTML page.

What is a Hypertext?

A Hypertext is basically a text with a link to another text. It refers to links that connect web pages to one another.

What is a Markup?

A Markup is a system used to define and present the text on a web page using the tags and codes.

What is HTML?

An HTML which stands for “HyperText Markup Language“ is the main building block of the Web page. It’s a markup language that tells the web browsers how to structure the web pages when visited.

Analogy to a Building

Consider we are owning a flat in a building of a Cooperative Housing Society.
The building has some version like Mivan construction or Brick Construction. It has some metadata like Society Name, Wing/Building Name, Locality to which it belongs, etc. Finally, it has some structure which includes parking, types of flats and their layout which contains balcony, washroom, living room, kitchen, dry area and bedroom.

Similarly, every HTML page has it’s document version, metadata related to the web content and structure of the content in the form of various semantic or non-semantic elements. To understand it properly, let’s take a look at the simple boilerplate of an HTML page.

Simple Boilerplate of an HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>Header</header>
    <main>Main Content or Body</main>
    <footer>Footer</footer>
</body>
</html>

Components of an HTML Document

Document Type

An HTML document type, also known as DOCTYPE declaration, is a special instruction used at the beginning of an HTML document, which tells the browser about the version of the HTML page. In HTML5, we don’t need to mention the version in the DOCTYPE declaration.

<!DOCTYPE html>

Root Element

In HTML, the “root“ element refers to the <html> tag, which is the top-level element in the entire web page. All the other elements of a web page must be inside this root element.

Head Element

A Head element refers to the <head> tag, which contains all the metadata information about an HTML document. It is located inside the <html> tag and above the <body> tag.

Body Element

A Body element refers to the <body> tag, which contains the main content of the web page to be shown to the user. It is located inside the <html> tag and below the <head> tag.

HTML Element

An HTML element contains the content and instructions on how to display it on the web browser. It consists of an opening tag, attributes, content and a closing tag as shown below:

Some of the elements don’t need a closing tag separately. For example: <img />, <input />

Script Element

An HTML script element is a tag that allows us to embed an executable code (usually JavaScript) within an HTML document. An executable code can be directly embedded or linked to an external JavaScript file using the src attribute. It’s typically placed in the end of the <body> tag.

Style Element

An HTML Style element is used to embed the CSS rules within an HTML document. The styling can be directly embedded or linked to an external stylesheet file using the <link> tag. It’s typically placed within the <head> tag.

What are Semantic Elements in HTML?

Semantic mean the meaning of a particular thing. Semantic elements are the elements that clearly define the purpose or meaning of the element in a human-readable and machine-readable way. There are lot many sematic elements in HTML and below are the most commonly used:

<header> <footer> <section> <article> <aside> <main> <details> <figure> <nav> <summary>

Below is the simple showcase of a Semantic element layout:

Benefits of using Sematic Elements

Easy to Read
Consistent Code
Simple Layout
Greater Accessibility
Improved Search Engine Optimization (SEO)

HTML Meta Elements

HTML Meta Elements, as name suggests, are HTML elements that provide metadata or information about the webpages to the search engines and the users. These are placed within the <head> tag.

The type of metadata provided by the <meta> element can be classified into the following:

If the name attribute is set, then the meta element provide document-level information.
If the http-equiv attribute is set, then the meta element provide header information or value of the content attribute.
If the charset attribute is set, then the meta element provide the information about the character encoding of the document.
If the itemprop attribute is set, then the meta element provide user-defined information.

We will see few Meta tags now.

Title Tag

Sets the title of your web page. It can be set different for every web page.

<title> My Page Title </title>

Meta Character Set Tag

Specifies the character encoding for the HTML document.

<meta charset="UTF-8">

Meta Viewport Tag

Controls how to render and display a page on different devices. Essential for responsive design.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta HTTP Equivalents Tag

Provides the HTTP header information or value of the content attribute. A substitute when a web server is not correctly configured.

// Controls the caching on the proxy servers
<meta http-equiv="cache-control" content="no-cache"/>

// Expires after a specified number of seconds or a specified date time
<meta http-equiv="expires" content="0"/>
<meta http-equiv="expires" content="Tues, 18 Feb 2025 00:00:00 GMT"/>

// Refreshes the page after a specified number of seconds
<meta http-equiv="refresh" content="30">

// Advises Internet Explorer to use the latest rendering engine
<meta http-equiv="X-UA-Compatible" content="IE=edge">

// Specifies the natural language(s) of the document
<meta http-equiv="Content-Language" content="en-US">

// Controls the resources which the user agent is allowed to load, enhancing security
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

// Prevents the browser from MIME-sniffing a response away from the declared content-type
<meta http-equiv="X-Content-Type-Options" content="nosniff">

Meta Description Tag

Gives the description about the content of the web page.

<meta name="description" content="My Description">

Meta Keywords Tag

Specifies keywords for search engines.

<meta name="keywords" content="HTML, Meta Tags, Semantic HTML">

Meta Author Tag

Defines the author of the webpage.

<meta name="author" content="Vinay Bhardwaj">

Meta Copyright Tag

Indicates the copyright information of a webpage.

<meta name="copyright" content="Copyright owner" />

Meta Robot Tag

Instructs search engines whether a page should be indexed or not, and followed or not. Basically the instructions for Web Crawlers or Bots.

<meta name="robots" content="noindex, nofollow">

Meta Open Graph (Facebook) Tag

Controls how a URL is displaced when shared on the social media.

<meta property="og:title" content="Title Here">
<meta property="og:description" content="Description Here">
<meta property="og:image" content="https://example.com/image.jpg">

Meta Twitter Tag

Starts with twitter: and used to control how a webpage content appears when shared on twitter.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Title Here">
<meta name="twitter:description" content="Description Here">
<meta name="twitter:image" content="https://example.com/image.jpg">

Meta Theme Color Tag

Suggests a color that browsers should use to customize the display of the web page and it’s surrounding UI.

<meta name="theme-color" content="#ffffff">

Meta Application Name Tag

Specifies the name of the web application.

<meta name="application-name" content="Application Name">

Meta Google No-translate Tag

Indicates to Google not to offer translation for this page.

<meta name="google" content="notranslate">

Benefits of Meta Elements

Enhanced User Experience
Improved Search Engine Optimization (SEO)
Controls over a Web Page and it’s information
Improved marketing options

HTML Link Element

The HTML <link> element specifies the relationship between the current document and an external resource. Commonly used to link the external resources. It’s typically placed inside the <head> tag. Example:

<link rel="stylesheet" type="text/css" href="">

Attributes of HTML Link element

charset - defines the character encoding of linked source
href - specifies the location of the linked document
hreflang - specifies the text language of linked source
media - specifies the media, for which linked source is applied
rel - describes the relationship between the current document and linked document (required)
sizes - specifies the size of the linked source, should be only used with rel="icon”
target - determines where to load the linked document
type - specifies the media type of document

Types of Relations in HTML Link Element

alternate - indicates the alternate version of the current web page
author - tells that the linked page represents the author of the current web page
dns-prefetch - instructs the browser to perform DNS lookup in advance for the specified domain
help - links to the help document of the current web page
icon - defines the icon or favicon of the current web page representing the website
license - indicates that the linked document contains license information for the current web page
next - indicates that the linked page is the next page in the series
preconnect - a resource hint that tells the browser to proactively establish a network connection to a specific domain
prefetch - indicates to the browser that a linked resource is likely to be needed in the future navigation by the user
preload - instructs to the browser to request a resource in advance needed for the web page
prerender - indicates that the browser should pre-render the linked webpage in the background
prev - indicates that the linked document is the previous page of a sequence
search - indicates that the linked page is designed to be used for searching content within the current page
stylesheet - used to link an external style sheet with the current web page

Types of Target in HTML Link Element

_blank - when the link is clicked, it will open in a new browser tab or window
_self - when the link is clicked, it will open in the same window or tab as the current page
_top - when the link is clicked, it will open the linked page in the full browser window
_parent - when the link is clicked, it will open in the parent frame or window
{frame_name} - when the link is clicked, it will open in the specified frame

HTML Script Element

The <script> element is used to embed an executable code or data into the web page. Typically used to embed a JavaScript code and placed in the end of the <body> tag.

Attributes of HTML Script Element

async - informs the browser to load this script asynchronously in the background while parsing the HTML document, and once downloaded, it executes asynchronously by pausing the HTML parsing
crossorigin - specifies how a browser should handle the fetching of external JavaScript files from a different domain
defer - informs the browser to load this script asynchronously in the background while parsing the HTML document, and once downloaded, the execution is deferred until the HTML document has been parsed.
fetchpriority - gives a hint to the browser indicating how it should prioritize fetching an external script. It takes values as High, Low or Auto
integrity - allows a browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated
nomodule - indicates whether the script should be executed in browsers that support ES modules
nonce - tells the browser that the inline contents of the script weren’t injected into the document by some malicious third party but were put intentionally by whoever controls the server the document is served from
referrerpolicy - specifies which referrer information to send when fetching a script
src - defines the exact location of an external script resource that needs to be loaded
type - defines the type of the script that needs to be loaded
blocking - specifies how the script should be loaded and executed

Summary

Let’s summarize what we learned in this article. We started with the meaning of Hypertext and Markup, followed by understanding the HTML and it’s basic structure. After that, we dived into the Meta elements, Link elements and Script Elements in depth.

I hope you got to learn a lot from this article. Please make sure to provide your valuable feedback on the article. Thank you for reading it till the end.

A Beginner's Guide on HTML

Table of contents