Introduction to HTML

"A guide to HTML for beginners."

By Samir Niroula

27 October 2024
Introduction to HTML

Introduction to HTML

HTML, or HyperText Markup Language, structures web content. It defines elements like headings, paragraphs, links, and images. Understanding HTML is crucial for web development.

What is HTML?

HTML is a markup language for creating web pages. It uses tags to structure content.

Key Features:

  • Structured Content
  • Web Foundation
  • Not Case-Sensitive

Basic HTML Structure

An HTML document includes the <!DOCTYPE html> declaration and nested tags.

Simple HTML Document

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Welcome</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>My first HTML page.</p>
    </body>
</html>

Common HTML Tags

Headings

  • <h1> to <h6>: Define headings, with <h1> being the highest level and <h6> the lowest.
<h1>Main Heading</h1>
<h2>Subheading</h2>

Paragraph

  • <p>: Defines a paragraph.
<p>This is a paragraph.</p>
  • <a>: Defines a hyperlink.
<a href="https://example.com">Visit Example</a>

Image

  • <img>: Embeds an image.
<img src="image.jpg" alt="Example Image" />

Division

  • <div>: Defines a division or section.
<div>This is a section.</div>

Span

  • <span>: Defines an inline section.
<span>This is an inline section.</span>

Unordered List

  • <ul>: Defines an unordered list.
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Ordered List

  • <ol>: Defines an ordered list.
<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

List Item

  • <li>: Defines a list item.
<li>List item</li>

Table

  • <table>: Defines a table.
  • <tr>: Defines a table row.
  • <td>: Defines a table cell.
  • <th>: Defines a table header.
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Form

  • <form>: Defines a form.
  • <input>: Defines an input field.
  • <button>: Defines a button.
<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" />
    <button type="submit">Submit</button>
</form>

Conclusion

HTML is essential for web development. It provides the structure for web pages and is the foundation for learning CSS and JavaScript.