HTML Tags

In this module, we are going to be looking a HTML tags in general, and then in a later module, we are going to look at those called "Semantic Elements", that were introduced in HTML5.

HTML tags or elements are keywords that tell the browser how it should format your webpage. For example, if you wanted to create a section, then you would create a <div> or a <section>. If you wanted to add an image to your webpage, you would create an <img /> tag, among other examples, which we are going to look at below.

`<a>`

This is called the anchor tag. It is used to link the pages in your website together, or to add links to other websites. For example, if you have a homepage and you want to add a link that goes to your about page, you would use this tag. In the same way, if you wanted to add your social media to your website, you would use anchor tags and then add the direct links to your social media profiles.

It has the syntax:

<a href="LINK_TO_WEBSITE">Text to show</a>

Example: The example below links to the "About Us" page

<a href="about.html">About Us</a>

Example using external links

<a href="https://twitter.com/@TSBSankara">@TSBSankara</a>

Sometimes you want that when users click on the links, they open up in new tabs. You can achieve this by adding an attribute on the anchor tag called target and setting it equal to _blank. For example, if you have an "About Us" page that you want to open on a new tab, you would do something similar to the example below:

<a href="about.html" target="_blank">About Us</a>

However, opening links in new tabs opens you up to a vulnerability called Cross Site Scripting, abbreviated as XSS. To avoid this, add another attribute called rel on the anchor tag and set it equal to noreferrer, as in the example below:

<a href="about.html" target="_blank" rel="noreferrer">About Us</a>

The rel attribute defines the relationship between the linked resource and the current document. Therefore setting it to noreferrer means that the newly opened tab cannot be used to inject scripts (XSS) in the actual document.

`<audio>`

This is used to add sound files to your website such as music and other audio streams.

Example:

<audio>
  <source src="favsong.ogg" type="audio/ogg" />
  <source src="favsong.mp3" type="audio/mpeg" />
  Your browser does not support the audio tag.
</audio>

The audio tag is used together with the source tag to define multiple audio files, or to define multiple audio files of different formats. The source tag is an empty tag that takes in a src attribute which defines the path to the audio file, and a type attribute that defines that type of audio file it is, such as an mp3 file.

The text inside the audio tag will show if your browser does not support JavaScript.

The audio tag takes in a number of attributes:

controls - this adds icons to pause and play the audio as well as adjust the volume.
autoplay - this enables the audio to autoplay once it loads.
loop - this enables the audio to restart playing once it finishes.

The syntax for the attributes looks like this:

<audio controls autoplay loop>
  <source src="favsong.ogg" type="audio/ogg" />
  <source src="favsong.mp3" type="audio/mpeg" />
  Your browser does not support the audio tag.
</audio>

Note: The attributes are not in name-value pairs like others we have seen so far. This is because they are boolean values. They are either true or false.

`<b>`

This is used to make text bold. It can be used in place of the strong tag which also makes text bold. Text that you want to make bold is text that you and your users are going to consider important. Simply wrap the text you want to be bold in this tag as in the example below:

<b>I am important text because I am in bold</b>

The <b> tag does make text bold - but it does not mark it as important. If you want to mark text as important and bold, use the <strong> tag instead.

`<blockquote>`

Is used to specify content that has been quoted from another source.

Example:

<blockquote cite="http://learnerspree.com">
  You can easily learn how to code using learnerspree. Did you know?
</blockquote>

It takes in a cite attribute which links to the source being quoted.

`<body>`

This tag contains all the visible content for your website. Everything that you want your users to interact with, to see or to read should be placed inside the body tags.

Example:

<body>
  <article>
    <h1>Welcome to self-taught learning with learnerspree</h1>
    <p>
      Learn programming, transcription and even cybersecurity with our extensive
      documentation
    </p>
    <button>Show me how</button>
    <img src="https://learnerspree.com/logo.png" alt="learnerspree logo" />
  </article>
