Leave a Comment / HTML / By

HTML Tutorial for Beginners – Codes with Pankaj

Welcome to the HTML Tutorial for Beginners by Codes with Pankaj! This guide is designed to help you master the basics of HTML (HyperText Markup Language), the foundation of every website. Whether you’re new to coding or looking to solidify your skills, this tutorial covers everything from getting started to styling your webpage. Let’s begin your journey with Codes with Pankaj!

1. HTML Introduction

HTML is the standard markup language used to create and structure content on the web. It uses tags to define elements like headings, paragraphs, links, and images, which browsers interpret to display webpages.

  • Why Learn HTML?
    • It’s the backbone of web development.
    • Essential for creating and structuring websites.
    • A prerequisite for learning CSS and JavaScript.
  • Key Points:
    • HTML tags are enclosed in angle brackets (e.g., <p> for paragraphs).
    • Most tags have an opening tag (e.g., <p>) and a closing tag (e.g., </p>).
    • HTML5 is the latest version, offering modern features like video and audio support.

Beginner Tip: Think of HTML as the skeleton of a webpage—it provides structure, while CSS adds style and JavaScript adds interactivity.

2. HTML Getting Started

To start with HTML, you need a text editor and a web browser. Here’s how to create your first HTML page.

Tools You Need

  • Text Editor: Notepad (Windows), TextEdit (Mac), or free editors like Visual Studio Code, Sublime Text, or Notepad++.
  • Web Browser: Chrome, Firefox, or Edge to view your webpage.

Steps to Create Your First HTML Page

  1. Open your text editor.
  2. Write the basic HTML structure.
  3. Save the file with a .html extension (e.g., index.html).
  4. Open the file in a browser to see the result.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My First Page - Codes with Pankaj</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>Welcome to Codes with Pankaj!</h1>
  <p>This is my first HTML page.</p>
</body>
</html>
  • Explanation:
    • <!DOCTYPE html>: Declares the document as HTML5.
    • <html lang="en">: The root tag, with lang="en" for English.
    • <head>: Contains metadata like the page title and character encoding.
    • <body>: Holds visible content like headings and paragraphs.
  • How to Run:
    • Save the code as index.html.
    • Double-click the file to open it in your default browser.
  • Beginner Tip: Always save files with the .html extension, and use a simple text editor to avoid formatting issues.

3. HTML Elements

An HTML element is a building block of a webpage, defined by a start tag, content, and an end tag (e.g., <p>Hello</p>). Some elements, like <img>, are self-closing and don’t need an end tag.

  • Types of Elements:
    • Block-level: Take up the full width (e.g., <p>, <h1>, <div>).
    • Inline: Occupy only the space of their content (e.g., <span>, <a>, <strong>).
  • Nesting: Elements can be nested inside others (e.g., <p><strong>Bold text</strong></p>).

Example:

<p>This is a <strong>block-level</strong> paragraph with an <em>inline</em> element.</p>
  • Explanation:
    • <p> is a block-level element, creating a paragraph.
    • <strong> and <em> are inline, affecting only specific parts of the text.
  • Beginner Tip: Always close tags properly to avoid display issues. Use lowercase for tag names for consistency.

4. HTML Attributes

Attributes provide additional information about HTML elements, placed inside the opening tag. They are written as name="value" pairs.

  • Common Attributes:
    • id: Unique identifier for an element.
    • class: Groups elements for styling or scripting.
    • href: Specifies the URL for links (<a>).
    • src: Specifies the source for images (<img>).
    • alt: Alternative text for images.

Example:

<a href="https://codeswithpankaj.com" id="home-link" class="nav-link">Visit Codes with Pankaj</a>
<img src="logo.png" alt="Codes with Pankaj Logo" width="200">
  • Explanation:
    • <a> uses href for the link destination, id for a unique identifier, and class for styling.
    • <img> uses src for the image file and alt for accessibility.
  • Beginner Tip: Attributes only go in the opening tag, and values should be in quotes. Avoid using the same id on multiple elements.

5. HTML Headings

Headings organize content and improve readability and SEO. HTML provides six heading levels, from <h1> (most important) to <h6> (least important).

  • Purpose: Define titles and subtitles.
  • Attributes: None commonly used.

Example:

<h1>Codes with Pankaj</h1>
<h2>Learn Web Development</h2>
<h3>HTML Basics</h3>
<h4>Headings Tutorial</h4>
  • Explanation:
    • <h1> is the main title, typically used once per page.
    • <h2> to <h6> are used for subheadings, with decreasing size and importance.
  • Beginner Tip: Use headings in order (e.g., <h1> before <h2>). Don’t skip levels for styling purposes—use CSS instead.

