Rajesh Rathod

Available for New Projects

Introduction to HTML

Introduction to HTML

Written by

Rajesh Rathod

in

Introduction to HTML

HTML: HyperText Markup Language

Hypertext Markup Language, also popularly known as “HTML” is the most basic building block of the Web. It defines all the content on a page(structure of web content) and this content is generally determined by index.html .

“Hypertext” refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web that connect one website/links to another!

HTML uses “markup” to annotate text, images, and other content for display in a Web browser. HTML markup includes special “elements” such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <search>, <output>, <progress>, <video>, <ul>, <ol>, <li>  and many others.

An HTML element is set off from other text in a document by “tags”, which consist of the element name surrounded by < and >.

The name of an element inside a tag is NOT case-sensitive. That is, it can be written in uppercase <TITLE>, lowercase <title> , or a mixture <Title>.However, the convention and recommended practice is to write tags in lowercase.

NOTE:

  • A web page can work without CSS.
  • I’m using the “Block” word for HTML “elements” liberally, but all “blocks=elements”

The Web

Language of the Web

Anatomy of a Website

The rule of the Web

Terminology and Syntax

Anatomy of an HTML element

Let’s explore this paragraph element a bit further. The paragraph element including opening tag, content reading ‘my cat is very grumpy’, and a closing tag.

<p>
    This is my first HTML Code.
</p>

The main parts of our element are as follows:

  1. Element: Opening tag + Content + Closing tag.
  2. Opening tag: wrapped in opening & closing angle brackets. This states where the element begins or starts to take effect — in this case, where the paragraph begins.
  3. Content: This is the content of the element, which in this case, is just text.
  4. Closing tag: It has a forward slash before the element name, stating where the element ends.

Adding Comments in HTML

<!-- This is a comment, that will be ignored by the browser -->
<p>This paragraph is visible in front end.</p>

Output

This paragraph is visible in front end.

Elements can also have attributes that look like the following: 

Basic Structure Tags (Essential for Every Page)

These tags form the skeleton of an HTML document.

  • <!DOCTYPE html> – Defines the document type.
  • <html> – The root element.
  • <head> – Contains metadata (not displayed on the page).
  • <title> – Sets the page title.
  • <meta> – Provides metadata (like character set, viewport settings).
  • <link> – Links external stylesheets or resources.
  • <style> – Embeds CSS inside HTML.
  • <script> – Embeds JavaScript inside HTML.
  • <body> – Contains all visible content.

The Skeleton of an HTML Page

Every HTML page follows a basic structure. Below is a simple HTML template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

Output

My First Webpage

Welcome to My Webpage

This is my first HTML page.

How HTML is different from CSS?

Let’s play with HTML elements

Formatting Text and Content Tags

Headings

The Heading element is just like a paragraph, but it has 6 levels starting from <h1> to <h6>

<h1> This is 1st Level Headline</h1>
<h2> This is 2nd Level Headline</h2>
<h3> This is 3rd Level Headline</h3>
<h4> This is 4th Level Headline</h4>
<h5> This is 5th Level Headline</h5>
<h6> This is 6th Level Headline</h6>

Output

This is 1st Level Headline

This is 2nd Level Headline

This is 3rd Level Headline

This is 4th Level Headline

This is 5th Level Headline
This is 6th Level Headline

Let’s try to use this element in a dummy article.

<h1>My Journey of Programming </h1>
<h2>Its all about VB6.0, HTML, CSS & JavaScript</h2>

<p> For the first time, I was introduced to coding (with VB6.0) by my computer teacher, Muzammil Sir! </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet metus eu enim lacinia, quis vulputate velit interdum.</p>

Output

My Journey of Programming

Its all about VB6.0, HTML, CSS & JavaScript

For the first time, I was introduced to coding (with VB6.0) by my computer teacher, Muzammil Sir!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet metus eu enim lacinia, quis vulputate velit interdum.

Let’s try to use this element in a dummy article.

Paragraph

It starts with <p> and closes with </p>

<p>Hey there, I'm Rajesh</p>

Hey there, I’m Rajesh

Quotes & Citation

<blockquote>
<p>Be the change you want to see in the world</p>

<cite>— Mahatma Gandhi</cite>
</blockquote>

Be the change you want to see in the world

— Mahatma Gandhi

