The ABCs of HTML: Navigating Page Structure for Beginners

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>