A Beginner's Guide to HTML: Mastering Hypertext Markup Language

A Beginner's Guide to HTML: Mastering Hypertext Markup Language

koustav moitra's photo
koustav moitra
·

8 min read

Table of contents

HTML and its structure :

  • Think of HTML as the skeleton of every website you visit. Just like how our skeleton gives our body structure, HTML gives structure to web pages. It's like giving instructions to your browser about what to show and how to organize it.

  • You might be wondering: What is a markup language, and how is it different from a programming language?

AspectMarkup LanguageProgramming Language
PurposeDescribes document structure and presentationCreates logic, performs computations, controls program flow
Primary UseFormatting and organizing contentDeveloping software and creating dynamic interactions
ExamplesHTML, XML, MarkdownJavaScript, Python, Java
SyntaxUses tags to define elementsUses complex syntax for logic and functions
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
    <!-- Link to CSS or include other meta tags here -->
</head>
<body>
    <!-- Content of the document goes here -->
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text in the body of the document.</p>
    <!-- Include JavaScript files or other elements here -->
</body>
</html>

  • <!DOCTYPE html>: This declaration defines the document type and version of HTML. It helps browsers to render the document correctly.

  • <html lang="en">: The root element of the HTML document. The lang attribute specifies the language of the document.

  • <head>: Contains meta-information about the document, such as character set, viewport settings, and links to stylesheets.

  • <meta charset="UTF-8">: Specifies the character encoding for the document (UTF-8 is widely used).

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the document is responsive and adjusts to different screen sizes.

  • <title>: Sets the title of the document, which appears in the browser’s title bar or tab.

  • <body>: Contains the content of the document that is visible to users, such as headings, paragraphs, and other HTML elements.

Html Tags & Elements :

Think of HTML tags like containers or labels:

<p>This is a paragraph</p>

  • <p> is the opening tag

  • </p> is the closing tag

  • Text between is the content

  • Like a labeled box: "Paragraph" label with content inside

Types of Tags :-

Paired Tags: Have opening and closing

<h1>Main Heading</h1>

Self-Closing Tags: No closing tag

<img src="picture.jpg">
<br>

Nested Tags: Tags inside other tags
( Like putting a smaller box inside a bigger box )

<div>
    <p>Paragraph inside a container</p>
</div>

Semantic vs Non-Semantic:

<!-- example of semantic tags ( these tags are meaning based tags ) --> 
<header>Website Header</header>
<nav>Navigation Menu</nav>

<!-- example of non-semantic tags -->
<div>Generic Container</div>
<span>Inline Text</span>

Elements and Attributes :

Elements → Complete package of opening tag, content, and closing tag
Example: <p>Hello World</p>

  • <p> is opening tag

  • Hello World is content

  • </p> is closing tag

Attributes → Extra information about an element

  • Provide additional details or modify behavior

  • Always specified in the opening tag

    Example: <img src="cat.jpg" alt="Cute Cat" width="300" height="200">

  • src: Source of image

  • alt: Alternative text

  • width and height: Size specifications

    other examples -

    • Link Element with Attributes:

        <a href="https://www.example.com" target="_blank">Click Here</a>

      • href: Website address

      • target: How link opens (new tab/same tab)

      • Input Element with Attributes:

        <input type="text" placeholder="Enter your name" required>

  • type: Kind of input

  • placeholder: Hint text

  • required: Makes field mandatory

Text Elements :

Headings

<h1> to <h6>): Headings are used to define the titles or subtitles in your content, with <h1> being the most important and <h6> the least.

<h1>Main Headline (Largest)</h1>
<h2>Section Headline</h2>
<h3>Subsection Headline</h3>
<h4>Smaller Headline</h4>
<h5>Even Smaller</h5>
<h6>Smallest Headline</h6>

Output on browser will look like this :

heading tag output

Paragraphs

  • The <p> tag defines a paragraph of text. It's used to separate blocks of text into readable sections.

  • Basic text container

  • Adds default spacing

  • Used for main body content

      <p>This is a standard paragraph of text. It wraps automatically and provides space between lines.</p>

    Output on browser will look like this :

  • paragraph tag output

<pre> Tag (preformatted text)

<pre>
This is preformatted text.
    It preserves
        both spaces
            and line breaks
</pre>

  • Keeps exact formatting

  • Useful for code snippets or ASCII art

  • Maintains original spacing and line breaks

<br> Tag (Line Break)

