HTML Basics
An Introduction
Understanding the Foundation of We b Pages
What is HTML ?
Defines the fundamental structure of a web page.
Composed of a series of elements.
HyperText Elements guide browser content display.
Markup Label content types (e.g., headings, paragraphs, links).
Language
Standard markup language for
web pages.
Foundation for structuring
web content.
Output: Rendered Page Visual
Input: Tags Raw Structure Experience
Browsers interpret HTML tags to determine display, not showing the tags directly.
It's a conversation!
HTML Document Structure
The <!DOCTYPE html> Fundamental HTML Tags
Declaration <html>: The root element, encompasses all
Ensures correct browser rendering.
content.
Must appear once, at the very top. <body>: Contains all visible page content.
It is not case-sensitive. <!DOCTYPE html>
<html>
<head>
<!-- Metadata here -->
</head>
<body>
<!-- Visible page content -->
</body>
</html>
<!DOCTYPE html>
<html>
<head> <body>
Metadata Visible Content
HTML Headings and Paragraphs
Define document structure and
Group distinct blocks of text.
hierarchy.
Tags: <h1>to<h6> Tag: <p>
<h1>: Most important, for page title. Standard for main textual content.
• •
<h6>: Least important, for subsections. <p>This is a paragraph.</p>
•
<h1>This is heading 1</h1>
Content Flow Readability
Semantic HTML SEO Impact
05 HTML Links and Attributes
HTML Links
Defined with the <a> tag. Element Attributes
Provide additional information
for elements.
<ahref="https:// Beyond Links
www.w3schools.com"
This is a link The <img> tag uses attributes like
</a> src (source) and alt (alternative
text) for images.
'href' Attribute:
Specifies the hyperlink's destination URL.
Browser's Role
"HTML is the standard markup Browsers interpret HTML tags to
language for creating We b pages." render content, making elements like
- Introduction to HTML, W3Schools links actionable for the user.
HTML Images
The <img> Element Key Attributes
Fundamental for rich web content. src
Self-closing tag, no end tag needed. Specifies the image source file (URL).
alt
Alternative text for accessibility & SEO.
It seamlessly integrates external image files
width
directly into the structure of a webpage. Sets the image display width (in pixels).
height
Sets the image display height (in pixels).
Rendered Output
Code Example
<img src="w3s.jpg"
alt="W3Schools.com"
width="104" height="142">
