Buraga, R.L.
Learning Module in Integrative Programming and Technologies
Module 2
Introduction to
HTML5
Buraga, R.L. Learning Module in Integrative Programming and Technologies
Learning Outcomes:
At the end of the lesson, you are expected to:
Explain the key features and improvements of HTML5.
Create a basic web page using HTML5, including the use
of semantic elements
Learning Content
HTML5 is the fifth version of HTML, a markup language used by
web browsers to visualize code. It features several
improvements in website capabilities, web content
development, and more. The HTML Living Standard, maintained
by the Web Hypertext Application Technology Working Group
(WHATWG) (Ashtari, 2022)
HTML5 features include markup and scripting elements, as well
as application programming interfaces (APIs) for
functionalities such as adding video and audio on a page,
local data storage, offline operations, and location data
usage.
With HTML5 addressing standard web development functions, dev
teams don’t need to create functionality from scratch for
every application and can instead rely on built-in browser
capabilities (Ashtari, 2022).
HTML 4.01 Strict, the version without presentation-based
elements and other deprecated attributes, served as the basis
for HTML5. This has led to most HTML5 being created using the
same browser-compatible elements used for years prior.
It has also introduced many new elements and global
attributes and made many deprecated attributes and elements
from HTML 4.01 obsolete. A key feature of HTML5 is the
inclusion of a standard protocol for handling legacy and
malformed markup by browsers.
Buraga, R.L. Learning Module in Integrative Programming and Technologies
HTML5.2, an upgrade to the core HTML5 specification providing
the structure of webpages, is now released by the World Wide
Web Consortium (W3C) and includes enhancements for security
and commerce (Krill, 2017)
Steps to Create a First HTML5 Program
1. Open a Text Editor like Notepad++ (Windows) or TextEdit
(Mac) or you may use code editors like Visual Studio
Code, Sublime Text, or Atom.
2. Create a New File.
3. Type the following basic HTML5 structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML5 Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML5 page.
</p>
</body>
</html>
4. Save your file with a .html extension, for example,
hello.html.
5. Open the file in a web browser to view the output.
Navigate to the location where you saved the file,
right-click on it, and select "Open with" followed by
your preferred web browser (Chrome, Firefox, Edge,
etc.).
6. The browser will display your webpage with the heading
"Hello, World!" and a paragraph below it.
Sample Output
Buraga, R.L. Learning Module in Integrative Programming and Technologies
Understanding the Fundamentals of HTML Code
<!DOCTYPE html>
This defines the document type and version as
HTML5. It tells the web browser that the document
is an HTML5 file.
<html lang="en">
This is the root element of the HTML document. The
lang="en" attribute specifies the language of the
document as English.
<head>
This element contains meta-information about the
HTML document, such as the character set, title,
and viewport settings.
<meta charset="UTF-8">
This meta tag specifies the character encoding for
the document. UTF-8 is a widely used character
encoding that supports almost all characters from
different languages.
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
This meta tag ensures the page is responsive by
setting the viewport to the device's width and the
initial zoom level to 1.0. It helps in displaying
the page correctly on different devices,
especially mobile phones.
<title>My First HTML5 Page</title>
The <title> element sets the title of the webpage,
which appears on the browser's tab and when
bookmarked.
Buraga, R.L. Learning Module in Integrative Programming and Technologies
<body>
This element contains the content of the HTML
document that will be displayed in the web
browser.
<h1>Hello, World!</h1>
This is a heading element. <h1> is the largest
heading size in HTML, and it displays the text
"Hello, World!" prominently on the page.
<p>This is my first HTML5 page.</p>
The <p> element defines a paragraph, which
contains the text "This is my first HTML5 page.
Assessment Task 2 – Introduction to HTML5
a. What are some key enhancements made in HTML5.2,
and why are they important for security and
commerce
Rubrics for Assessment Task (30 points):
Criteria Points Earned
Thoroughness (10)
Clarity (10)
Accuracy (10)
References:
1. Krill, P.2017. InfoWorld. What’s new in HTML5.2.
Retrieved from
https://www.infoworld.com/article/2260969/whats-new-in-
html52.html
2. Ashtari, H. 2022.Spiceworks. What Is HTML5?
Meaning, Elements, and Benefits. Retrieved from
https://www.spiceworks.com/tech/tech-general/articles/wh
at-is-html-five/
