What is HTML? (Live Playground)
HTML, or HyperText Markup Language, is a markup language used to create and structure web pages. It is the foundation for every website, as it defines the layout, text, images, and other elements on a page.
Why Use HTML?
HTML is essential for web development because it provides a standard way to structure content and create the layout for web pages. By using HTML, developers can create websites that are accessible on various devices and browsers.
Creating an HTML Document
An HTML document starts with a
<!DOCTYPE> declaration, which specifies the version of HTML being used. The
<html> element is the root element, containing the entire HTML document. The
<body> elements separate the metadata from the actual content.
Here is a simple example of an HTML document:
<title>My First Web Page</title>
<h1>Welcome to My Web Page</h1>
<p>This is a simple HTML document.</p>
In this example:
<!DOCTYPE html>declares that this document uses HTML5.
<html>is the root element, containing the entire document.
<head>holds metadata, like the title of the page displayed in the browser's title bar or tab.
<title>sets the title of the web page.
<body>contains the actual content, including text, images, and other elements.
HTML Elements and Tags
HTML elements are the building blocks of an HTML document. Each element is defined by an opening tag and a closing tag, with the content enclosed between them.
For example, the
<p> tag defines a paragraph:
<p>This is a paragraph of text.</p>
Some HTML elements, like the
<img> element, do not have a closing tag. Instead, they use a single self-closing tag:
<img src="image.jpg" alt="An example image" />
Attributes in HTML
Attributes provide additional information about an element. They are included in the opening tag and consist of a name and a value.
For example, the
href attribute in the
<a> element specifies the destination URL:
<a href="https://example.com">Visit our website</a>
HTML vs. Other Markup Languages
HTML, or HyperText Markup Language, is a widely used markup language for creating web pages. However, it is not the only markup language available. We will explore the differences between HTML and other markup languages, such as XML and SGML, and understand the unique features and use cases for each.
HTML: The Backbone of Web Development
Example of HTML code:
<p>This is an example of HTML code.</p>
SGML: The Parent of HTML
SGML, or Standard Generalized Markup Language, is an older markup language that was developed in the 1960s for document management systems. It is a highly flexible and extensible language that allows users to define their own elements, attributes, and document structures. HTML was originally based on SGML, inheriting its syntax and some features.
SGML is not commonly used for web development and is mostly employed in large-scale documentation systems and electronic publishing.
Example of SGML code:
<!DOCTYPE example SYSTEM "example.dtd">
<para>This is an example of SGML code.</para>
XML: A Markup Language for Data
XML, or Extensible Markup Language, is another markup language derived from SGML. Unlike HTML, which focuses on the presentation of web content, XML is designed to store and transport data in a structured and human-readable format. XML is highly extensible and allows users to define their own elements and attributes.
XML is often used for data exchange between applications, APIs, and configuration files.
Example of XML code:
<?xml version="1.0" encoding="UTF-8"?>
<para>This is an example of XML code.</para>
Key Differences Between HTML, SGML, and XML
Purpose: HTML is used for structuring and presenting web content, while XML is designed for data storage and transport. SGML, on the other hand, is a highly flexible markup language used mainly for large-scale documentation systems and electronic publishing.
Syntax: HTML has a loose and forgiving syntax, allowing unclosed tags and mixed-case tag names. XML and SGML, however, require strict adherence to their syntax rules, such as closing all tags and using case-sensitive tag names.
Extensibility: Both XML and SGML are highly extensible, allowing users to define custom elements and attributes. HTML has a predefined set of elements and attributes and does not support user-defined tags.
Use in Web Development: HTML is the backbone of web development, while XML is often used for data exchange between applications and APIs. SGML is not commonly used in web development.
In this tutorial, you have learned what HTML is and its role in web development. You also learned about the basic structure of an HTML document, elements, tags, and attributes. As you continue to explore HTML, you will discover more advanced elements, attributes, and best practices for creating functional and visually appealing websites.