Skip to main content

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 <head> and <body> elements separate the metadata from the actual content.

Here is a simple example of an HTML document:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a simple HTML document.</p>
  </body>
</html>

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.
Live Playground, Try it Yourself

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:

HTML
<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:

HTML
<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:

HTML
<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​

As mentioned earlier, HTML is a markup language used to create and structure web pages. It consists of elements enclosed in tags that define the layout, text, images, and other elements on a page. HTML is the backbone of web development and works with other web technologies like CSS and JavaScript to create functional and visually appealing websites.

Example of HTML code:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Example</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is an example of HTML code.</p>
  </body>
</html>

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:

SGML
<!DOCTYPE example SYSTEM "example.dtd">
<example>
  <title>SGML Example</title>
  <para>This is an example of SGML code.</para>
</example>

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
<?xml version="1.0" encoding="UTF-8"?>
<example>
  <title>XML Example</title>
  <para>This is an example of XML code.</para>
</example>

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.

Conclusion​

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.