Word Formatting

  • <br> → Line Break
  • <pre> →
  • <hr> → Horizontal Row
  • <b> → Bold (non-semantic, just visual).
  • <strong> → Bold (semantic, used for emphasis).
  • <i> → Italic (non-semantic).
  • <em> → Italic (semantic, emphasizes words).
  • <u> → Underlines text.
  • <mark> → Highlights text.
  • <small> → Displays small text.
  • <del> → Strikethrough text (deleted).
  • <sup> → Superscript (e.g., x²).
  • <sub> → Subscript (e.g., H₂O).

Break (Br)

By default, HTML considers all content in a single line, unless specifically defined in block. You can break long paragraphs into two using <br> element.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Vivamus imperdiet metus eu enim lacinia, quis vulputate velit interdum.</p>

Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus imperdiet metus eu enim lacinia, quis vulputate velit interdum.

Lets learn few more thing related to paragraph block.

Pre

Let’s consider: We want to publish a poetry. Lets use just a Paragraph tag to enclose our poetry content.

<p>“Where the mind is without fear and the head is held high;
Where knowledge is free;
Where the world has not been broken up into fragments by narrow domestic walls;
Where words come out from the depth of truth;
Where tireless striving stretches its arms toward perfection;
Where the clear stream of reason has not lost its way into the dreary desert sand of dead habit;
Where the mind is led forward by thee into ever-widening thought and action -
Into that heaven of freedom, my Father, let my country awake.”
<p>
― Rabindranath Tagore, Gitanjali

Output

“Where the mind is without fear and the head is held high; Where knowledge is free; Where the world has not been broken up into fragments by narrow domestic walls; Where words come out from the depth of truth; Where tireless striving stretches its arms toward perfection; Where the clear stream of reason has not lost its way into the dreary desert sand of dead habit; Where the mind is led forward by thee into ever-widening thought and action – Into that heaven of freedom, my Father, let my country awake.”

― Rabindranath Tagore, Gitanjali

To overcome this issue, we’ve another block <pre> to maintain the format (It called pre-formatted text).

<pre>“Where the mind is without fear and the head is held high;
Where knowledge is free;
Where the world has not been broken up into fragments by narrow domestic walls;
Where words come out from the depth of truth;
Where tireless striving stretches its arms toward perfection;
Where the clear stream of reason has not lost its way into the dreary desert sand of dead habit;
Where the mind is led forward by thee into ever-widening thought and action -
Into that heaven of freedom, my Father, let my country awake.”
<pre>
― Rabindranath Tagore, Gitanjali

Output

“Where the mind is without fear and the head is held high;
Where knowledge is free;
Where the world has not been broken up into fragments by narrow domestic walls;
Where words come out from the depth of truth;
Where tireless striving stretches its arms toward perfection;
Where the clear stream of reason has not lost its way into the dreary desert sand of dead habit;
Where the mind is led forward by thee into ever-widening thought and action -
Into that heaven of freedom, my Father, let my country awake.”

― Rabindranath Tagore, Gitanjali

Horizontal Row (hr)

The <hr> tag defines a thematic break in an HTML page and is most often displayed as a horizontal rule. its used to separate content (or define a change) in an HTML page.

In following example, I want to breakdown my h2 & para element.

<h1>My Journey of Programming</h1>
<h2>Its all about VB6.0, HTML, CSS & JavaScript</h2>
<hr>
<p> For the first time, I was introduced to coding (with VB6.0) by my computer teacher, Muzammil Sir! </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet metus eu enim lacinia, quis vulputate velit interdum.</p>

Output

My Journey of Programming

Its all about VB6.0, HTML, CSS & JavaScript

For the first time, I was introduced to coding (with VB6.0) by my computer teacher, Muzammil Sir!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet metus eu enim lacinia, quis vulputate velit interdum.

All Text Format Things

<p>This is <b>bold</b> text.</p>
<p>This is <strong>important</strong> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>This is <mark>highlighted</mark> text.</p>
<p>This is <small>small</small> text.</p>
<p>This is <del>strikethrough</del> text.</p>
<p>2<sup>3</sup> means 2 raised to the power of 3.</p>
<p>Water formula is H<sub>2</sub>O.</p>

Output

This is bold text.

This is important text.

This is italic text.

This is emphasized text.

This is underlined text.

This is highlighted text.

This is small text.

This is strikethrough text.

23 means 2 raised to the power of 3.

Water formula is H2O.

Date and Time

Exercise: An Article

<h1>Title of this Article</h1>
<h2>Subtitle that’s usually smaller and maybe longer</h2>