6. HTML Paragraphs

The <p> tag defines a paragraph, used for blocks of text.

  • Purpose: Separate text into readable chunks.
  • Attributes: None commonly used.

Example:

<p>Welcome to Codes with Pankaj, your go-to resource for learning web development.</p>
<p>Our tutorials are designed for beginners to build skills step-by-step.</p>
  • Explanation:
    • Each <p> tag creates a new paragraph with automatic spacing above and below.
  • Beginner Tip: Don’t use <p> tags for spacing or layout—use CSS for design. Avoid nesting block elements like <div> inside <p>.

7. HTML Links

The <a> tag (anchor) creates hyperlinks to other webpages, files, or sections within the same page.

  • Purpose: Enable navigation.
  • Attributes:
    • href: The destination URL or anchor ID.
    • target: Specifies where the link opens (e.g., target="_blank" for a new tab).
    • title: Tooltip text on hover.

Example:

<a href="https://codeswithpankaj.com" target="_blank" title="Visit our site">Codes with Pankaj</a>
<a href="#section1">Jump to Section 1</a>
<div id="section1">
  <h2>Section 1</h2>
  <p>This is a section you can jump to.</p>
</div>
  • Explanation:
    • The first <a> links to an external site and opens in a new tab.
    • The second <a> links to an anchor (id="section1") within the same page.
  • Beginner Tip: Use descriptive link text (e.g., “Codes with Pankaj” instead of “click here”). Test links to ensure they work.

8. HTML Text Formatting

Text formatting tags style or emphasize text, improving readability and accessibility.

  • Common Tags:
    • <strong>: Indicates important text (bold).
    • <em>: Indicates emphasized text (italic).
    • <b>: Bold text (visual only).
    • <i>: Italic text (visual only).
    • <u>: Underlined text.
    • <mark>: Highlighted text.
    • <small>: Smaller text.

Example:

<p>This is <strong>important</strong> and <em>emphasized</em> text.</p>
<p>Use <b>bold</b>, <i>italic</i>, or <u>underline</u> for styling.</p>
<p>Highlight with <mark>mark</mark> or use <small>small text</small>.</p>
  • Explanation:
    • <strong> and <em> add semantic meaning, helping screen readers and SEO.
    • <b>, <i>, and <u> are for visual styling without semantic importance.
    • <mark> highlights text, and <small> reduces text size for fine print.
  • Beginner Tip: Prefer <strong> and <em> over <b> and <i> for accessibility. Avoid overusing formatting tags—use CSS for consistent styling.

9. HTML Styles

The style attribute adds inline CSS to style HTML elements directly. While useful for quick changes, CSS files are preferred for larger projects.

  • Purpose: Control appearance (e.g., color, font, size).
  • Common Properties:
    • color: Text color.
    • background-color: Background color.
    • font-size: Text size.
    • text-align: Text alignment (e.g., center, left).

Example:

<h1 style="color: blue; text-align: center;">Welcome to Codes with Pankaj</h1>
<p style="background-color: lightgray; font-size: 18px;">This paragraph is styled inline.</p>
  • Explanation:
    • The style attribute applies CSS rules directly to the element.
    • Multiple properties are separated by semicolons.
  • Beginner Tip: Use inline styles sparingly for testing or small changes. For maintainability, learn CSS and use external stylesheets.

Putting It All Together

Here’s a complete HTML page combining all the concepts:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Learn HTML - Codes with Pankaj</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1 style="color: green;">Welcome to Codes with Pankaj</h1>
  <p>This is a <strong>beginner-friendly</strong> tutorial to learn HTML.</p>
  <h2>Explore Our Tutorials</h2>
  <p>Visit our <a href="https://codeswithpankaj.com" target="_blank">website</a> for more.</p>
  <p style="text-align: center;">Learn <em>HTML</em>, <b>CSS</b>, and <u>JavaScript</u> with us!</p>
</body>
</html>
  • Explanation: This page uses the basic structure, headings, paragraphs, links, text formatting, and inline styles to create a simple webpage.
  • How to Use:
    • Save as index.html.
    • Open in a browser to see the result.
  • Beginner Tip: Experiment by changing attributes or styles to see how the page updates.

Thank you for learning with Codes with Pankaj! Visit codeswithpankaj.com for more tutorials and resources to continue your coding journey.

Scroll to Top