What is HTML explained with examples

Is Html a programming language? It’s easy to get confused thinking of HTML as a programming language, but the fact is HTML is a Hypertext Markup Language. It creates electronic documents (web pages) displayed on the World Wide Web (WWW). For not being a programming language, it does not have the capability to create dynamic functionality. HTML pages can be viewed by anyone connected to the internet.

HTML files end with an extension of .html or .htm. You can view these files in any browser like Google Chrome and Mozilla firefox. The HTML pages consist of tags and elements.

To make the websites attractive and dynamic, we incorporate JavaScript and CSS into Html. HTML creates static webpages; JavaScript makes the webpages dynamic and interactive, CSS adds styles to change the appearance of webpages to make the webpages attractive and appealing to the human eye.

HTML

History of HTML

HTML is an acronym Hypertext Markup Language. Hypertext refers to hyperlinks that allow one to move around the web. How elements and tags are defined on an HTML page is referred to as the Markup Language.

HTML specifications have always been maintained by the Wide Web Consortium(W3C); it became an international standard in 2000.

HTML Versions

HTML 1.0

This was the first release of HTML in 1991, created by CERN scientist Tim Berners-Lee. His goal was internet-based hypertext systems that could allow the sharing and use of documents on different computers. HTML 1.0 had only 18 tags hence very limiting to the web development users. Most of its tags were based on Standard Generalized Markup Language(SGML). This first version supported inline images and text.

HTML 2.0

It was an addition of a few features from HTML 1.0, which was released in 1995. It supported a change in the background page, tables, forms with limited attributes, set an example, and option boxes.

HTML 3.0

With advancements in HTML, there was the introduction of mathematical equations. HTML 3.0 could allow the performing of complex mathematical on web pages. As many people were getting into HTML, there was a need to bring more abilities and tags to enhance sites’ look. Netscape came up with new attributes and proprietary tags for their Netscape Navigator browser. Still, it brought many problems since what could look good in Netscape browsers looked very bad in other browsers. This caused irritation and confusion of markup pioneers; hence to improve, Dave Raggett came to the rise of HTML 3.0, but it was very slow in implementation.

HTML 3.2

It came to rise after abandoning HTML 3.0, and more browser-specific tags were introduced. It became a standard at the time.

HTML 4.01

HTML 4.01 allowed external cascading stylesheet (CSS); most of its styling was separated from the actual HTML code. This version of HTML supported the cascading stylesheet. It had the code-named COUGAR. Some of the major changes introduced by HTML 4.0 included:

  • There was an extension in the document character set.
  • Usage of DTDs (document type definition).
  • Separation of the styling (CSS) from the actual HTML code.
  • Insertion of multimedia through <OBJECT> tag.

XHTML 1.0

XHTML- it’s the acronym for Extensible Markup Language. As the first document type of XHTML, it formed a good transition from HTML to XML. One major application of XML is in android application development. Android applications use XML to design and develop their interfaces.  With XML, you can define your own tags according to your needs. The two main purposes of XHTML included:

  • Creating Stricker standards for HTML web pages and, in return, increasing compatibilities between browsers.
  • XHTML can be used on various devices without performing more changes.

Syntax

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

HTML 5

HTML 5 applies HTML 4 to the basic rules but adds new elements, tags, and attributes. Some of these new features in HTML5 include.

Semantic Elements
Semantic
  • Nav Element – This element holds the navigation bar. It can either be a vertical or horizontal navigational bar.
  • Header Element – The header element can either hold the title, menu, or logo. It’s always at the top of a web page.
  • Side Area – includes a sidebar that can hold recent updates or show a summary of recent posts.
  • Section Element – It holds the actual content of the web page. It occupies more space than others. The section element is similar to the article element.
  • Footer Element – It can be used to hold information such as; copyright information, social media links, and a bottom menu. It’s always at the bottom of the HTML page.

These elements try to follow the rule of third in dividing the web pages. Let’s take a look at an example of a rule of a third webpage using the HTML 5 semantic elements.

<!DOCTYPE html>
<html>
<head>
	<title>layout design</title>
	
	<style type="text/css">
		body{
	background: lightblue;
	margin: 0px auto;

}
#header{
	background: black;
	color: white;
	text-align: center;
	padding:5px;
	height: 100px;
}
#nav{
	line-height:1.6em;
	background: lightgrey;
	width: 200px;
	height: 810px;
	float: left;
	padding:0px;
	margin: 0;
	color: blue;
}
#nav ul li{
	list-style-type: none;
}
#section{
	width: 410px;
	float: left;
	padding: 10px;
	background: darkgrey;
	height: 810px;
	margin: 0;
	color: blue;
}
#aside{
	line-height: 300px;
	background: lightgrey;
     width: 150px;
	height: 810px;
	float: left;
	padding:0px;
	margin: 0;
	color: blue;
}
#footer{
	background: black;
	color: white;
	clear: both; 
	text-align: center;
	margin: 0;
	width: 100%;
	height: 100px;
	color: #ffffff;

}

	</style>
</head>
<body>
<div id="header">
	<h1>This the header</h1>
</div>
<div id="nav">
	<p>This a vertical navigational bar</p>
<ul>
	<li>home</li>
	<li>about</li>
	<li>help</li>
	<li>contact</li>
</ul>
</div>
<div id="section">
	<p align="center" style="padding-top: 200px;">This is the section</p>
