Unit 2: Introduction to Web Design
Introduction to HTML
HTML stands for HyperText Markup Language. It is the standard language used to create
and structure content on the web.
What is HTML?
HTML is not a programming language—it's a markup language. It tells web browsers how to
display text, images, and other content in a web page.
Basic Structure of an HTML Document
Here’s a simple example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
Explanation:
• <!DOCTYPE html>: Declares the document type.
• <html>: The root element.
• <head>: Contains metadata (not displayed directly).
• <title>: Sets the page title (shown in browser tab).
• <body>: Contains visible page content.
Common HTML Elements
Tag Description
<h1> to <h6> Headings (from largest to smallest)
<p> Paragraph
<a href=""> Hyperlink
<img src="" alt=""> Image
<ul>, <ol>, <li> Lists (unordered, ordered, list item)
<div> Container for block elements
<span> Container for inline elements
<br> Line break
<strong>, <em> Bold and italic text emphasis
Attributes
HTML elements often have attributes that provide additional information:
<a href="[Link] target="_blank">Visit Example</a>
• href: Specifies the link's destination.
• target="_blank": Opens the link in a new tab.
Fundamentals of Html Elements
Fundamentals of HTML Elements
HTML is built on elements that define the structure and content of a
web page. Let’s break down the key concepts:
What is an HTML Element?
An HTML element consists of:
• An opening tag
• Content
• A closing tag
Example:
<p>This is a paragraph.</p>
• <p> = opening tag
• This is a paragraph. = content
• </p> = closing tag
Together, this creates a paragraph element.
🔸 Types of HTML Elements
1. Block-level Elements
• Take up the full width of the parent container.
• Start on a new line.
• Examples:
o <div>
o <p>
o <h1> to <h6>
o <ul>, <ol>, <li>
o <table>, <section>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
2. Inline Elements
• Only take up as much width as necessary.
• Do not start on a new line.
• Examples:
o <span>
o <a>
o <strong>, <em>
o <img>
<p>This is a <strong>bold</strong> word.</p>
Empty Elements (Self-closing)
Some elements do not have closing tags.
• Examples:
o <img>
o <br>
o <hr>
o <input>
<img src="[Link]" alt="A photo">
<br>
<hr>
Nesting Elements
Elements can be nested inside one another.
<div>
<h2>Welcome</h2>
<p>This is <em>nested</em> content.</p>
</div>
Attributes in Elements
Attributes provide additional info about elements.
<a href="[Link] target="_blank">Visit Site</a>
• href: URL of the link
• target="_blank": Opens in a new tab
Semantic HTML Elements
Semantic elements describe the meaning of content.
• <header> – Top section of a page
• <nav> – Navigation links
• <main> – Main content
• <article> – Independent content
• <section> – Section of content
• <footer> – Bottom section
Example:
<article>
<h2>Blog Title</h2>
<p>This is a blog post.</p>
</article>
History of HTML
Since the early days of the World Wide Web, there have been many
versions of HTML:
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
Document Body
The <body> element in HTML represents the main content of a webpage
that is visible to users. It goes inside the <html> tag, after the <head>
section.
Basic Structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the body content of the page.</p>
</body>
</html>
Key Points:
• The <body> tag contains everything the user sees, like:
o Text (headings, paragraphs)
o Images
o Links
o Buttons
o Scripts and embedded media
• There should only be one <body> element per HTML document.
• Styling can be applied via CSS:
• <body style="background-color: lightgray; color: darkblue;">
Different Tags
HTML has a wide variety of tags, each serving a specific purpose in
structuring and presenting web content. Here's a categorized overview
of commonly used HTML tags:
Document Structure Tags
Tag Description
<!DOCTYPE> Defines the document type and HTML version
Tag Description
<html> Root element of an HTML document
<head> Contains meta-information about the document
<title> Sets the title of the page (shown in browser tab)
<body> Contains visible page content
Text Content Tags
Tag Description
<h1> to <h6> Headings from largest (h1) to smallest (h6)
<p> Paragraph
<br> Line break
<hr> Horizontal rule (line)
<strong> Bold text (semantically important)
<em> Italic text (emphasized)
<b> Bold (styling only)
<i> Italic (styling only)
<span> Inline container (for styling)
<div> Block-level container
Link & Media Tags
Tag Description
<a> Hyperlink
Tag Description
<img> Image
<video> Video player
<audio> Audio player
<source> Media source (used in <video>/<audio>)
<iframe> Embeds another web page
List Tags
Tag Description
<ul> Unordered list
<ol> Ordered list
<li> List item
<dl> Description list
<dt> Term in a description list
<dd> Description in a description list
Table Tags
Tag Description
<table> Table container
<tr> Table row
<td> Table cell
<th> Table header cell
Tag Description
<thead> Table header section
<tbody> Table body section
<tfoot> Table footer section
<caption> Table caption
Form & Input Tags
Tag Description
<form> Form container
<input> Input field
<textarea> Multiline input
<select> Dropdown menu
<option> Option in a dropdown
<button> Clickable button
<label> Label for an input
<fieldset> Groups form elements
<legend> Caption for a <fieldset>
Semantic/Structural Tags (HTML5)
Tag Description
<header> Introductory content
<nav> Navigation links
Tag Description
<main> Main content area
<article> Self-contained content
<section> Thematic grouping of content
<aside> Sidebar content
<footer> Footer content
<figure> Media with caption
<figcaption> Caption for media
Scripting & Meta Tags
Tag Description
<script> Embeds JavaScript
<noscript> Fallback if JS is disabled
<style> Embeds CSS
<link> Links to external CSS or resources
<meta> Metadata (charset, description, viewport, etc.)
Sections