Overview
HTML (HyperText Markup Language) is a standard markup language used to create and structure web pages and web applications. It consists of a series of elements, each marked up with tags, that define the structure and content of a document.
Here’s a basic overview of HTML:
- Markup: HTML markup consists of several basic components, including so-called tags (and their attributes), character-based data types, character references, and entity references. HTML tags mostly come in pairs, like and , although some represent empty elements and are just as odd, like for example . The first tag of such a pair is the start tag and the second is the end tag (also called an opening and closing tag).
Here is an example of the classic “Hello, world!” program.
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<div>
<p>Hello world!</p>
</div>
</body>
</html>- Elements: HTML documents are built using elements, which are defined by tags enclosed in angle brackets (< >). Elements typically consist of an opening, body, and closing tag. For example:
<head>
<title>The Title</title>
<link rel="stylesheet" href="stylebyjimbowales.css"> <!-- Imports Stylesheets -->
</head>- Headings: HTML headings are defined by al tags, with H1 the highest (or most important) and H6 the lowest.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>The effects are as follows:
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
- Paragraphs:
<p>Paragraph 1</p> <p>Paragraph 2</p>- Line breaks: <br>. The difference between <br> and <p> between is that <br> breaks a line without changing the semantic structure of the page and <p> divides the page into sections. <br> element is an empty element in the sense that although it can have attributes, it cannot have any content and it cannot have a closing tag.
<p> paragraph with <br> line breaks</p>- Inputs: The user can provide inputs in several possible ways, such as:
<input type="text"> <!-- for text input -->
<input type="file"> <!-- for uploading files -->
<input type="checkbox"> <!-- for checkboxes -->- Attributes: HTML elements can have attributes that provide additional information about the element. Attributes are added to the opening tag and are typically in name-value pairs. For example
<a href="https://www.example.com">Click here</a>- Structure: HTML documents have a hierarchical structure defined by nested elements. The root element is typically
<html>, which contains two main sections:<head>(for meta-information about the document) and<body>(for the content visible to users). - Common Elements: HTML provides a wide range of elements for structuring content, including headings (
<h1>to<h6>), paragraphs (<p>), lists (<ul>,<ol>,<li>), links (<a>), images (<img>), tables (<table>,<tr>,<td>), forms (<form>,<input>,<button>), and more. - Comments: Comments help you understand the listings and are not visible on the web page. Comments in HTML are written between
<!--and-->and are used to add notes or annotations to the code for developers to read, but they are not displayed in the browser
<!-- This is a comment -->- Semantic HTML: Semantic HTML refers to using elements that convey the meaning or purpose of the content, rather than just its appearance. This improves accessibility and search engine optimization. Examples include
<header>,<nav>,<article>,<section>,<footer>, etc.
HTML forms the foundation of web development, providing the structure and content for web pages. It is often complemented by CSS for styling and layout, and JavaScript for interactivity and dynamic behavior. Together, these technologies enable the creation of rich, interactive, and responsive websites and web applications.
History of HTML
The history of HTML (Hypertext Markup Language) dates back to the early days of the World Wide Web. Here’s a brief overview:
- Early Origins (1989-1991): The concept of hypertext, which allows documents to be linked together via hyperlinks, was first proposed by Tim Berners-Lee in 1989 while working at CERN (European Organization for Nuclear Research). In 1990, Berners-Lee developed the first web browser/editor called “WorldWideWeb” (later renamed “Nexus”) and the first web server.
- HTML 1.0 (1991): Tim Berners-Lee created the first version of HTML, known as HTML 1.0 or simply HTML, to define the structure of web documents. HTML 1.0 included basic elements such as headings, paragraphs, lists, and hypertext links.
- HTML 2.0 (1995): HTML 2.0 was published as an Internet Engineering Task Force (IETF) RFC in 1995. It introduced new features such as forms, tables, and image embedding.
- HTML 3.2 (1997): HTML 3.2 was the first standardized version of HTML developed by the World Wide Web Consortium (W3C). It introduced support for features like tables, forms, and applets, and it formed the basis for web development during the mid-to-late 1990s.
- HTML 4.01 (1999): HTML 4.01 was the next major version of HTML, introducing improvements in terms of accessibility, scripting, and multimedia support. It provided a more standardized and structured approach to web development.
- XHTML (2000s): XHTML (Extensible Hypertext Markup Language) emerged in the early 2000s as an XML-based version of HTML. It aimed to provide stricter syntax rules and better compatibility with XML-based technologies. XHTML 1.0 and XHTML 1.1 were notable versions during this period.
- HTML5 (2008-Present): HTML5 development began in 2004 with the goal of modernizing HTML and adding new features to support multimedia, graphics, and interactivity. HTML5 introduced semantic elements, audio and video elements, canvas for drawing graphics, local storage, geolocation, and more. It was published as a W3C Recommendation in 2014.
Throughout its history, HTML has evolved to meet the changing needs of web development, from simple text-based documents to multimedia-rich and interactive web applications. The development of HTML continues with ongoing updates and refinements to support emerging technologies and best practices in web development.
Discover more from Online Easy Tutorials
Subscribe to get the latest posts sent to your email.
