What is HTML and how much HTML do I need to know?

#html #tutorial #beginners #webdev

HTML (Hyper Text Markup Language) is the foundation of each webpage. It is essentially the skeleton of any webpage. Anyone who wants to be a frontend developer will need to know it.

In total there are over 100 html tags and when writing html files you'll only use about 30% of them on a regular basis. It is important to clarify that you don't need to remember every html tag off the top of your head.

In this article I'll outline the most frequently used HTML tags. Which I've split into 6 sections:

Page Tags
Body Tags
List Tags
Form Tags
Table Tags
Embedded Tags

Page Tags

Page tags are used tags used to outline the format of your page. Much like a human skeleton, html tags can be divided into different sections which indicates where they should sit on a page. Below are the most commonly used page tags.

HTML TAG	Description
`<html>`	Defines the root of an HTML document
`<head>`	Contains metadata/information for the document
`<title>`	Defines a title for the document
`<body>`	Defines the document's body
`<main>`	Specifies the main content of a document
`<footer>`	Defines a footer for a document or section
`<header>`	Defines a header for a document or section
`<link>`	Defines the relationship between a document and an external resource (most used to link to style sheets)
`<style>`	Defines style information for a document
`<script>`	Defines a client-side script
`<noscript>`	Defines an alternate content for users that do not support client-side scripts

Here is a common layout you're likely to see for a html page.

<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./script_1.js"></script>
    <style>
      body {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <header>Header</header>
    <main>Main</main>
    <footer>Footer</footer>
    <script src="./script_2.js"></script>
    <noscript>No javascript for this page</noscript>
  </body>
</html>

Body tags

These are the most common tags you'll see inside of a body tag. They are used to display the text:

HTML TAG	Description
`<div>`	Defines a section in a document. `<section>` can also be used for larger sections
`<h1>`	Defines HTML headings and size depends on `h(number)`. Can select between `<h1>` and `<h6>`
`<p>`	Defines a paragraph
`<b>`	Defines bold text. `<strong>` can also be used.
`<small>`	Defines smaller text
`<br>`	Defines a single line break
`<button>`	Defines a clickable button
`<i>`	Defines a part of text in an alternate voice or mood. `<em>` can also be used
`<a>`	Defines a hyperlink
`<s>`	Defines text that is no longer correct

Here is an example of all of these tags in use:

<body>
  <h1>Page Title</h1>
  <h2>Sub Title</h2>
  <div>
    <p><b>Bold Text</b></p>
    <p><small>Small Text</small></p>
    <p>
      Line One <br />
      Line Two
    </p>
    <p><i>Italic Text</i></p>
    <a href="https://www.google.com/" target="_blank">Google Link</a>
    <button>Click Me!</button>
  </div>
  <script src="./script_2.js"></script>
  <noscript>No javascript for this page</noscript>
</body>

Lists Tags

For a list you'll use either <ol> or <ul> with each bullet point wrapped in a <li>

HTML TAG	Description
`<ol>`	Defines an ordered list
`<ul>`	Defines an unordered list
`<li>`	Defines a list item

Here is an example of both in use:

<body>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
  </ul>
  <ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ol>
</body>

Form Tags

Forms are a bit trickier than the previous html tags as input has multiple types. Lets start by breaking down the tags

HTML TAG	Description
`<form>`	Defines an HTML form for user input
`<textarea>`	Defines a multiline input control (text area)
`<input>`	Defines an input control. See below for further explanation
`<select>`	Defines a drop-down list
`<option>`	Defines an option in a drop-down list

Input Types

I won't cover every input type, I'll go through the most common one's you're likely to see on a html page.

Type name	Description
checkbox	Checkboxes let a user select ZERO or MORE options of a limited number of choices.
color	used for input fields that should contain a color.
date	used for input fields that should contain a date
email	input fields that should contain an e-mail address.
file	a file-select field and a "Browse" button for file uploads
number	for number inputs only
radio	enables users to only select one of the following fields
range	defines a slider control for entering a number a rough number important
tel	for telephone number inputs
text	for basic text strings
time	for time selection
url	used for input fields that should contain a URL address

Example

Here is a basic form with multiple input types:

<form>
  <label for="name">Name:</label>
  <input type="text" />
  <br />

  <label for="age">Age:</label>
  <input type="number" />
  <br />

  <label for="start">when did you start coding?</label>
  <input type="date" />
  <br />

  <label for="image">Image:</label>
  <input type="file" />
  <br />

  <div>
    <p>Favourite Language:</p>
    <br />
    <input type="radio" name="fav_language" value="HTML" />
    <label for="html">HTML</label>
    <input type="radio" name="fav_language" value="CSS" />
    <label for="css">CSS</label>
    <input type="radio" name="fav_language" value="JavaScript" />
    <label for="javascript">JavaScript</label>
  </div>

  <div>
    <p>Would would you like to learn next?</p>
    <select>
      <option>Ruby</option>
      <option>Python</option>
    </select>
  </div>

  <div>
    <p>What have you learnt so far?</p>
    <textarea placeholder="What have you learnt so far?"> </textarea>
  </div>
</form>

Table Tags

These are the tags used for displaying tables:

HTML TAG	Description
`<table>`	Defines a table
`<caption>`	Defines a table caption
`<thead>`	Groups the header content in a table
`<tbody>`	Groups the body content in a table
`<tfoot>`	Groups the footer content in a table
`<tr>`	Defines a row in a table
`<th>`	Defines a header cell in a table
`<td>`	Defines a cell in a table

Tables are not the easiest thing to wrap your head around. But the basic rules are as follows:

The entire table should be wrapped inside of <table> tags.
A <caption> can be used if you need a table title.
<thead> is used for the first row <tbody> used for the other rows.
Every row is wrapped in <tr> and each column use wrapped in a <td> (or <th> for the <thead> row).
If you want a final table row for things such as total or summaries use <tfoot>.
By default tables do not have any styling so they should be added using CSS

Example

Here is an example of a table using HTML tags.

<table>
  <caption>
    Example Table
  </caption>
  <thead>
    <tr>
      <th>-</th>
      <th>A</th>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>A1</td>
      <td>B1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>A2</td>
      <td>B2</td>
    </tr>
  </tbody>
</table>

Embedded tags

Embedding is used to add pictures, audio and videos to your html page. These tags require a source file.

Here is a list of commonly used tags for embedding:

HTML TAG	Description
`<source>`	Defines multiple media resources for media elements (`<video>` and `<audio>`)
`<img>`	Defines an image. You can also use `<video>` and `<audio>`
`<embed>`	Defines a container for an external application
`<iframe>`	Defines an inline frame

I won't give examples of these specific tags cause they vary a lot. But when you are comfortable with the other aspects of HTML, play around with them.

Summary

The most important tags are the ones outlined in this article. For those new to coding, don't spend too much time trying to remember every tag that exists, your time can be spent elsewhere. Priorities learning CSS and Javascript once you've understood the fundamentals of HTML.

Thank you for reading, I hope this tutorial helps!

A full list of html tags can be found here.