The ABCs of HTML: Navigating Page Structure for Beginners

Saraswati DolaiSaraswati Dolai
2 min read

HTML, which stands for Hyper Text Markup Language, is the standard language used to create and design web pages. It provides the structure for web content by using a system of markup tags and attributes. Here's a brief overview:

A Simple HTML Document

Example

<!DOCTYPE html>
<html>
  <head>
    <title>First HTML Code</title>
  </head>
  <body>
    <h2>Welcome To My Blog</h2>
    <p>Hello Hashnoder</p>
  </body>
</html>

Example Explained

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document

  • The <html> element is the root element of an HTML page

  • The <head> element contains meta information about the HTML page

  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)

  • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

  • The <h1> element defines a large heading

  • The <p> element defines a paragraph

Comments in HTML

This is part of code that should not be parsed.

<!-- This is an HTML Comment -->

HTML is NOT case sensitive

<html> =<HTML>

<P> = <P>

<head> = <HEAD>

<body> = <BODY>

Basic HTML Tag

HTM Attributes: Attributes are used to add more information to the tag

<html lang="en"\>

  • Heading Tag

    Used to display headings in HTML

    h1,h2,h3,h4,h5,h6

  • Paragraph Tag

    Used to add paragraphs in HTML

    <p>This is a sample paragraph</p>

  • Anchore Tag

    Used to add links to your page

    <a href="hhtps://google.com">Google</a>

  • Image Tag

    Used to add images to your page

    <img src="/image.png"alt=Random Image">

  • Bold, Italic & Underline Tags

    Used to highlight text in your page

    <b>Bold</b>

    <i>Italic</i>

    <u>Underline</u>

  • Big & Small Tags

    Used to display big & small text on your page

    <big>Big</big>

    <small>Small</small>

  • Hr Tag

    Used to display a horizontal ruler, used to separate content

    <hr>

  • Subscript & Superscript Tag

    <sub>subscript</sub>

    H₂O

    <sup>superscript</sup>

    a2 + b2

  • Pre Tag

    Used to display text as it is (without ignoring spaces & next line)

    <pre> This

    is a sample

    text.

    </pre>

1
Subscribe to my newsletter

Read articles from Saraswati Dolai directly inside your inbox. Subscribe to the newsletter, and don't miss out.

HTML5basic programmingFront-end Development

Written by

Saraswati Dolai
Saraswati Dolai