First line<br>
Second line<br>
Third line

  • Creates a single line break

  • Used to force text to next line

  • Unlike paragraph, doesn't add extra spacing

<hr> Tag (Horizontal Rule)

htmlCopy<p>Content above</p>
<hr>
<p>Content below</p>

  • Creates a horizontal line

  • Used to separate content sections

Visually breaks up page content

Text Formatting Tags :

Bold and Strong

<b>Bold text</b>
<strong>Important text</strong>

  • <b>: Visual boldness

  • <strong>: Semantic importance

Italic and Emphasis

<i>Italic text</i>
<em>Emphasized text</em>

  • <i>: Visual italics

  • <em>: Semantic emphasis

Underline and Strikethrough

<u>Underlined text</u>
<s>Strikethrough text</s>

  • <u>: Underline

  • <s>: Crossed-out text

Subscript and Superscript

H<sub>2</sub>O (Water)
E = mc<sup>2</sup>

  • <sub>: Lower text

  • <sup>: Raised text

Code and Keyboard

<code>console.log('Code snippet')</code>
<kbd>Ctrl + C</kbd>

  • <code>: Displays code

  • <kbd>: Keyboard input

output for all text formatting →

text formatting output

Quotations and Citation Elements blockquote , quotation , abbr

  • Blockquote (<blockquote>):The <blockquote> tag is used to define a section that is quoted from another source. This is typically used for longer quotations. You can optionally use the cite attribute to specify the source of the quote.

  •   <blockquote cite="https://www.example.com/quote-source">

  This is a blockquote. Blockquotes are used for longer quotes from an external source. </blockquote>

  • Inline Quotation (<q>):The <q> tag is used for short, inline quotations within a paragraph. The browser usually adds quotation marks around the text enclosed in <q>.

  •   <p>This is an inline quotation: <q>To be, or not to be, that is the question.</q></p>

  • Abbreviation (<abbr>):The <abbr> tag is used to represent an abbreviation or acronym, providing the full form of the text in the title attribute. When the user hovers over the abbreviation, the full form is displayed. For example, <abbr title="World Health Organization">WHO.

  •   <p>The abbreviation for World Health Organization is 
  <abbr title="World Health Organization">WHO</abbr>.</p>

Html Semantic Tags :

  • Header (<header>): The <header> tag is used to define introductory content or a set of navigational links. It often contains headings, logo, or navigation elements.

  • Footer (<footer>): The <footer> tag is used to define the footer of a document or section. It typically contains information like copyright statements, contact information, or links to related documents.

  • Nav (<nav>): The <nav> tag is used to define a section of navigation links. It helps users navigate through different sections of the website.

  • Article (<article>): The <article> tag represents a self-contained composition in a document, such as a news article or blog post, that can be independently distributed or reused.

  • Section (<section>): The <section> tag is used to group related content within a document. Sections typically include a heading and are used to organize the document into thematic parts.

  • Aside (<aside>): The <aside> tag is used to define content that is tangentially related to the content around it, such as sidebars, pull quotes, or additional information.

Html List :

  • Unordered List (<ul>): The <ul> tag is used to create an unordered (bulleted) list. Each item in the list is defined using the <li> tag.
    <!-- Unordered List --> 
<h2>Unordered List</h2> 
<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> </ul>
💡
we can change the list style of unordered list using css property - list-style-type
ValueDescription
discSets the list item marker to a bullet (default)
circleSets the list item marker to a circle
squareSets the list item marker to a square
noneThe list items will not be marked

Ordered List (<ol>): The <ol> tag is used to create an ordered (numbered) list. Each item in the list is defined using the <li> tag. The list items are automatically numbered by the browser.

  <!-- Ordered List -->
<h2>Ordered List</h2>
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>
💡
we can change the list style of ordered list using css property - type
TypeDescription
type="1"The list items will be numbered with numbers (default)
type="A"The list items will be numbered with uppercase letters
type="a"The list items will be numbered with lowercase letters
type="I"The list items will be numbered with uppercase roman numbers
type="i"The list items will be numbered with lowercase roman numbers

Description List (<dl>): The <dl> tag is used to create a description (or definition) list. It consists of terms and descriptions. The <dt> tag defines a term, and the <dd> tag provides the description for that term.

  <!-- Description List -->
<h2>Description List</h2>
<dl>
    <dt>Term 1</dt>
    <dd>Description for term 1.</dd>
    <dt>Term 2</dt>
    <dd>Description for term 2.</dd>
</dl>

HTML5HTMLFrontend Developmentsoftware development