</body>

`<br />`

Inserts a single line break between elements.

Example:

<article>
  <h2>Diary of a wimpy kid</h2>
  <br />
  <p>This is a story of a boy who used to cry a lot.</p>
</article>

`<button>`

This is used to represent a clickable button.

Example:

<button>Subscribe</button>

`<canvas>`

This is used to draw graphics on web pages with the help of JavaScript.

Example from W3Schools:

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>
 
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 80, 80);
</script>

The example above draws a red rectangle. The text inside the canvas element will display when you have JavaScript disabled in your web browser, or when the script to draw the canvas fails to load.

`<caption>`

This is used to add a caption for a table. It must be inserted immediately after the table tag.

Example:

<table>
  <caption>
    Table showing expenditure against budget
  </caption>
 
  <!-- Rest of the table goes here -->
</table>

By default, table captions are aligned to the center.

`<code>`

Is used to represent code, or a code block.

Example:

<body>
  <p>It is a good idea to use <code>meta</code> tags to improve SEO</p>
</body>

`<div>`

This is used to represent a division or a section in your HTML document. It is used as a container element which is then styled in CSS.

By default, there is always a line break before and after the div element. This is important to note as you will see when we begin styling with CSS.

Example:

<div>This is my section. There are many like it, but this one is mine.</div>

You can place any kind of content inside the <div>

`<form>`

Is used to create a form which will require user interaction.

Example:

<form>
  <input
    type="text"
    name="username"
    id="username"
    placeholder="Enter your username"
  />
  <button type="submit">Log In</button>
</form>

The form above has an input that says "Enter your username" as the placeholder text, and a submit button that the user can click to submit the form when the input is filled.

The form element takes in an optional attribute called action which defines the endpoint to hit when the form is submitted, such as a database to add the data. For example:

<form action="https://api.learnerspree.com/index.php">
  <!-- Rest of code -->
  <!-- The endpoint above does not exist -->
</form>

The default behavior of a form element is to reload the entire webpage when the form is submitted. You can present this with JavaScript.

`<h1>`

HTML has six headings which start with <h1> as the biggest heading, and <h6> as the smallest heading. All these are used to create headings within your HTML document.

Example:

<h1>I am the biggest heading. Better put some respect on my name!</h1>
 
<h2>I am the most responsible child in the family.</h2>
 
<h3>I don't care what people think about me.</h3>
 
<h4>You'd be surprised how much people don't care about what you do.</h4>
 
<h5>People might not know what you do...</h5>
 
<h6>...but everyone will know what you have done.</h6>

Only ever have one <h1> element per page in your website. Read more in the Rules For Writing HTML module.

`<head>`

The head element is the container for metadata. All meta tags are defined in the head section of your document, and they will not be displayed to the users.

Document titles, stylesheets and scripts are also linked in the head section.

Example:

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="author" content="Thomas Sankara" />
  <meta
    name="description"
    content="Buy Amazon prime today and enjoy free Twitch subscriptions"
  />
  <meta name="keywords" content="amazon prime, twitch, amazon" />
  <link rel="stylesheet" href="index.css" />
  <script src="app.js"></script>
  <title>Amazon prime | A Subsidiary of Twitch</title>
</head>

`<hr />`

Is used to insert a horizontal rule in your document. Just like <br />, simply define <hr /> wherever you want your line to appear.

Example:

<article>
  <p>But you never even told me where you live...</p>
  <hr />
  <p>221B Baker Street!</p>
</article>

The snippet above will render the following:

But you never even told me where you live...

221B Baker Street!

`<html>`

This tag represents the root (starting point) of your HTML document. It is the parent component for all other tags that you will have in your web page - except the <!Doctype html>

It takes in a lang attribute which describes the language of the document. Always have the lang attribute as it helps search engines to know the language of your website.

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title of the document</title>
  </head>
 
  <body>
    <h1>Hello world!</h1>
  </body>
