In the previous sessions, we said that the main skeleton of a website and web app is written in HTML and decorated using CSS, then the back end is written using programming languages such as JS.
HTML stands for HyperText Markup Language and it is the standard markup language for creating web pages. It can describes the structure and content of a web page using elements, which are tags that tell the browser how to display the text, images, links, tables, lists, etc.
HTML is easy to learn and you can create your own website with it. In this article, we will show you how to code a simple HTML page with a general explanation of the concepts of this language from the beginning along with the code. We will also briefly explain its function in the development of progressive web applications.
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here…
The HTML element is everything from the start tag to the end tag:
<h1> My First Heading
<p> My first paragraph.
Some HTML elements have no content (like the
<br> element). These elements are called empty elements. Empty elements do not have an end tag!
HTML Page Structure
A typical HTML page has the following structure:
<title> Page Title
<!-- Page content goes here -->
Let’s explain what each part means:
<!DOCTYPE html>declaration defines that this document is an HTML5 document. It must be the first line of code in your HTML file.
<html>element is the root element of an HTML page. It contains all other elements inside it.
<head>element contains meta information about the HTML page, such as the title, keywords, description, style sheets, scripts, etc.
<title>element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab).
<body>element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Now that we have learned the basic structure of an HTML page, let’s see an example of how to code a simple HTML page with some common elements.
<title> My First Web Page
<h1> Welcome to My Website
<p> This is a paragraph of text.
<p> This is another paragraph of text.
<img src="image.jpg" alt="My Image" width="300" height="200">
<a href="https://www.bing.com">Visit Bing
<li> Item 1
<li> Item 2
<li> Item 3
Source on GitHub
Let’s explain what each element does:
<h1>element defines a large heading. You can use
<h6>elements for smaller headings.
<p>element defines a paragraph of text. You can use
<br>elements to create line breaks within a paragraph.
<img>element defines an image. You need to specify the source (src) attribute with the URL or path of the image file. You can also use the alt attribute to provide an alternative text for the image in case it cannot be displayed. You can also use the width and height attributes to specify the size of the image in pixels.
<a>element defines a hyperlink. You need to specify the href attribute with the URL or path of the destination page. You can also use the target attribute to specify how to open the link (such as _blank for a new tab or window).
<ul>element defines an unordered list. You need to use
<li>elements inside it to define each list item.
HTML Function in Progressive Web Applications
HTML is the foundation of any web page or web app, including PWAs. HTML defines the structure and content of a web page using elements, which are tags that tell the browser how to display the text, images, links, tables, lists, etc.
HTML is also used to provide some metadata and configuration information for a PWA. For example:
<link rel="manifest" href="manifest.json">element links to a manifest file that contains information about the PWA, such as its name, icons, theme color, orientation, etc. This file is used by browsers and app stores to display and install the PWA on devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">element sets the viewport of the web page to match the device’s screen size and scale. This ensures that the PWA is responsive and adapts to different screen sizes and orientations.
Have you any questions? Ask it on our Reddit.