Introduction to HTML
by khalid idan
What is HTML?
Definition Tag Types
HTML stands for HyperText Markup Language. • Paired tags: have opening and closing (e.g. <h
• Unpaired tags: single tags (e.g. <br>)
It's used to create web pages using tags.
Tags are not case sensitive.
HTML
What You Need to
Create HTML
Computer Web Browser
Any computer with Examples:
a text editor Chrome, Firefox,
suffices. Edge for viewing
Internet Connection? pages.
No, creating and viewing HTML can be done
offline on your device.
Getting Started with HTML
Write Code
Use Notepad or any text editor to write HTML code.
Save File
Save with .html or .htm extension.
View in Browser
Open the saved file with any web browser.
Example: Basic HTML structure starts and ends with <html> tags
HTML
Understanding HTML Code Structure
<html> Tag <head> and <title> Tags<body> Tag
It contains all other tags Head holds metadata; Contains all visible webpage content.
except <!DOCTYPE>. title sets the browser
Always close tags like
tab's title.
</body> to end sections.
HTML
Heading Elements in HTML
Six Heading Tags Paired Tags
• <h1> largest heading Each heading requires an opening and closing tag.
• <h6> smallest heading
HTML
Bold and Italic Text
Bold Text Italic Text
Use <b> to make text bold. Use <i> to italicize text.
Example: <b>This text is bold.</b> Example: <i>This text is italicized.</i>
HTML
Line Breaks and
Horizontal Rules
Line Breaks
The <br> tag inserts a single line break in text.
Horizontal Rule
The <hr /> tag creates a horizontal line divider.
Lists in HTML
Unordered Lists <ul> Ordered Lists <ol>
Displays bullet points using <li> items. Displays numbered items.
Example: <ul><li>Item 1</li></ul> Example: <ol><li>Item 1</li></ol>
HTML
List Styling with TYPE Attribute
Unordered List Types Ordered List Types
• disc (default bullet) • 1 (numbers)
• circle • a (lowercase letters)
• square • A (uppercase letters)
• i (lowercase Roman numerals)
• I (uppercase Roman numerals)
HTML
HTML Definition Lists
An HTML definition list, also known as a description
list, pairs terms with their descriptions. It's ideal for
glossaries, FAQs, or any dictionary-like content.
HTML
Key Tags in Definition Lists
Definition lists use specific tags to structure
content. Each tag serves a unique purpose for
terms and descriptions.
<dl>
Defines the entire description list block.
<dt>
Specifies the definition term or name.
<dd>
Provides the description or definition itself.
Basic Syntax and Structu
The structure is simple and intuitive. It ensures
clarity and semantic meaning.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
HTML
HTML Attributes
An HTML attribute is a name value pair that we
put
inside opening html tag.
HTML attributes gives the additional
information
about the element.
Every HTML attribute has its name and value
Suppose we want to specify the language of
page in html tag. Then we write
<html lang=” en”>
HTML
HTML Attributes
ID Attribute
Id attribute is just like your roll number.
This is unique for all HTML elements.
<p id=” p1”>First paragraph></p>
<p id=” p2”>First paragraph></p>
Class Attribute
The id is just for one element but class is for group of
elements just like your roll number and your class id
<p class =” Fruits”>Apple</p>
<p class =” Fruits”>Mango</p>
<p class =” Fruits”>Orange</p>
HTML Comments
An HTML comment is a piece of text in an HTML
document that is not displayed in the browser and
is used to leave notes or explanations in the code
Comments do not appear on the webpage.
They help improve code readability and
maintainability.
They can be used to temporarily remove code without
deleting it.
<!-- Write your comments here -->
HTML
