Want to create interactive content? It’s easy in Genially!

Get started free

Microcourse: Introduction to HTML

Aissa Rouissi

Created on September 19, 2025

Start designing with a free template

Discover more than 1500 professional designs like these:

The Meeting Microlearning Mobile

The Meeting Microlearning

Microcourse: Key Skills for University

Microcourse: Team Cybersecurity

Microcourse: Learn Spanish

Microcourse: Key Skills for the Professional Environment

How to Create the Perfect Final Project

Explore all templates

Transcript

Microcourse

Introduction to HTML

EDIT OR DELETE THIS STATEMENT

What will you learn?

In this micro-course, you will discover the fundamentals of HTML (Hyper Text Markup Language), the language that gives structure to web pages. By the end of this module, you will be able to:

  • Identify the most common HTML tags.
  • Understand the basic structure ofa web page.
  • Write simple HTML code to create web content.

Basic concepts

Extra information inside a tag (e.g., href in <a>).

Markup language to structure web pages.

Element indicating the type of content (e.g., <p> for a paragraph).

HTML

Tag

Attribute

Code editor

Application to write HTML (e.g., VS Code, Sublime Text).

Program that interprets HTML and displays the web.

Browser

Each HTML tag is a small piece that fits into the puzzle of a webpage.

HTML Page Structure

Every HTML page has a basic structure like this:

<!DOCTYPE html> <html> <head> <title> My First Web</title> </head> <body> <h1> Hello world! </h1> <p> This is my first website.</p> </body> </html>

12345678910

Function of tags

  • <h1> Main Title
  • <p> The paragraph tag is used to define a paragraph of text
  • <h1> to <h6> Hierarchical headings
  • <p> Paragraphs
  • <strong> Bold text
  • <em> Italic or emphasized text

Format the text

Insert links and images

Now let's discover the tags that allow us to create links and display images. <a href="URL"> Creates a link to another page. <a href="https://genially.com"> Visit Genially</a> <img src = "archivo" alt="texto"> Displays an image. <img src="logo.png" alt= "My site logo">

Test what you've learned so far

Additional information inside a tag that modifies its behavior. Example: href in a link defines the destination URL.

Part of an HTML page where all visible content for the user is placed, such as texts, images, links, or lists.

HTML code element that indicates how content should be displayed. Always goes between < >.Example: <p> for a paragraph.

Tag

Body

Attribute

What have we learned?

✅ What is HTML and what is it used for. ✅ What are tags, attributes, and elements. ✅ How a web page is structured. ✅ How to write text, links, and images with HTML.

You're now ready to start creating your own basic web pages!

<!DOCTYPE html> defines the document type<html> contains all content<head> includes invisible data like the title<body> contains the visible content

Links: tips and best practices

  • Use descriptive links: avoid “click here,” better “Discover more resources about HTML.”
    • You can open a link in a new tab with<a href="URL" target="_blank">Text</a>
  • You can link to sections of the same page using anchors<a href="#section1">Go to Section 1</a>