DevDocs

HTML Basics

Learn the fundamentals of HTML to create structured web content

Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page and consists of a series of elements that tell the browser how to display the content.

HTML elements are represented by tags, written using angle brackets. For example, <p> represents a paragraph. Tags usually come in pairs like <p> and </p>, where the first tag is the start tag and the second tag is the end tag (also called closing tag).

HTML Document Structure

A basic HTML document has the following structure:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>
</html>

Let's break down this structure:

  • <!DOCTYPE html>: Declaration that defines the document type and version of HTML
  • <html>: The root element of an HTML page
  • <head>: Contains meta-information about the document
  • <title>: Specifies a title for the document
  • <meta>: Provides metadata about the HTML document
  • <body>: Contains the visible page content

Basic HTML Elements

HTML elements are the building blocks of HTML pages. Here are some of the most commonly used elements:

Headings

HTML headings are defined with the <h1> to <h6> tags, where <h1> is the most important and <h6> is the least important.

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

Paragraphs

The <p> element defines a paragraph:

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

The <a> element defines a hyperlink, which is used to link from one page to another:

<a href="https://www.example.com">This is a link</a>

The href attribute specifies the destination address of the link.

Images

The <img> element is used to embed an image in an HTML page:

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

The src attribute specifies the path to the image, and the alt attribute provides an alternate text for the image if it cannot be displayed.

Lists

HTML supports ordered lists, unordered lists, and definition lists:

Unordered list:

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

Ordered list:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

HTML Attributes

HTML attributes provide additional information about HTML elements:

  • All HTML elements can have attributes
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value"

Common attributes include:

  • id: Specifies a unique id for an element
  • class: Specifies one or more class names for an element
  • style: Specifies an inline CSS style for an element
  • title: Specifies extra information about an element (displayed as a tooltip)

HTML Comments

HTML comments are not displayed in the browser, but they can help document your HTML source code:

<!-- This is a comment -->

<!-- 
  This is a 
  multi-line comment 
-->

Best Practices

Here are some best practices to follow when writing HTML:

  • Always declare the document type with <!DOCTYPE html>
  • Use lowercase tag names
  • Close all HTML elements
  • Use lowercase attribute names
  • Always quote attribute values
  • Always specify alt attribute for images
  • Avoid using inline styles (use CSS instead)
  • Use semantic HTML elements (<header>, <footer>, <nav>, etc.)
  • Validate your HTML using the W3C Validator

On This Page