HTML Basics

Learn the fundamental concepts of HTML including tags, attributes, and document structure.

HTML Elements

HTML elements are the building blocks of HTML pages. An element is a discrete component of an HTML document that consists of a start tag, content, and an end tag. Some elements are empty and only have a single tag.

Common HTML Elements

Headings

HTML has six levels of headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Title</h3>

Paragraphs

Paragraphs are defined with the <p> tag.

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

Links

Hyperlinks are created with the <a> tag.

<a href="https://example.com">Visit Example</a>

Images

Images are embedded with the <img> tag (self-closing).

<img src="image.jpg" alt="Description">

Lists

Unordered lists use <ul> and <li> tags:

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

Ordered lists use <ol> instead of <ul>.

HTML Attributes

Attributes provide additional information about HTML elements. They are always specified in the start tag and usually come in name/value pairs like: name="value".

Common Attributes

  • class: Specifies one or more classnames for an element
  • id: Specifies a unique id for an element
  • style: Specifies inline CSS styles for an element
  • title: Provides extra information about an element
  • href: Specifies the URL of a linked resource
  • src: Specifies the URL of an image or other media resource
  • alt: Provides alternative text for images

HTML Document Structure

A basic HTML document has a standard structure that includes the DOCTYPE declaration, html element, head element, and body element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

Important Elements in Head Section

  • <title>: Defines the document title shown in the browser tab
  • <meta>: Provides metadata about the HTML document
  • <link>: Links to external resources like CSS files
  • <script>: Embeds or references JavaScript

HTML Forms

Forms are used to collect user input. The <form> element contains various input elements.

Form Elements

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    
    <textarea name="message" placeholder="Your message"></textarea><br><br>
    
    <input type="submit" value="Submit">
</form>