Introduction to HTML

What is HTML?

HTML stands for:

HyperText Markup Language

HTML is the standard markup language used to create and structure content on web pages.

It is used to define elements such as:

• Headings
• Paragraphs
• Links
• Images
• Tables
• Forms
• Multimedia Content

HTML uses special elements called tags to tell a web browser how the content of a webpage should be organized and displayed.

For example:

<p>This is a paragraph.</p>

HTML provides the basic structure of a web page.

It is a markup language, not a programming language.

Programming logic and interactive behaviour are generally handled using technologies such as JavaScript.

---

HTML Document

An HTML document is a file containing HTML code.

HTML documents are made up of:

• Tags
• Elements
• Attributes
• Text Content

HTML tags are normally written inside angle brackets:

<tag>

For example, to display Hello World in bold:

<b>Hello World</b>

---

Example of HTML Document

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>

<body>
    <h1>My First Heading</h1>
    <p>My First Paragraph.</p>
</body>
</html>

---

Basic Structure of an HTML Document

The basic structure of an HTML document commonly includes:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. <body>

---

1. DOCTYPE Declaration

The DOCTYPE declaration tells the browser which HTML standard the document uses.

For HTML5:

<!DOCTYPE html>

The DOCTYPE declaration is not an HTML element.

It is an instruction to the browser.

---

2. The <html> Element

The <html> element is the root element of an HTML document.

All major HTML content is placed inside it.

Example:

<html>

    <!-- Content goes here -->

</html>

---

3. The <head> Element

The <head> element contains information about the HTML document.

It may contain:

• Page Title
• Metadata
• CSS Links
• Scripts
• Character Encoding
• Viewport Settings

Example:

<head>
    <title>My Website</title>
</head>

---

4. The <title> Element

The <title> element specifies the title of the webpage.

The title normally appears in the browser tab.

Example:

<title>Page Title</title>

The title may also be used by search engines when displaying a page in search results.

---

5. The <body> Element

The <body> element contains the visible content of a webpage.

It may include:

• Headings
• Paragraphs
• Images
• Links
• Tables
• Forms
• Videos

Example:

<body>
    <h1>Welcome</h1>
    <p>This is my webpage.</p>
</body>

---

The <head> and <body> Elements

Example:

<head>
    <!-- Metadata and links to resources -->
</head>

<body>
    <!-- Content visible to users -->
</body>

The <head> stores information about the document, while the <body> contains the content that users see.

---

The <meta> Element

The <meta> element provides metadata about the webpage.

Common uses include:

• Character Encoding
• Responsive Viewport
• Page Description

Examples:

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Brief description of the page">

---

Complete Basic HTML Structure

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My Website</title>

</head>

<body>

    <h1>Welcome to My Website</h1>

    <p>This is my first webpage.</p>

</body>

</html>

---

HTML Tags

HTML tags are special keywords used by browsers to identify and structure HTML content.

Most HTML elements contain:

1. Opening Tag
2. Content
3. Closing Tag

General Syntax

<tag>Content</tag>

Example:

<p>This is a paragraph.</p>

Here:

<p>   → Opening Tag
This is a paragraph. → Content
</p>  → Closing Tag

---

Important Points About HTML Tags

• Tags are enclosed inside < >.
• Different tags perform different functions.
• Most HTML elements contain opening and closing tags.
• Some HTML elements do not require a closing tag.
• HTML tag names are commonly written in lowercase.

---

Types of HTML Tags

HTML tags can commonly be discussed as:

1. Paired Tags
2. Unpaired Tags

---

Paired Tags

Paired tags contain both an opening tag and a closing tag.

Example:

<p>Hello</p>

Here:

<p>

is the opening tag.

</p>

is the closing tag.

---

Examples of Paired Tags

Opening Tag	Closing Tag
<html>	</html>
<head>	</head>
<title>	</title>
<table>	</table>
<form>	</form>
<ul>	</ul>
<p>	</p>

---

Unpaired Tags

Unpaired tags do not have a separate closing tag.

They are also commonly called:

• Empty Elements
• Void Elements

Examples include:

<br>

<hr>

<meta>

<input>

---

Common Unpaired Tags

Tag	Purpose
<br>	Inserts a line break
<hr>	Inserts a thematic break
<meta>	Provides metadata
<input>	Creates an input field

---

HTML Attributes

HTML attributes provide additional information about HTML elements.

Attributes can control or describe:

• Identity
• Styling
• Behaviour
• Type
• Additional Information

Attributes are normally written inside the opening tag.

---

Syntax of HTML Attribute

<element attribute="value">Content</element>

Example:

<p class="intro">Welcome</p>

---

Important Points About HTML Attributes

• Attributes are written inside the opening tag.
• Most attributes use a name="value" format.
• Multiple attributes can be added to one element.
• Attributes are separated by spaces.
• HTML attribute names are commonly written in lowercase.

