Home / web developement / A beginner-friendly HTML tutorial
html database tags

A beginner-friendly HTML tutorial

📌 1. What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It uses tags to structure content like text, images, videos, links, forms, etc.

🧱 2. Basic Structure of an HTML Document

<!DOCTYPE html>

<html>

  <head>

    <title>Page Title</title>

  </head>

  <body>

    <h1>Hello World</h1>

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

  </body>

</html>

Section Description
<!DOCTYPE html> Declares HTML5 document type.
<html> Root element of the page.
<head> Contains metadata, title, links, etc.
<body> Contains all visible page content.

🔤 3. Common HTML Tags

Text Formatting

Tag Description
<h1>-<h6> Headings
<p> Paragraph
<br> Line break
<hr> Horizontal line
<b>, <strong> Bold text
<i>, <em> Italic text
<u> Underline text
<small> Smaller text
<mark> Highlight text
<sub> / <sup> Subscript / Superscript

 

Links and Images

<a href="https://example.com">Visit Site</a>
<img src="image.jpg" alt="Image description" width="200">

 

Lists

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

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

 

Tables

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


Forms

<form>
  <label>Name:</label>
  <input type="text" name="name"><br>
  <label>Email:</label>
  <input type="email" name="email"><br>
  <input type="submit" value="Submit">
</form>

Input Type Description
text Single-line text
email Email field
password Password input
radio Radio button
checkbox Checkbox
submit Submit button

🎨 4. Semantic HTML (HTML5)

Tag Purpose
<header> Page or section header
<nav> Navigation menu
<main> Main content
<section> Section of a page
<article> Self-contained content
<aside> Sidebar or aside content
<footer> Page or section footer
<figure> / <figcaption> Image with caption

🧩 5. Multimedia Tags

Tag Use
<img> Display images
<audio> Embed audio files
<video> Embed video files
<iframe> Embed another page (e.g. YouTube)

<video controls width="320">
  <source src="movie.mp4" type="video/mp4">
</video>
 

⚙️ 6. Attributes in HTML

HTML tags can have attributes to give extra information.

<a href="https://example.com" target="_blank">Open in New Tab</a>
<img src="pic.jpg" alt="Picture" width="300">

Common attributes:

  • href, src

  • alt, title

  • id, class

  • style

  • width, height

📁 7. HTML File Structure & Naming

  • Save your file with a .html extension.

  • Open in any browser to view.

  • Use folder structure to organize files (images, CSS, JS).

⚡ 8. Best Practices

  • Use semantic tags.

  • Keep your code clean and indented.

  • Add alt to images for accessibility.

  • Test in multiple browsers.

  • Separate CSS and JavaScript into external files.

Creating a basic web page in HTML

✅ Step-by-Step: Create a Basic Web Page

  • Open a Text Editor

    Use any plain text editor like:

    • Notepad (Windows)

    • TextEdit (Mac, in plain text mode)

    • VS Code, Sublime Text, or Atom

  • Write Your HTML Code

    Here's a basic template:

              <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph of text on the page.</p>
    <a href="https://example.com">Visit Example</a>
</body>
</html>

  • Save the File

    Save it with a .html extension, for example:

    index.html

  • Open in a Browser

    Double-click the saved file or right-click > “Open with” > choose your browser (e.g., Chrome, Firefox, Edge).