SGML (Standard Generalized Markup Language)
Definition
SGML stands for Standard Generalized Markup Language.
It is an international standard (ISO 8879) used to define the structure and organization of
documents using markup.
SGML is not a single markup language, but a meta-language used to create other markup
languages like HTML and XML.
SGML was developed to allow documents to be described in terms of their structure rather than
appearance. It focuses on defining rules for marking up documents so that they can be
processed by computers in a standardized way.
It provides a system for:
Defining document elements
Describing document structure
Separating content from formatting
Concept Description
Tags Used to mark elements in a document
Elements Structural components (e.g., title, paragraph)
Attributes Provide extra information about elements
DTD (Document Type Definition) Defines the structure and legal elements of a document
Features of SGML
1. Platform Independent – Works across different systems.
2. Highly Structured – Focuses on document organization.
3. Flexible – Users can define their own markup languages.
4. Descriptive – Describes what content is, not how it looks.
5. Foundation of HTML & XML – Both are derived from SGML.
Basic Example of SGML Structure
<!DOCTYPE book [
<!ELEMENT book (title, author, chapter+)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT chapter (#PCDATA)>
]>
This DTD defines:
A book must have a title, author, and one or more chapters.
Advantages
Standardized document structure
Reusable content
Suitable for large documentation systems
Limitations
Complex to learn
Hard to implement
Requires strict rules
Because of these limitations, simpler languages like HTML and XML became more popular.
Relationship with Other Web Technologies
Languag Relation to SGML
e
HTML Application of SGML
XML Simplified subset of SGML
XHTML Combination of HTML and XML
SGML is a powerful markup standard that laid the foundation for modern web markup
languages. Although it is not widely used directly today, its concepts influenced the development
of HTML and XML, which are essential in web technologies.
HTML INTRODUCTION
What is HTML?
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page
Markup languages are designed for the processing, definition and presentation of text.
The language specifies code for formatting, both the layout and style, within a text file. The
code used to specify the formatting are called tags. HTMLis a an example of a widely known
and used markup language.
A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before the tag
name
Tip: The start tag is also called the opening tag, and the end tag the closing tag.
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and
display them.
The browser does not display the HTML tags, but uses them to determine how to display the
document:
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Note: Only the content inside the <body> section (the white area above) is displayed in a browser.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web
pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML is:
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="[Link] is a link</a>
HTML5 (HyperText Markup Language – Version 5)
Definition
HTML5 is the latest major version of HTML, the standard markup language used to create and
structure content on the World Wide Web. It provides new elements, attributes, and APIs that
support multimedia, graphics, and modern web applications without needing external plugins.
Explanation
HTML5 is used to define the structure of web pages. It improves older versions of HTML by
adding:
Better support for audio and video
New semantic elements
Built-in form controls
Support for graphics and animations
Features for mobile-friendly and modern web apps
HTML5 works together with:
CSS3 → for design
JavaScript → for interactivity
Basic Structure of an HTML5 Document
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Welcome to HTML5</h1>
<p>This is a simple web page.</p>
</body>
</html>
New Features of HTML5
1. Semantic Elements
Provide meaning to web page structure.
Element Purpose
<header> Top section of page
<nav> Navigation links
<section> Content section
<article> Independent content
<aside> Side content
<footer> Bottom section
2. Multimedia Support
Tag Use
<audio> Embed sound
<video> Embed video
No need for Flash or external plugins.
3. Graphics & Animation
Feature Purpose
<canvas> Drawing graphics using JavaScript
SVG Scalable vector graphics
4. Form Enhancements
New input types:
email
number
date
range
color
url
Improves validation and user experience.
5. APIs in HTML5
Geolocation API
Drag and Drop API
Web Storage (localStorage, sessionStorage)
Web Workers
Offline Web Applications
Advantages of HTML5
1. Supports multimedia without plugins
2. Better search engine optimization (SEO)
3. Mobile-friendly
4. Cleaner and simpler code
5. Faster performance
HTML5 vs Older HTML
Feature HTML4 HTML5
Multimedia Plugins required Built-in support
Semantic Tags Very few Many new tags
Graphics Limited Canvas & SVG
Forms Basic Advanced inputs
HTML5 is the backbone of modern web development. It provides powerful features for creating
structured, interactive, and multimedia-rich web applications, making it essential for today’s web
technologies.