Example:

<input type="text" id="first-name" class="input-field">

---

General-Purpose HTML Attributes

Common attributes include:

• id
• class
• title
• style

---

The id Attribute

The id attribute provides a unique identifier for an HTML element.

Example:

<div id="container">
    Some Content
</div>

Another example:

<p id="info-text">
    This is a paragraph.
</p>

The id value should normally be unique within a webpage.

---

The class Attribute

The class attribute assigns one or more class names to an element.

Classes are commonly used for:

• CSS Styling
• JavaScript Selection
• Grouping Similar Elements

Example:

<p class="intro">
    This is an introduction paragraph.
</p>

An element can contain multiple classes:

<p class="intro highlight">
    This paragraph is highlighted.
</p>

---

The title Attribute

The title attribute provides additional information about an element.

Browsers may display this information as a tooltip when the user points to the element.

Example:

<abbr title="HyperText Markup Language">HTML</abbr>

---

The style Attribute

The style attribute allows CSS styling to be written directly inside an HTML element.

Example:

<p style="color: red; font-size: 20px;">
    This is a styled paragraph.
</p>

Inline CSS can be useful for simple examples, although internal or external CSS is generally easier to manage in larger websites.

---

HTML Comments

HTML comments are notes written inside HTML code.

Comments are ignored by the browser and are not normally displayed on the webpage.

They are useful for explaining code to developers.

---

Advantages of HTML Comments

HTML comments help to:

• Explain code
• Organize source code
• Make complex code easier to understand
• Leave notes for other developers
• Temporarily hide sections of HTML during development

---

Syntax of HTML Comment

<!-- Comment goes here -->

Anything written between:

<!--

and:

-->

is treated as a comment.

---

Single-Line Comment

A single-line comment is written on one line.

Example:

<!-- This is a single-line comment -->

---

Example of Single-Line Comments

<!DOCTYPE html>

<html>

<head>

    <!-- Internal CSS -->

    <style>

        body {
            text-align: center;
            background-color: #f0f8ff;
            font-size: 30px;
            color: red;
        }

    </style>

</head>

<body>

    <!-- Heading -->

    <h2>Hi</h2>

    <!-- Paragraph -->

    <p>Hello Everyone</p>

</body>

</html>

---

Multi-Line Comment

A multi-line comment can contain several lines of text.

Syntax:

<!--
This is a multi-line comment.
It can span multiple lines.
-->

---

Example of Multi-Line Comment

<!DOCTYPE html>

<html>

<head>

    <title>Hi</title>

</head>

<body>

    <!--
    This is a multi-line comment.
    It can contain several lines.
    -->

</body>

</html>

---

Difference Between Paired and Unpaired Tags

Paired Tags	Unpaired Tags
Have opening and closing tags.	Do not have a separate closing tag.
Usually contain content.	Usually represent an empty or standalone element.
Example: <p></p>	Example: <br>
Example: <title></title>	Example: <hr>

---

Difference Between id and class

id	class
Used to uniquely identify an element.	Used to group one or more elements.
An id should normally be unique on the page.	The same class can be used on many elements.
Example: id="header"	Example: class="menu"

---

Quick Revision

HTML

HTML stands for:

HyperText Markup Language

It is used to structure web pages.

---

Basic HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    Page Content
</body>
</html>

---

Main HTML Elements

• <!DOCTYPE html>
• <html>
• <head>
• <title>
• <body>

---

HTML Tag Syntax

<tag>Content</tag>

---

Paired Tag

Example:

<p>Hello</p>

---

Unpaired Tag

Example:

<br>

---

Attribute Syntax

<element attribute="value">Content</element>

---

Common Attributes

• id
• class
• title
• style

---

HTML Comment

<!-- This is a comment -->

---

Important Exam Points

• HTML stands for HyperText Markup Language.
• HTML is used to create and structure web pages.
• HTML is a markup language.
• HTML uses tags to define webpage elements.
• HTML documents contain tags, elements, attributes, and content.
• <!DOCTYPE html> declares an HTML5 document.
• <html> is the root element.
• <head> contains document-related information.
• <title> specifies the browser-tab title.
• <body> contains visible webpage content.
• <meta> provides metadata about a webpage.
• Most HTML tags contain an opening and closing tag.
• Paired tags contain opening and closing tags.
• Unpaired or void elements do not have separate closing tags.
• <br> inserts a line break.
• <hr> creates a thematic break.
• HTML attributes provide additional information about elements.
• Attributes are written inside the opening tag.
• id uniquely identifies an element.
• class can group multiple elements.
• title can provide additional information.
• style can add inline CSS.
• HTML comments are ignored by the browser.
• HTML comment syntax is <!-- Comment -->.
• Comments can be single-line or multi-line.