Master HTML: From Basics to Expert

HTML Guide: From Basics to Advanced

1. Introduction to HTML

What is HTML?
HTML (HyperText Markup Language) is the backbone of all web pages. It structures the content you see on websites, like text, images, and links. HTML is a case insensitive language.

We can either use .htm or .html extension.

Why Learn HTML?
HTML is the foundation of web development. Knowing it allows you to create static web pages and gives you the groundwork to learn CSS and JavaScript for styling and interactivity.

Analogy: Think of HTML as a building blueprint. It defines the structure, but it needs CSS (paint and decoration) and JavaScript (functionality) to come alive.

Discover the Differences Between HTML, CSS, and Javascript - Golden Owl

HTML as a building blueprint with CSS and JavaScript

2. Setting Up

Choose a Text Editor: Use tools like VS Code, Sublime Text, or Notepad++ for writing HTML.
Create Your First File:
- Open your text editor.
- Save a new file as index.html (always use .html extension).

3. Basic Structure of an HTML Document

Here’s how a simple HTML file looks:

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to HTML!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Explanation:

<!DOCTYPE html>: Declares the document type as HTML5.
<html>: The root element.
<head>: Contains metadata (like the page title).
<body>: Contains the visible content of the webpage.

IMPORTANT NOTES

• <head> & <body> tags are children of HTML tag.

• HTML is the parent of <head> & <body> tags.

• Most of the HTML elements have opening & closing tag with content in between opening & closing tags.

• Some HTML tags have no content. These are called Empty elements e.g. <br>

• you can use “inspect element” or “view page source” option from Chrome to look into a website’s HTML Code.

4. HTML Tags and Elements

Tags: Define the beginning (<tag>) and end (</tag>) of an element. Example: <p>This is a paragraph.</p>.

Elements: Elements are the combination of opening tags, content, and closing tags. For example:

<p>This is an element.</p>

Opening tag: <p>
Content: This is an element.
Closing tag: </p>

Comments: Comments in HTML are not displayed in the browser and are used to explain the code. They start with :

<!-- This is a comment -->

Common Tags:

Headings: <h1> to <h6> (largest to smallest).
Paragraph: <p>.
Links: <a href="https://example.com">Visit Example</a>.
Images: <img src="image.jpg" alt="Description">.

5. Formatting Text

Bold, Italic, and Underline:

<b>This is bold</b>  
<i>This is italic</i>  
<u>This is underline</u>

Subscript and Superscript:

This <sub>is</sub> subscript.  
This <sup>is</sup> superscript.

Big and Small Text:

<big>Hello World</big>  
<small>Hello World</small>

6. Attributes in HTML

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

Example:

<img src="cat.jpg" alt="A cute cat" width="300" height="200">

src: The file path of the image.
alt: Text shown if the image doesn’t load.
width and height: Define dimensions.

7. Line Breaks and Horizontal Rules

Line Breaks:

This is the first line.<br>This is the second line.

Horizontal Rule:

<hr>

8. Page Layout

Using semantic tags to structure content:

<main>
    <section>
        <article>
            <h1>Article Title</h1>
            <p>Content goes here.</p>
        </article>
    </section>
    <aside>
        <p>Aside content like ads or sidebars.</p>
    </aside>
</main>

9. Multimedia and Embedding Content

Images:

 <img src="image.jpg" alt="A beautiful view">

Videos:

 <video controls>
     <source src="video.mp4" type="video/mp4">
     Your browser does not support the video tag.
 </video>

Attributes for Video We can use the following attributes:

src: Specifies the URL of the video file (harry.mp4 in this case).
width: Adjusts the width of the video player. Height adjusts automatically to maintain aspect ratio.
controls: Displays video controls such as play, pause, volume, etc.
autoplay: Automatically starts playing the video when the page loads.
loop: Causes the video to automatically start over from the beginning when it reaches the end.
preload: Specifies whether the video should be loaded when the page loads (auto, metadata, none).

Audio:

 <audio controls>
     <source src="audio.mp3" type="audio/mpeg">
     Your browser does not support the audio tag.
 </audio>

Embedding:

 <iframe src="https://example.com" width="600" height="400"></iframe>

10. Containers: Div and Span

Div Tag:

<div>
    <h1>This is a heading inside a div.</h1>
    <p>This is a paragraph inside a div.</p>
</div>

Span Tag:

<p>This is a <span>highlighted</span> word in a sentence.</p>

11. Forms and Input

Create forms to collect user data.

Example:

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <button type="submit">Submit</button>
</form>

Explanation:

<form>: The form container.
action: Where to send the data.
<input>: Collects user input.
<button>: Submits the form.

12. Advanced HTML Concepts

Tables:

 <table border="1">
     <tr>
         <th>Name</th>
         <th>Age</th>
     </tr>
     <tr>
         <td>Alice</td>
         <td>25</td>
     </tr>
     <tr>
         <td>Bob</td>
         <td>30</td>
     </tr>
 </table>

Lists:

Ordered List:

  <ol>
      <li>Item 1</li>
      <li>Item 2</li>
  </ol>

Unordered List:

  <ul>
      <li>Item A</li>
      <li>Item B</li>
  </ul>

Semantic HTML: Use meaningful tags like <header>, <footer>, <article>, and <section> for better structure and SEO.

HTML5 APIs:

Geolocation:

  <button onclick="getLocation()">Get Location</button>
  <script>
      function getLocation() {
          navigator.geolocation.getCurrentPosition(function(position) {
              console.log(position.coords.latitude, position.coords.longitude);
          });
      }
  </script>

Canvas:

  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

13. Best Practices (HTML SEO Best Practices)

Use Semantic Tags: Makes code easier to read and improves SEO.
Add alt Text to Images: Helps visually impaired users and improves accessibility.
Validate Your HTML: Use tools like W3C Validator.
Indentation: Use consistent spacing for better readability.
Meta Description: Include a concise summary.

Clean URLs: Make URLs readable and keyword-rich.

 <head> 
     <title>Example Page - SEO Best Practices</title> 
     <meta name="description" content="This is an example page demonstrating SEO best practices in HTML."> 
     <meta name="author" content="Harry"> 
     <link rel="icon" href="favicon.ico" type="image/x-icon"> 
 </head>

14. Resources

Cheatsheet: HTML Cheatsheet
Learning Platform:W3Schools HTML Tutorial
Comprehensive Guide: MDN Web Docs - HTML

15. Conclusion

HTML is your first step into web development. Mastering it gives you a strong foundation to build on with CSS, JavaScript, and beyond !🚀

Start practicing by creating simple web pages and gradually explore more advanced topics. Happy coding !

Complete Guide to HTML: Learn from Beginner to Expert

A Simple Guide for Beginners to Learn HTML

Table of contents