HTML, which stands for HyperText Markup Language, is the fundamental language used for creating web content. Stylesheets are responsible for instructing web pages on the presentation of various elements such as text, images, videos, links, and other content. Essentially, HTML forms the basis for designing any type of content on the internet.
What is HyperText Markup Language?
HyperText refers to text containing links within. A hypertext is a text with embedded links. Clicking on a link that directs you to a different webpage is an interaction with a hypertext. It serves as a method to connect multiple web pages or HTML documents together.
Markup refers to the use of tags within text to inform the browser about the display of various elements. It plays a crucial role in structuring content, arranging it, and providing additional information.
Programming Language: In the context of web development, language pertains to a syntax for creating web content that can be interpreted by computers and displayed in a web browser.
Important Terms
A webpage is a file typically authored in HTML and rendered by a web browser. It can be accessed by entering a URL in the browser's address bar. Webpages can be classified as either static or dynamic. Static webpages can be crafted solely using HTML.
A website is a platform that connects a set of related web pages within a unified domain. Typically, it includes a main landing page, a section detailing the organization, a contact form, and other various sections. These pages are interlinked through hyperlinks to provide seamless navigation for users.
Internet Browser: Internet browsers such as Chrome, Firefox, and Safari are software applications designed to collect, interpret, and exhibit web pages. They interpret HTML, CSS, and JavaScript instructions to render web content in a user-friendly interface.
To summarize, HTML serves as a markup language utilized to craft visually appealing web pages through styling, resulting in a pleasant appearance when viewed on a web browser. An HTML document consists of numerous HTML tags, each housing distinct content.
Structure of an HTML Document
In HTML, content is structured using elements and tags. Below is a simple illustration of this concept in an HTML document:
Example
<!DOCTYPE html>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
Description of HTML Example
The structure of the example shown above can be understood as follows:
| Element | Description |
|---|---|
<!DOCTYPE html> |
Specifies the document type and informs the browser about the HTML version in use. |
<html> |
Indicates to the browser that the content is an HTML document. Serves as a container for all other HTML elements except <!DOCTYPE>. |
<head> |
The first element inside <html>. Holds metadata and information about the document. Must be closed before <body> begins. |
<title> |
Specifies the title of the HTML page, displayed at the top of the browser tab. Must be inside <head>. |
<body> |
Contains the visible content of the webpage for the user. Houses the primary content of the HTML file. |
<h1> |
Defines the primary heading of the webpage. |
<p> |
Defines a paragraph section of the web page. |
HTML Tags, Elements, and Attributes
Tags
Tags are keywords surrounded by angle brackets (< and >).
Examples: <p>, <h1>, <a>, <div>
> Note: Tags like <br> and <hr> are considered empty elements as they have no closing tag.
Elements
An element consists of an opening tag, content, and a closing tag.
Example:
<p>This is a paragraph</p>
Attributes
Attributes modify the functionality and appearance of a tag by adding extra characteristics like behavior and styling.
Example:
<a href="https://logic-practice.com">Visit Site</a>
In this case, the attribute href contains the value https://logic-practice.com`.
Empty Elements
Certain elements such as <img> and <meta> do not require a closing tag as they are designed without the need to enclose any content.
Examples:
<img src="image.jpg" alt="Example">
<br>
<hr>
<meta charset="UTF-8">
Common HTML Elements
| Element | Description |
|---|---|
<h1> to <h6> |
Headings from most important (<h1>) to least (<h6>). Helps with SEO and accessibility. |
<p> |
Paragraph element used for blocks of text. |
<a> |
The anchor tag is used for hyperlinks. |
<img> |
Embeds images. |
<ul>, <ol>, <li> |
Lists: unordered, ordered, and list items. |
<div> |
Block-level container for grouping elements. |
<span> |
Inline container for styling text. |
<table> |
Organizes data in rows and columns. |
<form> |
Creates interactive forms for user input. |
<input> |
Creates input fields in forms. |
<button> |
Creates clickable buttons. |
Semantic HTML
Nowadays, HTML5 uses tags called <header>, <footer>, <section>, <article> and <nav> to help explain the page's structure. They help search engines and devices for the visually impaired to read and understand your web content.
Features of HTML
- It is a very easy and simple language. It can be easily understood and modified.
- It is very easy to make an effective presentation with HTML because it has a lot of formatting tags.
- It is a markup language, so it provides a flexible way to design web pages along with the text.
- It facilitates programmers in adding a link to the web pages (by html anchor tag), so it enhances the user's interest in browsing.
- It is platform-independent because it can be displayed on any platform, such as Windows , Linux , Macintosh, etc.
- It facilitates the programmer in adding graphics, videos, and sound to the web pages, which makes them more attractive and interactive.
- HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-case.
Note: It is recommended to write all tags in lower-case for consistency, readability, etc.
Brief History of HTML
During the latter part of the 1980s, Tim Berners-Lee, a physicist working as a contractor at CERN, put forward a concept for CERN researchers. He penned a memorandum in 1989 suggesting a hypertext system based on the internet.
Tim Berners-Lee is famously recognized as the originator of HTML, often referred to as the father of HTML. The initial documentation outlining HTML, titled "HTML Tags," was introduced by Tim towards the end of 1991. In this tutorial, we will delve into the study of the most recent iteration of HTML known as HTML5.
HTML Versions
Numerous iterations of HTML have been introduced over the course of its development. Below is a brief overview of the primary versions:
HTML 1.0, the inaugural iteration of HTML, was version 1.0, marking the fundamental form of the HTML language. It was publicly released in the year 1991.
HTML 2.0, released in 1995, followed the initial version and served as the standard language for creating websites. This version introduced enhancements like form-based file upload functionality and various form elements like text boxes and option buttons.
The HTML 3.2 release was introduced by W3C in the beginning of 1997. This iteration allowed for the creation of tables and offered additional features for form elements. It also had the ability to display intricate mathematical formulas on web pages. Until January 1997, it was the established standard for all browsers. Presently, it is widely compatible with the majority of browsers available.
The HTML version 4.01, which was made available in December 1999, represents a highly reliable iteration of the HTML markup language. It stands as the present authoritative specification, offering enhanced backing for stylesheets (CSS) and the capability to incorporate scripts for a wide range of multimedia components.
HTML5, the latest iteration of HyperText Markup Language, was initially introduced in January 2008. Two prominent organizations, namely W3C (World Wide Web Consortium) and WHATWG (Web Hypertext Application Technology Working Group), are actively engaged in the evolution of HTML5, which is currently a work in progress.
Summary of HTML versions
| Version | Year | Highlights |
|---|---|---|
| HTML 1.0 | 1991 | The first version is simple and straightforward. |
| HTML 2.0 | 1995 | Introduced features such as checkboxes and buttons to the page. |
| HTML 3.2 | 1997 | Tables, scripting features and basic style tools have been included. |
| HTML 4.01 | 1999 | More robust, improved ability to support stylesheets (CSS) and scripting. |
| HTML5 | 2008 till present | Features like semantic elements, the ability to play audio and video, and mobile compatibility in current tags were introduced. The technologies responsible are W3C and WHATWG. |
Advantages of HTML
- Works in all modern web browsers.
- Supported by many tools and editors.
- A strong foundation for web development .
- The key to the organization of any web project.
- Helps search engines better index and rank web pages.
- Can only create static pages; dynamic functionality needs JavaScript or server-side languages.
- With plenty of HTML files, it becomes difficult to handle big projects.
- A few small mistakes can cause pages to take a long time to load.
Disadvantages of HTML
To experiment with and run this sample code, you can either click on the provided link or paste it into another online compiler of your choice.
Conclusion
Every webpage requires HTML to function. HTML is essential for structuring and organizing content on websites. While HTML is straightforward on its own, its capabilities expand significantly when enhanced with CSS and JavaScript. Those involved in web design, development, or digital communication should prioritize learning HTML as it plays a fundamental role in the advancement of the web.
Whether you're creating a personal blog, a corporate website, or a comprehensive web application, HTML serves as the foundation for all web development projects.