HTML Basic

by
Previous
Next

Why Learn HTML Basics?

Understanding the basics of HTML is essential because:

  • Foundation of Web Development: It’s the starting point for creating web pages.
  • Customization: Allows you to design and control the appearance of your website.
  • Compatibility: Works across all browsers, platforms, and devices.
  • Integration: Supports adding CSS for styling and JavaScript for interactivity.

Structure of an HTML Document

Every HTML document has a basic structure that helps browsers render content properly. The structure includes the following main elements:

  1. <!DOCTYPE html>: Specifies the document type and version (HTML5 in this case).
  2. <html>: Root element containing all HTML code.
  3. <head>: Contains meta-information, like the title, character encoding and linked resources.
  4. <body>: Contains the content visible on the webpage.

Example of a Basic HTML Page

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple HTML page.</p>
    <a href="https://www.example.com">Visit Example</a>
</body>
</html>

Explanation:

  • The <!DOCTYPE html> declaration ensures compatibility with modern browsers.
  • The <html> tag wraps the entire content.
  • The <head> section includes the page title and meta-information.
  • The <body> section displays the main content.

Key HTML Elements for Beginners

Headings

  • Used to define titles and subheadings.
  • Tags: <h1> to <h6> (largest to smallest).
  • Example:
<h1>Main Title</h1>
<h2>Subheading</h2>

Paragraphs

  • Used to add text content.
  • Tag: <p>
  • Example:
<p>This is a paragraph of text.</p>

Links

  • Create hyperlinks to other pages or resources.
  • Tag: <a>
  • Example:
<a href="https://www.google.com">Visit Google</a>

Images

  • Display images on the page.
  • Tag: <img> (self-closing)
  • Example:
<img src="image.jpg" alt="Description of the image">

Lists

Ordered List (<ol>): Items with a sequence.

<ol>
    <li>First Item</li>
    <li>Second Item</li>
</ol>

Unordered List (<ul>): Items without sequence.

<ul>
    <li>First Item</li>
    <li>Second Item</li>
</ul>

Attributes in HTML

Attributes provide additional information about HTML elements. They are written inside the opening tag.

id: Unique identifier for an element.

<p id="intro">Welcome to HTML Basics!</p>

class: Groups multiple elements for styling.

<p class="highlight">Highlighted text.</p>

style: Adds inline CSS styling.

<p style="color: blue;">This text is blue.</p>

Nested Elements

HTML allows elements to be nested for creating complex structures.

Example:

<div>
    <h1>About Me</h1>
    <p>Hello! I am learning HTML.</p>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</div>

Comments in HTML

Comments help developers explain the code. They do not appear on the webpage.

Syntax:

<!-- This is a comment -->

Tips for Writing HTML Code

  1. Use Proper Indentation: Keeps code clean and readable.
  2. Close All Tags: Ensures proper rendering.
  3. Validate Your Code: Use tools like the W3C HTML Validator to check for errors.
  4. Keep Code Semantic: Use appropriate tags for each element (e.g., <header> for headings, <footer> for page footers).

How to View Your HTML Page

  1. Save your file with the .html extension.
  2. Open the file in any web browser (e.g., Chrome, Firefox).
  3. View your webpage in the browser.

Previous
Next

Leave a Comment