DESGINER COURSE

UI/UX Design

Graphic Design

Video Editor

FULL STACK DEVELOPMENT

Full Stack Development

MERN Stack Development

Python

PHP FRAMEWORKS

Laravel

MOBILE APP DEVELOPMENT

React Native

CMS

WordPress

Webflow

Shopify

Digital Marketing

SEO

SSM

Blog

>

Html Basics For Beginners

HTML Basics for Beginners: Easy and Simple Guide (Part-1)

Understanding HTML Basics for Beginners

Imagine the internet as a busy city, and HTML is the blueprint that defines how each building (website) looks. Without these blueprints, everything would be chaotic! HTML, or HyperText Markup Language, is the essential language used to structure web pages. It’s not a programming language, so you don’t need to be a programmer. Understanding HTML is key to web development, improving SEO, and organizing content. In this guide, we’ll cover HTML basics for beginners with examples, including the Basic HTML Document Outline, HTML Comments for code organization, and Essential HTML Elements for Page Information, giving you the foundation to create a well-structured, SEO-friendly webpage.

HTML Basics for Beginners: Learn the fundamentals of HTML for web development and coding.

Basic HTML Document outline

1. <!DOCTYPE html> – Document Type Declaration

This informs the browser that the webpage adheres to the HTML5 standard.
Without this, some features may not work properly.

Example: Just like before constructing a house, you decide what type of house you’re building (apartment, villa, etc.), <!DOCTYPE html> tells the browser what type of document it is.

2. <html> – The Root Element

Everything inside an HTML document is wrapped within the <html> tag.
It contains two main sections: <head> and <body>.

Example: Imagine a gift box. The <html> tag is the box that holds everything inside (wrapping paper, ribbon, and the gift itself).

3. <head> – The Head Section

The <head> contains information about the webpage (not visible on the page).

Example: Think of a restaurant’s kitchen. You don’t see what happens inside, but it makes sure your food (webpage content) is ready!

What’s inside the <head>?

<meta charset=”UTF-8″>: Defines character encoding to support different languages.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: Ensures proper display on mobile devices.
<title> – The text displayed on the browser tab that represents the webpage’s title. (just like a restaurant’s name on a signboard).
<meta> – Information like character encoding and mobile responsiveness. (like restaurant details on Google).
<link> – Links to external stylesheets (CSS) (like hiring a designer to decorate the restaurant).

4. <body> – The Body Section

The <body> contains everything visible on the webpage.
It includes:
- <header> – The top section usually contains the website name or logo.
- <nav> – A menu with links to different pages
- <main> – The main content area.
- <footer> – The bottom section often includes copyright info.

Example: Imagine you enter a house. You see:

A welcome board → (<header>)
A menu of rooms → (<nav>)
A TV area → (<main>)
A guest book for feedback → (<footer>)

Everything inside <body> is what the visitor experiences!

Summary Table

HTML Tag	What It Does	Real-Life Example
<!DOCTYPE html>	Declares HTML5	Choosing to build a modern house
<html>	Wraps all content	The walls of your house
<head>	Stores important info (not seen)	The restaurant kitchen where food is prepared
<title>	Sets page title	The restaurant signboard outside
<meta>	Provides info about the site	A Google listing with restaurant details
<body>	Displays visible content	The living room people see
<header>	Shows the website title	A welcome board at a hotel
<nav>	Provides navigation links	A menu card in a restaurant
<main>	The main content area	The TV room where you watch a movie
<footer>	Displays contact info & copyright	A guest book or notice board

Basic HTML Comments

1 HTML Comments (<!– –>) in a Simple Way

In HTML, comments (<!– –>) work the same way—they’re notes inside your code that help developers understand what’s happening, but they don’t appear on the webpage. Imagine you’re designing a webpage and planning to add a contact form later. You can leave a comment as a reminder:

Aryu Academy HTML Comments in a Simple Way

Essential HTML Elements for Page Information

When creating a webpage, you need to provide important details to help browsers understand and display your content properly. These details are usually placed inside the <head> section of an HTML document. Let’s break down some key elements with simple explanations and real-life examples.

1. <base> – Setting the Base URL

The <base> tag sets a default URL for all relative links on a page. Think of it as setting a home address for all mail (links) to be sent from.

Now, contact.html will automatically become

https://example.com/contact.html.

2. <meta> – Page Information for Browsers & Search Engines

The <meta> tag provides extra details about your webpage, such as its description, author, and character encoding. It’s like writing a short introduction about your page for search engines and social media.

Example:

Aryu Academy Page Information for Browsers & Search Engines

This helps search engines understand your page and display it correctly on different devices.

3. <title> – Page Title

The <title> tag sets the name of your webpage, which is displayed on the browser tab. Think of it as the name of a book chapter.

Example:

When you open the page, the browser tab will display “Learn HTML Basics”.

4. <link> – Connecting External Resources

The <link> tag is used to connect external files, like stylesheets. Imagine it as plugging in a charger to power up your device!

Example:

Aryu Academy Connecting External Resources

This links your HTML page to an external CSS file for styling.

5. <style> – Adding Internal CSS

The <style> tag allows you to write CSS directly inside your HTML file. It’s like painting a house from the inside instead of hiring an external decorator.

Example:

This applies styles directly to the page without needing an external file.

6. <script> – Adding JavaScript

The <script> tag is used to add JavaScript, which makes your webpage interactive. Think of it as adding remote controls to a toy car—it makes things move!

Example:

This will show a pop-up message when the page loads.

Final Thoughts:

Understanding the basics of HTML is the first step in building a strong web presence. With the knowledge gained from this guide, you’re now equipped to create well-structured, SEO-friendly web pages. Keep practicing, and soon you’ll be able to build more complex sites with ease.

Stay tuned for HTML Basics for Beginners – Part 2, where we’ll continue exploring more HTML basics for beginners to help you enhance your web development skills! Ready to level up? Join Aryu Academy and boost your learning today!