Quick Guide to HTML Elements

Quick Guide to HTML Elements

Become a HTML guru!

Dee's photo
Dee
·

2 min read

Table of contents

Base elements in HTML5

The HTML elements that allow you to build the most basic web page

<body> The container for a web page's content. Must be a direct child of , and must be an ancestor of all HTML elements (except where noted).

<!DOCTYPE html>
<html>
  <head>
    <!-- Document metadata -->
  </head>
  <body>
    <!-- Document content -->
  </body>
</html>

<head> defines a container for a web page's metadata.

<!DOCTYPE html>
<html>
  <head>
    <!-- Document metadata -->
  </head>
  <body>
    <!-- Document content -->
  </body>
</html>

<html> Defines the root element of an HTML document. All other elements must be contained within this root element.

<!DOCTYPE html>
<html>
  <head>
    <!-- Document metadata -->
  </head>
  <body>
    <!-- Document content -->
  </body>
</html>

<link> Defines a link between the current web page and an external link or resource.

Forms in HTML5

<button> Defines a clickable button

<button>
  Submit form
</button>

fieldset Defines a group of controls within a form.

<form action="/subscribe" method="post">
  <fieldset>
    <legend>Subscribe to the Newsletter</legend>
    <input type="email" name="email">
    <button>Ok</button>
  </fieldset>
</form>

form Defines an interactive form with controls.

<form action="/signup" method="post">
  <p>
    <label>Title</label><br>
    <label>
      <input type="radio" name="title" value="mr">
      Mr
    </label>
    <label>
      <input type="radio" name="title" value="mrs">
      Mrs
    </label>
    <label>
      <input type="radio" name="title" value="miss">
      Miss
    </label>
  </p>
  <p>
    <label>First name</label><br>
    <input type="text" name="first_name">
  </p>
</form>

List

<li>Defines a list item within an ordered list <ol> or unordered list <ul>

<ul> Defines an unordered list. Bullet point list

<ol> Defines an ordered list. Numbered list

HTML5#LCOineuronsemantichtml