</div>
<div  id="aside">
	<p>This the aside navbar</p>
</div>
<div id="footer">
  <p>This the footer</p>
</div>
</body>
</html>
Microdata

Microdata allows one to create your own vocabularies beyond HTML5 and extend webpages with custom semantics.

Drag and Drop

With HTML 5, it’s now possible to drag and drop items from one location on a web page to another location on the same web page.

Audio and video

Its now possible to embed audios and videos on webpages without third party plugins.

Canvas

The <canvas> tag allows the drawing of graphics on a web page with the help of JavaScript.
Example:

<canvas id="CanvasExample" width="250″ height="150″></canvas>
WebSocket

HTML 5 uses WebSockets to allow two-way communication between web pages.  With this technology, you can send data from browser to server.

!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         function WebSocketTest() {
    
               // connecting to a websokcet
               var socket = new WebSocket("socket://localhost:9998/echo");
				
               socket.onopen = function() {
                  
                  // Web Socket is connected, send data using send()
                  socket.send("Message to send");
                  alert("Message is sent...");
               };
               socket.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
               socket.onclose = function() { 
                  
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            } 
         }
      </script>
		
   </head>
   
   <body>
      <p> This the javascript link to the web sockets</p>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>
Form 2.0

There is an introduction of new attributes in the <input> tag.
Example; Date Time, date, month, week, time, number, range, email, URL.
Let’s take a look at an example of a form with these HTML 5 attributes.

<!DOCTYPE html>
<html>
<head>
	<title>Form</title>
	<style type="text/css">
		body{
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<form>
		<fieldset>
			<legend>Date Time, date, month, week, time,etc.</legend>
	<label for="myemail">Enter Email Address:</label><br>
    <input type="email" required><br><br>

    <label >Enter Month:</label><br>
    <input type="month" id="myemail" required><br><br>
	
	<label>Enter Date:</label><br>
    <input type="date" min="2020-02-02" max="2021-02-02" required><br><br>
	
	<label>Enter Week :</label><br>
    <input type="week"  required><br><br>
	

	<label >Enter time :</label><br>
    <input type="time"  required><br><br>


	<label>Enter Date time :</label><br>
    <input type="datetime-local" required><br><br>
	</form>
	</fieldset>

</body>
</html>

Structure of HTML

<!DOCTYPE html>
<html>
<head>
	<title>The title of the webpage goes here</title>
</head>
<body>
   The content of the webpage goes here
</body>
</html>

Html documents are composed of 5 parts, these are:

The DOCTYPE

This the first line containing HTML version Information. It communicates the version of HTML the webpage is written into the web browser.
Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

The <html> element

It tells the browser which language the page content is written in.

Example:

<html xmlns="http://w3.org/199/xhtml" xml:lang ="en" lang="en">

The head

It’s a declarative header section that has metadata not visible to the user. It contains the meta element, title elements, and also links to external sources are placed here.
Example:

<head>
	<title>Title of page goes here</title>

	<meta  http-equiv="content-type" content="text/html" charset="utf-8">
	
	<script type="text/javascript">Internal Javascript goes here</script>
   <script src="javascript.js"> External Javascript</script>

	<style type="text/css">Internal Css goes here</style>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
	
</head>

The meta element

The meta provides additional information about the page and search engines such as; page description, keywords, and the author(s) of a web document.
Example:

<meta  http-equiv="content-type" content="text/html" charset="utf-8">

The <title > element

This a unique title of the html webpage.

<title>Title of page goes here</title>

The <body> element

The body element contains the actual document content such as headings, paragraphs, images, links, tables, etc.

<body>
	<p>this is a paragraph</p>
	<table>
		<tr>
			<td>row 1</td>
		</tr>
		<tr>
			<td>row 2</td>
		</tr>
	</table>
	<ol>
		<li>list 1</li>
		<li>list 2</li>
	</ol>
	<ul>
		<li>list me</li>
		<li>list me</li>
	</ul>
	<img src="img.png">
	<hr>
	<h1>heading 1</h1>
	<h2>heading 2</h2>
	<h3>heading 3</h3>
	<h4>heading 4</h4>
	<h5>heading 5</h5>
	<h6>heading 6</h6>
</body>

Features of HTML

1) It’s easy to learn and use. Html resources are widely available in the internet. Its not a programming language hence it’s easy to learn.

2) HTML pages can be loaded on any platform such as Linux, Ubuntu, windows, Macintosh etc hence it’s a platform-independent.

3) You can incorporate HTML with other languages such as CSS and JavaScript making the web pages interactive, dynamic and presentable.

4) Application of Graphics, Videos, and Sound to the web pages makes HTML more attractive and interactive.

5) HTML is a case-insensitive, one can use either lower-case or uppercase tags.

Creating your first HTML

Its quite easy to design web pages with HTML, to create your first html document.

  • Right click on the location you need your document created.
  • Choose on new text document but change the the file extension from .txt to .html

There are several HTML editors one can use, but I can highly recommend one of the following: sublime text, brackets, Visual studio code, Micro Dreamweaver, or notepad ++. To view the HTML document created, you can use any browser to load, such as Firefox, chrome, brave, Microsoft edge, etc.

Conclusion

In this post, we’ve learned what HTML is, its history, structure, and features. HTML forms the basic of web development every web developer should know. I hope this article answers your questions about what HTML is. In case of any question, leave a comment in the comment section.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *