Ridam Singhal

Beginner's Guide to HTML: Learn the Basics

Ridam Singhal's photo
Ridam Singhal
·

4 min read

Beginner's Guide to HTML: Learn the Basics

Table of contents

HTML, the foundation of every website, is your first step into the exciting world of web development. Let’s dive in and learn the basics of HTML.

What is HTML?

HTML stands for Hypertext Markup Language. It is a standard markup language for creating the web pages. It describes the structure of a web page. It consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. For example:

<h1>This is a heading.</h1>

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

<ul>
      <li>Unordered List</li>
</ul>

Importance of HTML in Web Development

HTML is a foundational building block of a web development. These are the some of the importantance of the HTML:

  1. Basic Structure of Web Page

    HTML is a backbone of every webpage. It provides the basic framework that allows developers to structure content in a meaningful way. Without HTML, it would be impossible to create webpages that are readable and navigable.

  2. Browser Compatibility

    HTML is widely supported by all the web browsers. This ensures that web pages can be displayed across different devices and on any version of the browser whether old or new.

  3. Semantic Structure

    HTML introduces the semantic elements that provide meaning to the content and also helps in Search Engine Optimization (SEO). Some the HTML semantic tags are <article>, <section>, <nav>, and <footer>.

Basic Structure of HTML

An HTML document consists of tags that form the skeleton of the page. Basic structure of HTML looks like this

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Structure of HTML Document</title>
</head>

<body>
    <!-- Main content of website -->
    <h1>GeeksforGeeks</h1>
    <p>A computer science portal for geeks</p>
</body>

</html>

Let me explain you the each part of the structure.

  1. <!DOCTYPE html>

    The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). In HTML <!DOCTYPE html> it represents that we are using the version 5 of HTML.

     // HTML version 5
 <!DOCTYPE html>

 // HTML 4.01 Strict
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 // HTML 4.01 Transitional
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 // HTML 4.01 Frameset
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

  2. <html> Tag

    The <html> tag wraps the entire document, serving as the root element of an HTML page. It typically includes the lang attribute to specify the language of the content.

  3. <head> Tag

    The <head> section contains metadata, scripts, styles, and other information not displayed directly on the page but essential for functionality and SEO.

  4. <body> Tag

    The <body> section contains all the visible content of the web page, including text, images, videos, links, and more. This is where you’ll add the main elements to display on the page.

HTML Tags and Elements

In HTML, tags represent the structural components of a document, such as <h1> for headings. While Elements are formed by tags and consists of both the opening and closing tags along with the content.

HTML Elements

The HTML element consists of both the opening and closing tags as well as what’s inside those tags.

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

HTML Tags

HTML Tags are the starting and ending parts of an HTML element. They begin with < symbol and end with > symbol. Whatever is written inside < and > are called tags.

<p> </p>

They are of two types:

  1. Paired Tags: These tags come in pairs i.e. they have both opening(< >) and closing(</ >) tags.

Empty Tags: These tags are self-closing and do not require a closing tag.

Common HTML Tags and Elements

Understanding these key tags will allow you to organize content effectively and create more readable and accessible webpages.

  • Headings (<h1> to <h6>): Headings are important for structuring the content within the <body> section. They define the hierarchy of information, where <h1> is the highest-level heading.

  • Paragraphs (<p>): The <p> tag is used for creating paragraphs, which help to group text into readable sections. This tag automatically adds some spacing between paragraphs to improve readability.

  • Images (<img>): The <img> tag is used to add images to a webpage. It requires the src attribute to specify the image path and the alt attribute for accessibility.

  • Links (<a>):Links are created with the <a> tag. The href attribute defines the destination URL, and the text within the <a> tag serves as the clickable link text.

  • Lists (<ul>, <ol>, <li>): Lists allow you to organize items in bullet points (<ul>) or numbered order (<ol>). Each item within a list is wrapped in <li> tags.

  • Divisions (<div>): The <div> tag is a container used to group other elements together, often for layout. It does not add any style or structure on its own but is useful for applying CSS styles to sections of content.

Conclusion

Congratulations on taking your first steps into the world of HTML! With these basics, you're well on your way to creating amazing web pages.

ChaiCodeHTML5Web Development