</html>

`<iframe>`

Defines an inline frame. It is used to embed content from another document into the current HTML document. They are mostly used for media such as embedding YouTube videos into your website.

Example:

<iframe src="https://tsbsankara.com"></iframe>

If you're embedding content such as a YouTube video, there are extra attributes that you need to add to the iframe:

allowfullscreen - this is set to either true or false and allows the user to play the video in fullscreen mode.
height - used to define the height of the iframe
width - used to define the width of the iframe
name - is the name of the iframe
src - specifies the web address of the document you want to embed.

Example:

<iframe
  src="https://youtube.com/tsbsankara/video.mp4"
  name="YouTube Intro Video"
  allowfullscreen="true"
  width="500px"
  height="300px"
>
</iframe>

`<img>`

This is used to embed images in your HTML document. More information about this tag is available in the module about Working With Images

`<input />`

Defines an input field that a user can use to enter data. It is the most important component of the form element.

The input is a self-closing tag.

Example:

<form>
  <input type="text" />
</form>

This is the simplest definition of an input that you can have. The above creates a single input that a user can use to enter text information, numbers, and symbols, as in the example below:

Additional styling has been applied to the example above so that it can be viewed on both dark and light modes. More about styling inputs in the CSS modules.

The input takes in a couple of other attributes which defines what type of input you want to create. It is also used in conjuction with the label element which "links" it to the input.

Example:

<form>
  <label for="username">Enter your username</label>
  <input
    type="text"
    name="username"
    id="username"
    placeholder="Enter your username"
    required
  />
</form>

The label element takes in a for attribute which should match either the id or name of the input to which it is linked. In the example above, it is linked to the input that has the name and id of username. The text within the label represents the visible text that the users can read.

The above example creates an input of type text to accept text input, as well as adding a name and id attribute which links it to the label. The placeholder adds guiding text that you want to appear inside the input. The required attribute adds HTML5 validation so that the form cannot be submitted until the input is filled.

Inputs must have a name attribute so that when the form is submitted, the filled inputs are going to be associated with their respective names. Otherwise, the form submission is going to appear blank.

Below is that the example above is going to render:

The label and input elements are both inline elements - they start on the same line - hence the appearance above of the label and input being on the same line.

The input also supports autofilling data. So, if you have saved some data in your browser such as you name and email address, when you create an input that accepts the name and another that accepts the email address, you have the option to autofill the data.

If you want to disable the autofill, set autocomplete="off" on the parent form element.

Input types

You can create inputs depending on the one you want to show your users. All these are dependent on the input types. See the examples below:

