UNIT 1: MARKUP LANGUAGE
1.1 What is a Markup Language?
A markup language is a set of rules/codes used to annotate and format text in a document. It
defines how the layout and presentation of text and images should appear in a digital
document. It is NOT a programming language — it is static and does not use logic. It simply
indicates the style, structure, and formatting of a document.
Markup languages help search engines like Google understand the content of websites,
which can improve visibility in search results.
History of Markup Languages
• Markup languages have existed since 1967.
• SGML (Standard Generalized Markup Language) was the first widely used markup
language, used by IBM to create large, complex documents.
• HTML appeared in 1993 and was quickly adopted across the World Wide Web.
• XML was developed in 1996 — simple to read and widely used for transporting data
between systems.
Features of Markup Languages
• Uses tags to annotate text. Tags are special words/characters that indicate
formatting.
• Tags come in pairs: an opening tag and a closing tag (e.g., <b> and </b>).
• Text between the tags is affected by the formatting.
• Markup languages are easy to read — even non-writers can generally understand
them.
• They have a syntax (set of rules) that defines how tags are used, ensuring consistent
and structured documents.
Merits of Markup Languages
• Easy to learn and use — even without programming experience.
• Not as strict as programming languages — no compiler errors if something goes
wrong in HTML.
• Experts recommend beginners start with markup languages.
Demerits of Markup Languages
• Limiting by nature — not as versatile as programming languages.
• Cannot be used to create dynamic or interactive applications on their own.
• Most serious web development also requires programming languages like PHP,
JavaScript, or Python.
Why Learn a Markup Language?
• Web Development: HTML is the backbone of web pages.
• Content Creation: XML is used for structured documents in finance, healthcare, e-
commerce, etc.
1
• Understanding Web Technologies: HTML is a foundation for learning CSS and
JavaScript.
• Career Opportunities: HTML and XML skills are sought by many companies.
• Customization: Allows you to create and design your own website, blog, or portfolio.
• Enhanced Communication: A universal way to structure and share information with
other developers.
• Adaptability: Markup languages continue to evolve and remain relevant.
1.2 Types of Markup Languages
• Presentation Markup Languages: Define visual presentation (e.g., HTML, CSS).
• Data Markup Languages: Structure and organize data (e.g., XML).
• Mathematical Markup Languages: Represent math equations (e.g., MathML).
• Document Markup Languages: Structure textual content (e.g., SGML, LaTeX).
• Domain-Specific Markup Languages: Tailored to specific fields (e.g., MusicXML,
SVG).
• XBRL (eXtensible Business Reporting Language): Used for financial reporting and
analysis.
Comparison of Common Markup Languages
• HTML (Hypertext Markup Language): Tag-based; used for creating structured web
pages; versions HTML4 (1997) and HTML5 (2014).
• XML (Extensible Markup Language): Tag-based; represents and structures data in a
platform-independent way; XML 1.0 released in 1998.
• SGML (Standard Generalized Markup Language): Tag-based; defines markup
languages and document types; serves as the foundation for HTML and XML;
released in 1986.
• TeX: Macro-based; used for high-quality typesetting of technical/scientific
documents; created in 1978.
1.2.1 Semantic vs. Presentational Markup
In web development, there are two main categories of markup:
Semantic Markup
Uses HTML tags that provide meaning and structure to content. It structures a web page in a
meaningful way, allowing search engines and assistive technologies to understand the
information. Benefits include improved accessibility, better SEO (Search Engine
Optimization), and an overall better user experience. Examples: headings, paragraphs, lists,
links.
Presentational Markup
Defines the visual appearance and layout of content. Primarily concerned with how the page
looks to users. Uses HTML tags and CSS styles to define layout, colors, font size,
positioning, etc. Both types play important roles in creating well-structured, accessible, and
visually appealing web pages.
2
1.3 Introduction to HTML
HTML stands for HyperText Markup Language. It is used to design web pages and creates
the complete structure of web pages. Hypertext defines the link between web pages. Markup
language defines the text document using tags, which define the structure of web pages.
HTML was created by Tim Berners-Lee in 1991.
HTML Versions
• HTML 1.0 (1993): The first version — laid the initial foundations for web pages;
simple and limited.
• HTML 2.0 (1995): Officially published; introduced new elements and features.
• HTML 3.2 (1997): Added support for tables, forms, and image maps. Widely used in
the late 1990s.
• HTML 4.01 (1999): Major version; introduced frames, style sheets, and improved
form controls.
• HTML5 (2008): Most recent and robust version. Introduced new semantic elements,
multimedia support (<video>, <audio>), and the <canvas> element for graphics and
animations. Works seamlessly with JavaScript and CSS.
HTML4 vs HTML5
• HTML5 supports multimedia elements (video and audio) directly.
• HTML5 has improved semantics (more meaningful tags).
• HTML5 has better support for mobile devices.
• HTML5 allows developers to build animations and complex applications that run in
the browser (e.g., entertainment, online streaming, video/audio players).
• All major browsers support HTML5 features.
Characteristics of HTML
• HTML is a markup language, NOT a programming language.
• Used to create web pages and web applications (static websites).
• Describes the structure of a web page.
• Consists of a series of elements that tell the browser how to display content.
• All HTML elements/tags are case-insensitive.
• Supports text, images, audio, and video.
• Flexible — can be combined with CSS and JavaScript.
• Compatible with all browsers across various platforms and devices.
Features of HTML
• Easy to Learn and Use: Simple, tag-based syntax.
• Platform-Independent: Works on any device or OS with a web browser.
• Support for Multimedia: Embeds images, videos, and audio using tags like <img>,
<video>, <audio>.
• Hypertext Capabilities: Supports hyperlinks for navigation between web pages or
sections.
• Markup Language: Uses tags (enclosed in < >) to define structure and content.
3
Importance of Learning HTML
• Simple Markup Language: Easy-to-understand syntax.
• Easy Implementation: Quick to start creating web pages.
• Website Creation: Foundation for building websites.
• Fundamentals of Web Programming: Introduces markup, document structure,
elements, and attributes.
• Professional Career Boost: HTML is a required fundamental skill in web
development, design, and digital marketing.
Merits and Demerits of HTML
Merits: Simple and easy to use; supported by all major browsers; integrates with CSS and
JavaScript; used to build websites.
Demerits: Can only create static web pages; cannot handle dynamic tasks like user input
validation or database interactions alone; requires a large amount of code for even simple
pages; security is not strong on its own.
UNIT 2: HTML DEVELOPMENT ENVIRONMENT AND HTML STRUCTURE
2.1 Integrated Development Environment (IDE)
An IDE is a software application that provides a wide range of tools for developers to write,
test, and debug their code. In web development, an IDE provides the tools needed to create
HTML code. An HTML editor is a software used for writing code in HTML. Even though code
can be written in a normal text editor, HTML editors make coding much easier.
Why Set Up a Development Environment?
• Provides a platform to create and test HTML code locally — no need to upload to a
live website every time.
• Allows developers to work in a controlled environment and experiment without
breaking a live website.
• Makes the development process more efficient by allowing local testing before
deploying.
Types of HTML Editors
Textual HTML Editors: Text-based editors where developers write code directly. Require
basic knowledge of HTML. Examples: Notepad++, VS Code, Sublime Text.
WYSIWYG HTML Editors (What You See Is What You Get): Show a preview of the output
as it would appear in a browser. Feature drag-and-drop. Do not require deep HTML
knowledge — suitable for non-technical users. Examples: Adobe Dreamweaver, Amaya,
BlueGriffon.
Popular Code Editors / IDEs
• Notepad++: Lightweight, open-source, customizable, supports color-coding,
extensible with plugins.
4
• Visual Studio Code (VS Code): Free and open-source, built-in Git commands,
debugging, live preview, IntelliSense smart code-completion, highly popular among
developers.
• Sublime Text: Simultaneous editing, 'Goto Anything' feature, multiple selections, split
editing. Freemium software.
• Adobe Dreamweaver CC: Supports both text and WYSIWYG editing; useful for full-
stack development; provides dynamic display and preview of end results.
• Atom: Open-source, 81 built-in packages plus 8,700+ additional packages, teletype
feature for real-time code sharing with teammates, supports multiple panes.
Advantages of HTML Editors
• Help users check syntax and insert commonly used HTML tags.
• Provide auto-completion features.
• Allow code to be translated to other languages like XML or JavaScript.
• Make website development faster and easier.
• Give full control to the developer for deeper source code access.
Tools Required for Web Development
Code Editor: Provides syntax highlighting, auto-completion, error checking. Essential tool for
writing and editing HTML, CSS, and JavaScript.
Web Browser: Used to view web pages and test HTML code. Popular options: Google
Chrome, Mozilla Firefox, Apple Safari. It is advisable to test in multiple browsers.
Software Requirements
• Windows: Notepad, Notepad++, VS Code, WebStorm, Sublime Text, etc.
• Mac OS: TextEdit, TextWrangler, VS Code, Sublime Text, etc.
• Linux: Vi, GEdit, Kate, Vim, VS Code, etc.
Hardware Requirements
• CPU: 1.6 GHz or faster processor.
• RAM: 1 GB or more.
• Post-PC Devices (iPads, iPhones, Android, etc.) can also run HTML5 browsers.
Useful Browser Extensions for Web Developers
• Web Developer: A suite of tools for developers within a single extension.
• Wappalyzer: Identifies technologies used on any website (languages, frameworks,
CMS).
• HTML Validator: Checks HTML code for errors and ensures proper syntax.
• Web Developer Checklist: Provides a checklist of best practices covering
performance, accessibility, and security.
2.2 Basic HTML Document Structure
5
An HTML document contains the text of the page and HTML tags that define the structure
and appearance. It may also include hyperlinks and multimedia elements. The entire
document is enclosed within <html> and </html> tags.
Basic HTML Structure Example
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
Key HTML Elements Explained
• <!DOCTYPE html>: Specifies the version of HTML. Usually the very first line of an
HTML file.
• <html>: The root element — encloses all other elements.
• <head>: Contains metadata about the document (title, author, character set). Not
visible on the page.
• <meta>: Provides metadata about the webpage to search engines and visitors (title,
description, keywords). Placed inside <head>.
• <title>: Nested inside <head>. Specifies the title of the web page — appears in the
browser's title bar.
• <body>: Contains all visible content (text, images, links, and other HTML elements).
HTML Hierarchy / DOM (Document Object Model)
HTML elements are hierarchical and can be nested inside each other, forming a tree-like
structure. This is called the DOM (Document Object Model), used by browsers to render the
web page. Every web document has two main sections: the Head Section and the Body
Section.
Head Section vs. Body Section
• Head Section: Shows the title of the webpage in the browser's title bar or tab. Begins
with <head> and ends with </head>. The <title> tag specifies the webpage title.
• Body Section: Displays the main content on the browser window. Defined within
<body> and </body> tags. Everything written between these tags is displayed in the
browser.
Creating an HTML File
An HTML file is a text file saved with a .html or .htm extension. The .html extension is
currently preferred and commonly used (in the late 90s, .htm was more common). Example
filename: [Link].
6
Steps to Save and Open an HTML Document
• 1. Open a text editor (e.g., Notepad).
• 2. Type your HTML code.
• 3. Save the file with a .html extension (e.g., [Link]). When saving in
Notepad, select 'All Files' from 'Save as type' and set encoding to UTF-8.
• 4. Open a web browser and use File > Open File (or Ctrl+O) to navigate to and open
your saved HTML file.
• 5. To view source: Right-click in browser > 'View Page Source' (Firefox/Chrome) or
'View Source' (Internet Explorer), or press Ctrl+U.
• 6. To edit: Right-click the file > Open With > Notepad. Make changes and save with
Ctrl+S.
• 7. To refresh/reload after changes: Press F5 or Ctrl+R in the browser.
2.2.3 Metadata and Its Importance in SEO
Metadata is data about data. In an HTML page, metadata provides information about the
page's content that is not visible to the user but is used by browsers, search engines, and
other systems. Metadata is placed inside the <head> section using <meta> tags.
Examples of Metadata in HTML
• Title: Appears in the browser title bar and in search results.
• Keywords: Words/phrases describing the page content, used by search engines to
index the page.
• Description: A short summary of the page used by search engines in result listings.
• Author: Name of the person or organization that created the page.
• Copyright information: Protects the intellectual property of the creator.
• Viewport settings: Controls how the page is displayed on different devices.
HTML Tags and SEO
HTML tags are short pieces of code that provide technical information about the page's
content. They tell search engines how to interact with the page, how it should be displayed in
search results, and how to adjust content for better user experience.
How Search Crawlers Use Metadata
When Googlebot or another web crawler visits a page, it scans the content and the provided
tags to understand the page. Based on this, it decides: whether/how the page should be
crawled and indexed; how relevant the page is for certain search queries; and how it should
be displayed in Google Search Results (SERPs).
Installing VS Code (Summary of Steps)
• Step 1: Visit the official VS Code website.
• Step 2: Click 'Download for Windows'.
• Step 3: Locate the downloaded installer in your downloads folder.
• Step 4: Click the installer icon.
• Step 5: Accept the terms and conditions, then click Next.
7
• Step 6: Choose the installation location, then click Next.
• Step 7: Click Install.
• Step 8: Wait approximately 1 minute for the installation to complete.
• Step 9: Tick 'Launch Visual Studio Code' and click Next.
• Step 10: VS Code opens successfully.