Introducing HyperText Markup Language (HTML)

Objective

After completing this lesson, you will be able to describe the significance of HTML for structuring web pages

HTML

Introduction

HyperText Markup Language (HTML) was developed in 1990 by web founder, Tim Berners-Lee.

The following video provides a short introduction to HTML.

HTML has come a long way from how the first Web page looked like and how Web pages look today.

This was the first web page.

In recent years, internet consumption has shifted away from desktop computers to mobile devices, which can be used while traveling as well as sitting on the couch at home.

This is a web page from 2023.

As you can observe in the figure, a lot has changed over the years.

HTML5 Advantages

HTML5 is a major upgrade from its predecessor, HTML4, and boasts various improvements and new features. These include better form handling, new semantic tags facilitating structured and accessible web pages, audio and video playback support, and greater mobile device compatibility.

JavaScript is cross-platform, implying that it is compatible with a variety of devices such as tablets, smartphones, and notebooks. As long as your browser supports HTML5, it should function without any issues.

The following is a set of some of the most prominent features introduced in HTML5:

  1. Semantic tags: Semantically meaningful pages can be created with the help of several new tags that HTML5 introduced.

  2. Improved form handling: The creation of user-friendly and accessible forms has been made more convenient with the advent of HTML5 and its novel input types and attributes.

  3. Audio and video support: Incorporating audio and video media into web pages has become simpler thanks to HTML5's inbuilt support. No external plugins or third-party applications are required.

  4. Canvas: Using JavaScript, developers can create dynamic graphics and animations with the <canvas> element that is included in HTML5

  5. Local storage: Developers can now utilize HTML5's localStorage and sessionStorage APIs for improved performance and offline access by storing data on the client-side browser.

  6. Geolocation: Access to the user's location is one of the key provisions of HTML5, and this feature enables websites to offer services based on the user's location.

  7. Web workers: HTML5 introduced the Web Worker API, which allows developers to run scripts in the background without blocking the main user interface thread.

  8. Web sockets: HTML5 includes support for WebSockets, which provide a full-duplex communication channel between the client and server, allowing for real-time data transfer.

The beauty of HTML5 lies in its ability to perform virtually any function without relying on extra software, such as browser plugins. Whether you're looking to animate, create apps, stream music or movies, or even build intricate web applications, HTML5 can handle it all straight from your browser.

Development Environment

To develop HTML, you need a text editor or an integrated development environment (IDE) that allows you to create, edit, and save HTML files.

Here are some tools that are commonly used by web developers for developing HTML:

  1. Text Editors: For producing HTML, various text editors such as VS Code, Atom, Notepad, Sublime Text, and more are available.

  2. Integrated development environments (IDEs): More advanced and dynamic IDEs, such as NetBeans, Visual Studio, Eclipse, and similar tools offer developers improved productivity through the use of features such as advanced editing, debugging capabilities, and code completion.

  3. Web Browsers: Web browsers such as Chrome, Firefox, Safari, Edge, and others are useful for testing HTML files and checking how they are displayed in different browsers.

  4. HTML Validators: Safari, Firefox, Edge, Chrome, and other web browsers offer the convenience of testing and checking HTML files in various browser displays.

  5. CSS Preprocessors: Efficient and maintainable CSS code can be written using CSS preprocessors such as Stylus, Less, and Sass.

  6. Version Control Systems: HTML files can be managed and collaborated on by developers using various version control systems, such as Git and SVN.

The following video demonstrates how to install the development environment on your computer. 

For developing HTML, the necessary tools rely on personal preference and individual requirements. Creating and testing HTML files only require a text editor, web browser, and an HTML validator. However, if you want more elaborate features, such as code completion, collaboration tools, and debugging, then an IDE and version control system could be of benefit.

Comments in HTML Documents

HTML Comments

HTML comments are another great trick for adding notes or annotations to your code that are not displayed on the page. They offer developers the ability to clarify their code or temporarily take out certain sections without deleting them. Because HTML comments can be inserted anywhere, you have a lot of flexibility in how you use them.

To create an HTML comment, you can use the following syntax:

<!-- your comment here -->

Anything you write between the <!-- and --> marks will be handled as a comment and will not be displayed on the web page.

Refer to the following code snippet.

Code Snippet
1234567891011121314
<!DOCTYPE html>
<html>
  <!-- This is a single-line comment  -->
<head>
  <title>My HTML5 Document</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>Welcome to my HTML5 Document!</h1>
  <p>This is a paragraph of text in my document.</p>
</body>
</html>

As you can observe in the figure, the comment is not displayed in the output.

In HTML, multi-line comments are created by enclosing the comment in <!-- and --> tags, which are used to delimit the comment. Any text between these tags is considered a comment and is ignored by the web browser when rendering the page.

Refer to the following code snippet.

Code Snippet
123456789
<!--
This is a multi-line comment
that spans multiple lines of code.
It can be used to provide documentation,
disable sections of code during development,
or for any other purpose where commenting is useful.
-->

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn