Skip to content

HTML

Basic Structure

Tag Description
<!DOCTYPE html> defines the document type
<html> defines the root element of an HTML page
<head> contains metadata and scripts
<title> specifies the title of the document
<body> contains the visible page content

Text Formatting

Tag Description
<h1> - <h6> defines heading levels 1 to 6
<p> defines a paragraph
<em> defines emphasized text
<strong> defines important text
<sup> defines superscript text
<sub> defines subscript text
<del> defines deleted text
<ins> defines inserted text
Tag Description
<a> defines a hyperlink
href specifies the URL of the page the link goes to
target specifies where to open the linked page
title specifies extra information about the linked page

Images

Tag Description
<img> defines an image
src specifies the URL of the image
alt specifies an alternate text for the image

Lists

Tag Description
<ul> defines an unordered list
<ol> defines an ordered list
<li> defines a list item

Tables

Tag Description
<table> defines a table
<tr> defines a table row
<th> defines a table header cell
<td> defines a table data cell

Forms

Tag Description
<form> defines a form
<input> defines an input field
type specifies the type of input field
<textarea> defines a multiline input field
<select> defines a dropdown list
<option> defines an option in a dropdown list
<button> defines a clickable button

Miscellaneous

Tag Description
<div> defines a division or section of the document
<span> defines a small section of text within a larger document
<br> inserts a line break
<hr> inserts a horizontal rule
<style> defines styles for the document
<script> defines scripts for the document

A Complete Page

<!DOCTYPE html>                     <!-- declares document type as HTML -->
<html>                              <!-- opening tag for HTML document -->
  <head>                           <!-- head section contains metadata about the document -->
    <title>Page Title</title>      <!-- sets the title of the page displayed in the browser -->
    <meta charset="utf-8">        <!-- defines the character set used in the document -->
  </head>
  <body>                           <!-- body section contains the content of the document -->
    <h1>Heading 1</h1>             <!-- defines a top-level heading -->
    <p>Paragraph</p>              <!-- defines a paragraph of text -->
    <a href="https://www.example.com">Link</a> <!-- defines a hyperlink -->
    <img src="image.jpg" alt="description">  <!-- inserts an image -->
    <ul>                           <!-- unordered list -->
      <li>Item 1</li>             <!-- list item -->
      <li>Item 2</li>
    </ul>
    <ol>                           <!-- ordered list -->
      <li>Item 1</li>             <!-- list item -->
      <li>Item 2</li>
    </ol>
    <table>                        <!-- creates a table -->
      <tr>                         <!-- table row -->
        <th>Header 1</th>          <!-- table header cell -->
        <th>Header 2</th>
      </tr>
      <tr>
        <td>Row 1, Cell 1</td>     <!-- table data cell -->
        <td>Row 1, Cell 2</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
      </tr>
    </table>
  </body>
</html>

For more information, check out the Mozilla Developer Network's HTML documentation.