<!-- A form with autocomplete disabled -->
<form autocomplete="off">
  <!-- An input that accepts text -->
  <label for="firstname">Enter your first name</label>
  <input type="text" name="firstname" id="firstname" />
 
  <!-- An input for that accepts emails only -->
  <label for="email">Enter your email</label>
  <input type="email" name="email" id="email" />
 
  <!-- An input that accepts passwords only -->
  <label for="password">Enter your password</label>
  <input type="password" name="password" id="password" />
 
  <!-- A number input -->
  <label for="number">Choose a number</label>
  <input type="number" name="number" id="number" />
 
  <!-- An input that creates a checkbox -->
  <label for="myCheckbox">Receive updates on new releases</label>
  <input type="checkbox" name="myCheckbox" id="muyCheckbox" />
 
  <!-- An input that creates a button -->
  <label for="myButton">Button input</label>
  <input type="button" name="myButton" id="myButton" />
 
  <!-- An inputs that shows a color picker -->
  <label for="color-picker">What is your favorite color?</label>
  <input type="color" name="color-picker" id="color-picker" />
 
  <!-- An input that shows a calendar -->
  <label for="calendar">Enter your email</label>
  <input type="date" name="calendar" id="calendar" />
 
  <!-- An input that allows users to select files from their machine -->
  <label for="file-picker">Choose a file to upload</label>
  <input type="file" name="file-picker" id="file-picker" />
 
  <!-- A hidden input usually used for the infamous "I am not a Robot captcha" -->
  <label for="captcha">I am not a robot</label>
  <input type="hidden" name="captcha" id="captcha" />
 
  <!-- An image as the form submit button. Pass the image in the `src` attribute -->
  <label for="submit-button">Log In</label>
  <input
    type="image"
    src="submit.gif"
    name="submit-button"
    id="submit-button"
  />
 
  <!-- A month datepicker -->
  <label for="month">What is your birth month?</label>
  <input type="month" name="month" id="month" />
 
  <!-- Creates a radio button -->
  <label for="radio-button">Choose your destiny</label>
  <input type="radio" name="radio-button" id="radio-button" />
 
  <!-- Creates a range slider -->
  <label for="range-slider">On a scale of 1 to 10...</label>
  <input type="range" name="range-slider" id="range-slider" />
 
  <!-- Resets all form values to their initial values -->
  <label for="reset">Reset</label>
  <input type="reset" name="reset" id="reset" />
 
  <!-- Defines a search input -->
  <label for="search">Search for a country</label>
  <input type="search" name="search" id="search" />
 
  <!-- Defines a submit button -->
  <label for="submit-button">Submit Form</label>
  <input type="submit" name="submit" id="submit" />
 
  <!-- Defines a telephone number input -->
  <label for="phone-number">Enter your phone number</label>
  <input type="tel" name="phone-number" id="phone-number" />
 
  <!-- Defines a time input -->
  <label for="time">What time is it?</label>
  <input type="time" name="time" id="time" />
 
  <!-- Defines a url input -->
  <label for="website">What is your website?</label>
  <input type="url" name="website" id="website" />
 
  <!-- Creates a datepicker for week and year -->
  <label for="week">Week and Year</label>
  <input type="week" name="week" id="week" />
</form>

`<label>`

Defines the text to show for an input. It takes in a for attribute which should be equal to the id attribute of the same input.

The label increases the clickable area of an input as it triggers the input when it is clicked.

Example:

<label for="search">Search for a country</label>
<input type="search" name="search" id="search" />

When you click on the text in the label, it also triggers the input and shows the keyboard if you're on mobile.

`<link>`

This is used to link external stylesheets which contain your CSS code, into the HTML document that requires it. It must be placed within the head of your HTML file.

It takes in a rel attribute which describes the relationship of the document you are linking, i.e a stylesheet, and another href attribute which is the relative link to the actual CSS file.

It is a self-closing tag.

Example:

<head>
  <link rel="stylesheet" href="index.css" />
</head>

`<noscript>`

Defines alternate content that will be displayed to users who have disabled JavaScript in the browser, or if the scripts is unable to load.

Example:

<noscript>You need to enable JavaScript for this app to run.</noscript>

`<ol>`

Creates an ordered (numbered) list, either numerical or alphabetical.

Example:

<ol>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Code</li>
  <li>Repeat</li>
</ol>

Will create:

1. Eat
2. Sleep
3. Code
4. Repeat

You can also define the starting point of your numbering using the start attribute on the ol element. For example, if you want your numbering to start at 800, you would do the following:

<ol start="800">
  <li>Eat</li>
  <li>Sleep</li>
  <li>Code</li>
  <li>Repeat</li>
</ol>

This creates the following:

800. Eat
801. Sleep
802. Code
803. Repeat

Note: The numberings will not display if you have set the list-style-type property in CSS to none

`<select>` and `<option>`

Are used to define a dropdown list.

Example:

<label for="country">From where do you originate?</label>
 
<select id="country">
  <option value="Kenya">Kenya</option>
  <option value="Uganda">Uganda</option>
  <option value="Tanzania">Tanzania</option>
  <option value="Rwanda">Rwanda</option>
</select>

select is the parent container for the options. The option takes in a value attribute that defines what that particular option will choose.