<p>Then the text of the article begins. And you already have a sense of what this is going to be about, because the title and subtitle have set some kind of expectation</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet metus eu enim lacinia, quis vulputate velit interdum. Etiam gravida, leo nec faucibus sollicitudin, ipsum ante eleifend est, a suscipit sapien ipsum vel orci. Etiam magna libero, mattis a arcu at, mattis elementum tortor. </p>

<p>Mauris pellentesque vitae arcu sit amet vulputate. Duis tincidunt, neque ut sollicitudin dapibus, erat quam porttitor tortor, fermentum gravida quam libero nec justo. Ut laoreet placerat tellus, et malesuada risus dictum nec. Ut eget maximus eros, ut tristique felis. </p>

<p>Maecenas eu euismod odio, eget fermentum enim. Nulla ut sapien arcu. Cras ac vestibulum risus. Nam placerat pretium massa sit amet sagittis. Praesent ex ipsum, volutpat commodo tellus in, cursus vestibulum nisl. Curabitur dolor ligula, ultrices eget leo ac, rutrum condimentum purus. Aenean justo magna, tempus ut scelerisque lobortis, semper sit amet sapien. Nulla at dui aliquam, malesuada orci lacinia, efficitur turpis. Vestibulum porta nec dui sit amet dictum. Morbi tristique vitae mauris quis commodo. Nullam et vehicula nulla.</p>

Output

Title of this Article

Subtitle that’s usually smaller and maybe longer

Then the text of the article begins. And you already have a sense of what this is going to be about, because the title and subtitle have set some kind of expectation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet metus eu enim lacinia, quis vulputate velit interdum. Etiam gravida, leo nec faucibus sollicitudin, ipsum ante eleifend est, a suscipit sapien ipsum vel orci. Etiam magna libero, mattis a arcu at, mattis elementum tortor.

Mauris pellentesque vitae arcu sit amet vulputate. Duis tincidunt, neque ut sollicitudin dapibus, erat quam porttitor tortor, fermentum gravida quam libero nec justo. Ut laoreet placerat tellus, et malesuada risus dictum nec. Ut eget maximus eros, ut tristique felis.

Maecenas eu euismod odio, eget fermentum enim. Nulla ut sapien arcu. Cras ac vestibulum risus. Nam placerat pretium massa sit amet sagittis. Praesent ex ipsum, volutpat commodo tellus in, cursus vestibulum nisl. Curabitur dolor ligula, ultrices eget leo ac, rutrum condimentum purus. Aenean justo magna, tempus ut scelerisque lobortis, semper sit amet sapien. Nulla at dui aliquam, malesuada orci lacinia, efficitur turpis. Vestibulum porta nec dui sit amet dictum. Morbi tristique vitae mauris quis commodo. Nullam et vehicula nulla.

Let's use CSS for above blocks.

Some CSS properties, we want to try:

  • Color:
    • Text Color: color: black; (It's value can written in words (i.e.black), hex code (#00000) and rbg (0,0,0).
    • Background Color: background-color: lightgrey;
  • Alignment:
    • text-align property is used to set the horizontal alignment of a text.
      • { text-align: center/left/right/justify; }
      • By default, the text is aligned to left if text direction is left-to-right, and right alignment is default if text direction is right-to-left.
    • text-align-last property specifies how to align the last line of a text. For i.e. .p {text-align-last: right;}
    • vertical-align sets the vertical alignment of an element.
      • vertical-align: baseline;
      • vertical-align: text-top;
      • vertical-align: text-bottom;
      • vertical-align: sub;
      • vertical-align: super;
    • direction & unicode-bidi both these properties specifies the text direction/writing direction. unicode-bidi is used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document.
  • Text Decoration
    • text-decoration: [Short hand] underline red double 5px;
    • text-decoration-line : overline, line-through, underline, overline underline;
    • text-decoration-color: black;
    • text-decoration-style: solid, double, dotted, dashed, wavy;
    • text-decoration-thickness: auto, 5px, 10%;
  • Text Transformation (text-transform: lowercase , uppercase, capitalize;
  • Text Spacing
    • text-indent: 10px;
    • letter-spacing: 2px, -2px;
    • line-height: 1.5, 1.8;
    • word-spacing: 5px, -5px;
    • white-space: nowrap;
  • Text Shadow: 2px [Horizontal] 2px[Vertical] 4px[Blur] #000000 [Color]

More posts