Want to create interactive content? It’s easy in Genially!
Introduction into HTML
Aiman Qureshi
Created on February 20, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
HTML
The foundation of all websites
Before we begin.. take a look at these questions and see if you can answer them. We will look at the answers at the end.
1. What does HTML stand for?2. What are the types of HTML and their purposes? 3. What are the 3 key parts for front-end web development? 4. Do you know any coding terms? 5. Can you name some HTML tags?
If you don't know the answers, not to worry! ;) We will go through the same questions again at the end of the lesson to see how much you have learned.
the 3 key parts to make a webpage on the frontend
HTML(structure)
Javascript (behaviour)
website
CSS(presentation)
Objectives
What we are covering....
- developer tools (Visual studio code)
- HTML coding terms and best practices
- semantic html tags: layout, text, forms, tables, interactive html
- Non-semantic HTML
THE IMPORTANCE OF HTML
Why is HTML important?
HTML or HyperText Markup Language is a key part of front-end development,It is needed to structure content on a website to be shown to the user on the client's side.
Key terms and practices
key terms and best practices
i.e. things to get the hang of!
Industry best Practices & key coding terms
Here's what a simple peice of code looks like <h1>Hello world!</h1>
- This whole line is an element (holds html content).
- The <> tags open and close an element - whats inside i.e. the text 'Hello world' is the content rendered on the webpage.
- Syntax = rules for writing code (like grammar)
- indentation = consistent spacing when writing code for readability
- nesting = an element inside another element
- casing = use lower case <p> Here im coding.</p>
- comments <!--!> = make it easier for you and others to understand your code without affecting your actual webpage.
- tip: intellesense automatically completes code for you and is useful for beginners
+ try it yourself
Developer tools
What are the tools we will use?
Throughout this module, you will use Visual studio code. It is a a popular, open-source code editor platform used by developers as it supports many programming languages. How to download VS Code? Here is a step-by-step:
In the extensions tab, download the 'live server' (for easier previewing while you code)
Go to the Visual Studio Website :
create a new folder (WebBasics)and inside create a file calledindex.html
Run the installer and follow set up instructions. Then open VS code.
Download for Windows/macOS/Linux (Windows for university computers)
https://code.visualstudio.com/download
What a HTML document looks like
Developer tools
HTML Document Structure
<!DOCTYPE html> at the top of the page tells the browser to use an updated version of HTML. the page is wrapped <html> (the wepage) which has 2 sections: <head> = everything not visible on the webpage. This contains information about the webpage (metadata), the title, scripts and links to stylesheets. <body> = it is supposed to contain everything visible on the page that will be displaed to the user files: all HTML files end in .HTML
There are two types of HTML; semantic and non-semantic.
Screen readers = assistive technology for people with visual impairments by reading aloud all the elements on the page.
What is it? Semantic HTML aims to show the meaning of content behind a webpage. it goes in the <body> section.
Why is it important? 1. Accessibility - screen readers can interpret the webpage better. note: You need to adhere to the WGAC standards by The World Wide Web Consortium (W3C) when creating a webpage. 2. SEO (search engine optimisation) - search engines can better understand what your website is about, thus making it more visible to those searching for relevent content. 3. the HTML is more structured, so its easier to read (for developers and yourself) note: Be aware of these website considerations to improve accessability and for your client, whether you're freelancing or working in an agency as a web developer.
Over the next few slides, we'll be looking some examples of different types of semantic html tags you might use !
SEMANTIC HTML
Here are some common HTML tags for layout
<footer>
<header>
<nav>
click on the boxes to reveal information!
<aside>
+ example
+ example
+ example
+ example
<main>
<section>
<article>
+ example
+ example
+ example
Visualising the html document structure layout on a webpage
SEMANTIC HTML
Here are some common text HTML tags for text
<ul> <ol> <li>
<p>
<h>
+ when to use
+when to use
+when to use
SEMANTIC HTML
HTML tags for forms and tables.
<form>
<table>
+ when to use
+when to use
SEMANTIC HTML
Here are some common interactive HTML, which also enhances the website's accessibility
<img>
<video>
<audio>
<a>
<button>
+ example
+ example
+ example
+ example
+ example
Elements contain attributes, in the opening tag, to provide additional details to the browser. The src attribute is commonly used in media elements.
<src>
What is it?
Non-Semantic HTML does not describe anything about the content they contain.
When is it used?
It's usually used for structure and when you want to focus on the layout. Avoid using non-semantic html when you do want to describe your content.
NON-SEMANTIC html
Here are some common non-semantic HTML elements, which are used in combination with CSS.
<span>
<div>
+ when to use
+ when to use
Here are the same questions from the beginning of the lesson.If you're unsure, revisit this PowerPoint.
1. What does HTML stand for?
Hypertext Markup Language
2. What are the types of HTML and their purposes?
Semantic HTML = meaning to content Non-semantic HTML = no meaning, used just for structure.
3. What are the 3 key parts for front-end web development?
HTML, CSS, JavaScript
4. Do you know any coding terms?
Syntax, tags, elements, document structure etc
<h> <p> <div> <button> <a> etc
5. Can you name some HTML tags?
<a>
<a> anchor element creates hyperlinks so you are able to go other websites. It can also allow you to create links to your internal pages in visual studio.
output:
example:
<section> <h2>Our most popular dish!</h2> <p>We offer a wide range of foods, our most popular being Bibimbap, made of rice, mixed vegestables and sesame oil. Its a must try! </p></section> this example uses <section> to describe most popular dish, which would likely be on the menu page.
When to use? Some examples are:
- opening / closing times
- organising data
output:
Example: <table border="1"> <tr> <th>Name</th> <th>Job</th> </tr> <tr> <td>Hayley</td> <td>Accountant</td> </tr> <tr> <td>Alex</td> <td>Cafe owner</td> </tr> </table>
<footer>
The footer of a webpage is at the bottom and contains things like the company logo, copyrights/authorship information, contact details, social media links etc.Again, this is for all the webpages on your website
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers. Example: <p>Lorem Ipsum</p>
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers. Example: <p>Lorem Ipsum</p>
example : <button type="submit" id="submitButton">Submit </button> This example is for a basic submit button. there are many uses for buttons on a webpage like e.g. a click button, download button, like button etc
output:
output:
example:
<main> <section> <h2>Our top picks!</h2> <p>Here were going to share our skincare!</p> </section> </main>
<nav>
navigation wraps links on your webpage to improve accessibility for screen readers and so users can access your content quickly.Best used in the header and footer. Not all links need to be contained in a <nav> element, only blocks of links.
<audio>
<audio> is when you want to put sound content on your webpage.
Cascading Style Sheets
- The styling of the (html) content on the webpage, which is good for UX (user experience)
- it includes: colours, buttons, icons, layout, responsiveness etc.
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers. Example: <p>Lorem Ipsum</p>
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers. Example: <p>Lorem Ipsum</p>
example : <div> <h2>This is a Div</h2> <p>I am a container. i take up the whole line</p> </div> You might use this for images or thumbnails or any similar content together. note: this has been styled (pink) so you can can clearly see how the div is a container. we will learn how to style HTML later on!
output:
When to use? Here are some general rules : <h1> the largest heading <h2> Subheadings / Chapters <h3> Sections <h4> Sub-sections <h5> smaller sub-sections <h6> small / specific headings
example : <h1>This is my webpage </h1> <h2>Chapter 1: My story </h2> <h3>My Childhood</h3>
output:
output:
example:
<footer> <p> My Website (2025). All rights reserved. </p></footer> this example contains a link for a home page. we will cover how to link things later on...
<img>
The <img> tag is to put an image on the webpage inside the <img> tag use alt (alternative text) to describe the image to the screen reader
<header>
A header goes at the top of the page. it usually contains the company logo and navigation links. This is used before the main content of your webpage and is generally translated across all pages for consistency.
Hyper-text markup language
- The actual content of the webpage
- it includes: pictures, text, tables etc
<table>
<table> creates a table with rows and columns.
inside a <table>: you can create a border<th> creates the table header <tr> creates a table row <td> table data creates a cell.
<p>
<P> is used for paragraphs of text. Margin (space) automacitally surrounds this, but you can use <hr> horizontal rule and <br> line break to create space around your elements
<h>
The <h> tag is used for headings / titles of a webpage.
output:
example:
<article> <h2>The latest on technology</h2><p>This is an article sharing all the upcoming tech releases in 2025</p></article> in this example, it is used for a news article
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers. Example: <p>Lorem Ipsum</p>
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers. Example: <p>Lorem Ipsum</p>
example : <audio controls> <source src="MySong.mp3" type="audio/mp3"> Your browser does not support the audio element. Please update your browser. </audio>
output (the audio) on the page:
<section>
A section of your webpage like chapters or themes. use this to divide up meaningful parts of your website.
output:
example:
<nav> <ul> <li><a href="#item1">Item 1</a></li> <li><a href="#item2">Item 2</a></li> <li><a href="#item3">Item 3</a</li></ul></nav> This contains anchor links - we'll go into further detail about this in the upcoming slides.
They all work alongside eachother to make a website
output:
example:
<header> <a href="#home">Home</a></li></header> this example contains a link for a home page. we will cover how to link things later on...
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers. Example: <p>Lorem Ipsum</p>
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers. Example: <p>Lorem Ipsum</p>
example : <video controls> <source src="video.mp4" type="video/mp4"> </video>
output (the video) on the page:
Javascript
- Javascript is a programming language that makes your pages interactive.
- it includes: dark mode, form validation etc.
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers. Example: <p>Lorem Ipsum</p>
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers. Example: <p>Lorem Ipsum</p>
example : <img src="logo.png" alt="verseoul company logo" width="200" height="200"> tip: you can additionally change the width and height to your liking
output (the image) on the page:
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers.
example : <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus. <br>fames turpis egestas. </p> <hr>
output :
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers. Example: <p>Lorem Ipsum</p>
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers. Example: <p>Lorem Ipsum</p>
example : <p>My favourite colour is <span>blue</span>.</p> note: the word blue has changed colour using CSS, which we will use soon!
output:
example : <form action="submit,php" method="post"> <label for="password">Password:</label> <input type="password" name="password" placeholder="Enter your password"> <button type="submit">Submit</button> </form>
When to use? examples include:
- Feedback form
- login credentials (username/ email and password)
- checkout
- checkboxes
output :
output:
example:
<h2>Our most popular dish!</h2> <p>We offer a wide range of foods, with our most popular being Bibimbap, made of rice, mixed vegetables, and sesame oil. It's a must-try! </p> <aside><h2>Save on your first purchase with us!</h2> <p>Use code: WELCOME25 </p> </aside>
this example is for a promotion on a website.
When to use? <ol> when order is important
- instructions
- glossary
- navigation menus
- making content more readable
- menu items
Example 2: ordered list <ol> <li>First, open the book</li> <li>Next, open the box</li></ol>
Example 1: unordered list <ul> <li>Brownies</li> <li>Cookies</li> <li>Eclaires</li></ul>
output:
output:
<video>
<video> is to put videos on your webpage.
Example:
output:
On your document write something!heres a guide
- inside the body section write something in the <h1> tags
- Run the code on the live server
- see the output
<input>
<form action"">
<input> is where the user is putting into the field. there can be many types like text, submit,password etc
The <form> tag creates a form on a webpage. It is where the data is being submitted.
<label>
<label> labels <input> to improve accessibility as users can understand what info to put in easily.
<main>
Where your main content goes. On a website, this would be an example of a part of a product recommendations page. its best practice to keep the <main> seperate from the header and the footer for SEO.
<span>
<span> is an in-line element that can change a specific portions of text. it is used in combination with CSS. its useful when you want to style or change something small, without affecting the code too much.
<article>
for specific / standalone content.
<div>
<div> division is like a box. it is a block element to help structure your page and works well with CSS. you can use nesting here (divs within divs). you can add attributes like: class to group related information together display: flex to create a flexbox
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers. Example: <p>Lorem Ipsum</p>
When to use? when you want to creat a paragraph / block of text (unlike with headings which are suited for short text). This is really useful for screen readers. Example: <p>Lorem Ipsum</p>
output:
example : In this example, it creates a link to an 'about page' in the same visual studio file. In your live browser, when you click on it, it will take you to that page.
<src>
To use an image / video / audio, you should save it in the same file as your html file. and write the name of it using the src attribute. for example:
<src> source is an attribute that indicates the location (URL) of external resources. it is used inside multiple media elements like <video>, <img>, <audio> to use an image / video / audio, you should save it in the same file as your html file. and write the name of it using the src attribute.
<button>
<button> creates a clickable button. you can have attributes in buttons:
- id = unique identifier for styling in css
- type = defines the type of button
- onclick = make something happen when you click it
- disabled = makes the button unclickable
<aside>
Indirectly related to the main article content of your page. E.g. Ads, side bars, glossaries etc
ordered list
<ul> <ol> <li>
<ol><li>Go to school </li> <li>Go on a walk</li> <li>catch up on reading</li></ol>
<ul> unordered lists are groups of lists. <ol> ordered lists, numbers the lists (sequential). <ol> and <ul> contain <li> an induvidual list item. Here, nesting can happen, when you put lists inside of lists (sublists).
un-ordered list
<ul><li> strawberries</li> <li>oranges</li> <li>grapes</li></ul>