The above example outputs the following: (Additional styling has been applied)

From where do you originate?

`<output>`

Is used to show the result of a calculation.

Example from W3Schools: (opens in a new tab)

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" value="50" />
  +<input type="number" id="b" value="25" /> =<output
    name="x"
    for="a b"
  ></output>
</form>

The above examples shows a range slider which has an initial value of "50". When you change the slider, it adds "25" plus the current position of the slider (between 0 and 100 by default), and then shows the output in the output tag.

`<p>`

Defines a paragraph. It is a block element, therefore they will all start on a new line, unless you change it to an inline element using CSS.

Example:

<p>Lorem ipsum is dummy text</p>
<p>It has been used as placeholder text since the 1500s,</p>
<p>And it was popularized in the 1960s</p>

Will render:

Lorem ipsum is dummy text

It has been used as placeholder text since the 1500s,

And it was popularized in the 1960s

`<pre>`

Represents preformatted text.

Example:

<pre>
  Lorem ipsum dolor sit amet
  consectetur adipiscing elit.
  Lorem ipsum is dummy text.
</pre>

Will render the following:

Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum is dummy text.

Preformatted text does not respect the borders you have placed within your document. So if the text was more than the width of your device, it would overflow, as in the example below:

<pre>
This is some really long text that will overflow when the device width is greater than the amount of text here</pre
>

Will render:

This is some really long text that will overflow when the device width is greater than the amount of text here

`<q>`

Inserts a quotation mark.

Example:

<p>He said to <q>handle</q> the situation</p>

Will render:

He said to handle the situation

`<script>`

Is used to add JavaScript code to your HTML. It can also be used to link external JavaScript files in your HTML document.

Example:

<!-- Adding Javascript code -->
<script>
  alert("Welcome to my house");
</script>
 
<!-- Linking an external JavaScript file -->
<script src="index.js"></script>

The script tag can be added in the head of your HTML document, or in the body. It is good practice that if you add it in the head, you give it a defer attribute to ensure that the script will only trigger once everything else in your HTML has loaded in. This improves website loading speed because scripts do not allow your website to load until they have executed.

If you add your script in your body, then it is recommended to add it right before the closing body tag to ensure that the script loads last, after all the HTML had loaded in. The reason for this convention is the same as having the defer attribute on the script tag.

Example:

<!-- Adding the script in the head -->
<head>
  <!-- Some HTML code -->
  <script src="index.js" defer></script>
</head>
 
<!-- Adding the script in the body -->
<body>
  <!-- Some HTML code here -->
  <script src="index.js"></script>
</body>

When you add the script tag as the last element just before closing the body tag, you don't need to have the defer attribute on it, because it will load last already, because of how HTML inteprets your code.

`<small>`

It is an inline element that is used to render smaller text. It can be used for copyright text, licence text, or some other information.

Example:

<p>This is the end of the documentation...Not</p>
<p><small>Copyright 2023</small></p>

`<source>`

Is used to define multiple sources of a piece of media such as audios, videos, and images.

Example:

<!-- Example using the audio tag -->
<audio>
  <source src="favsong.ogg" type="audio/ogg" />
  <source src="favsong.mp3" type="audio/mpeg" />
  Your browser does not support the audio tag.
</audio>
 
<!-- Example using the video tag -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

It can also be used together with the picture tag in order to add multiple images for different device widths. More on this on the module about Working With Images

`<span>`

It is an inline element used to style up part of some text. It can be used just like a div with the only difference being that a span is an inline element and a div is a block element.

Example:

<h1>Professional, <span>Responsive</span> Web Design</h1>

You can then apply the styles that you want to the span, such as custom font sizes and colors, depending on your needs.

`<strong>`

Is used to mark important text.

Example:

<p><strong>This text is important</strong></p>

This will render:

This text is important

`<sup>` and `<sub>`

sup is used to represent superscript, and sub is used to represent subscript. Superscript text represents text such as Trademarks and Footnotes, while subscript text represents text such as chemical formulas.

Example:

<!-- Superscript -->
<p>This is a Registered Trademark<sup>TM</sup></p>
 
<p>What is 2 log <sub>10</sub>?</p>

This will render:

This is a Registered Trademark^TM

What is 2 log ₁₀?

`<svg>`

Stands for Scalable Vector Graphics. It can be used to draw cirles, boxes, text and other graphic images, shapes, and other graphic images.

Example:

<svg width="400" height="100">
  <rect
    width="400"
    height="100"
    style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
  />
</svg>

This will draw a blue rectange, as in the illustration below:

`<table>`

Is used to create a HTML Table. It is used together with other table tags in order to get the correct representation of the table.

Example:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

More about tables is in the module Working With Tables

`<template>`

Is used to describe content that will be hidden when the page loads. This content can be shown using JavaScript.

It is used to create components that you want to reuse in many parts of your website.

Example:

<template>
  <h2>Profile Image</h2>
  <img src="/profile.png" alt="Thomas Sankara Profile" />
</template>

You can then use JavaScript to show this template when the user interacts with your website, such as when they click a button to show it.

`<textarea>`

Is used to create a multi-line text input. It is usually used to collect information such as comments, and reviews. It is used together with the label element just like the inputs.

Example:

<label for="comments">Leave a comment</label>
 
<textarea
  name="comments"
  id="comments"
  cols="10"
  rows="10"
  placeholder="Leave a comment"
></textarea>

The above snippet will create a textarea input with 30 rows and 10 columns. You can style it depending on your needs. See the interactive example below: (Additional styling has been applied for the presentation)

`<title>`

Is used to give the title of your HTML document. It is always placed in the head of your HTML document.

Example:

<head>
  <title>learnerspree online course modules</title>
</head>

The title will show up in the address bar.

`<ul>`

Is used to create an unordered list, usually with bullets. It is used together with li to create list items.

Example:

<ul>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Code</li>
  <li>Repeat</li>
</ul>

Will render:

Eat
Sleep
Code
Repeat

The bullets will not show if you have set list-style-type to none in your CSS.

You can also use a ul to render navigation links.

Example:

<nav>
  <ul>
    <li><a href="about.html">About Us</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    <li><a href="login.html">Login</a></li>
  </ul>
</nav>

`<video>`

Is used to add videos to your website.

Example:

<video>
  <source src="video.ogg" type="video/ogg" />
  <source src="video.mp4" type="video/mpeg" />
  Your browser does not support the video tag.
</video>

Usage is the same as the audio tag.

Adding Comments In HTML HTML Semantic Elements

HTML Tags

<a>

<audio>

<b>

<blockquote>

<body>

<br />

<button>

<canvas>

<caption>

<code>

<div>

<form>

<h1>

<head>

<hr />

<html>

<iframe>

<img>

<input />

Input types

<label>

<link>

<noscript>

<ol>

<select> and <option>

<output>

<p>

<pre>

<q>

<script>

<small>

<source>

<span>

<strong>

<sup> and <sub>

<svg>

<table>

<template>

<textarea>

<title>

<ul>

<video>

`<a>`

`<audio>`

`<b>`

`<blockquote>`

`<body>`

`<br />`

`<button>`

`<canvas>`

`<caption>`

`<code>`

`<div>`

`<form>`

`<h1>`

`<head>`

`<hr />`

`<html>`

`<iframe>`

`<img>`

`<input />`

`<label>`

`<link>`

`<noscript>`

`<ol>`

`<select>` and `<option>`

`<output>`

`<p>`

`<pre>`

`<q>`

`<script>`

`<small>`

`<source>`

`<span>`

`<strong>`

`<sup>` and `<sub>`

`<svg>`

`<table>`

`<template>`

`<textarea>`

`<title>`

`<ul>`

`<video>`