HTML Structure and Basic
Elements
Introduction to HTML5 basics
Building your first webpage
Learning Outcomes
01 02 03 04
By the end of Write a valid Use Understand
this lecture, HTML5 common and apply
students will document text and attributes
be able to: structure. media effectively.
elements in
HTML.
HTML (HyperText
Markup Language) is the
standard language for
creating webpages.
It provides structure and
What is meaning to web content.
HTML?
Works with CSS (for styling)
and JavaScript (for
interactivity).
A markup language is a combination of
text and a set of symbols/tags
Markup The symbols/tags are inserted in a text
document to control
Language • Structure
• Formatting
• The relationship among its parts
The markup symbols can be interpreted
by a device (computer, printer, browser,
etc.) to control how a document should
look when printed or displayed on a
monitor
<Tag> vs. Element
<h1>Hello World</h1>
HTML5 Document Structure
<!DOCTYPE html> Key Points:
<html lang=“en”> • <!DOCTYPE html> → Declares
<head> HTML5.
• <html> → Root of the page.
<meta charset=“UTF-8”>
• <head> → Metadata (title, CSS,
<title>Sample Page</title>
scripts).
</head>
• <body> → Visible page content.
<body>
<!-- Content goes here -->
</body>
</html>
To generate an HTML boilerplate in VS
Code, ensure you are working within an
HTML file (e.g., index.html) or have the
language mode set to HTML.
The primary shortcut involves using
Tip: Emmet, which is built into VS Code:
HTML
Boilerplat Type an exclamation mark (!): on the first
line of your HTML file.
e Shortcut
Press Enter or Tab.
HTML Heading
Elements
<h1> to <h6>
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/
Heading_Elements
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Headings
• Copy and paste this code inside the <body>
tags to see the preview
• Right-click in vscode and click on show preview.
Headings:
Output
Important Points
Don’t Do
<h1>Heading 1</h1> <h1>Heading 1</h1>
<h1>Another One</h1> <h2>Heading 2</h2>
Important Points
Don’t Do
<h1>Title</h1> <h1>Title</h1>
<h3>Subtitle</h3> <h2>Subtitle</h2>
HTML Paragraph
Element
<p>
Paragraph Element
<p>This is a paragraph.</p>
Why we need a paragraph?
Code 1: • Put code 1 and code
This is a paragraph. 2 inside body tags
to see output.
This is a paragraph.
• See the difference.
• Use paragraphs
Code 2: from lipsum.com to
<p> This is a paragraph. play around with the
</p> paragraph tag.
<p> This is a paragraph.
</p>
Text Formatting Tags
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
29
Void Elements
<hr /> and <br />
Horizontal Rule Element
<hr />
Horizontal Rule Element
<p> This is a paragraph. </p>
<hr />
<p> This is a paragraph. </p>
Break Element
<br />
Activity: Introduce break elements
Democracy is a mask they wear,
Behind it—greed, beyond repair.
A nation rich in heart and land,
Bleeds daily by its leaders’ hand.
Important Points
Don’t Do
<p> <p>Paragraph 1</p>
Paragraph 1<br /> <p>Paragraph 2</p>
Paragraph 2<br/>
</p>
Comment
<!-- This is a comment -->
Comment Element
• Comments are ignored by the browser and are not
displayed.
• Make the code readable and understandable
<!-- This is a comment -->
The List Elements
Ordered and Unordered Lists
Unordered List
<ul></ul>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Flour</li>
</ul>
Ordered List
<ol></ol>
<ol>
<li>Milk</li>
<li>Eggs</li>
<li>Flour</li>
</ol>
Nesting and
Indentation
How to write good code?
Nested List
Don’t Do
<ul> <ul>
<li>Wake Up</li> <li>Wake Up</li>
<li>Brush Teeth</li> <li>Brush Teeth</li>
<li>Drink Water</li> <li>Drink Water</li>
<li>Make Breakfast <li>Make Breakfast
<ul> <ul>
<li>Tea</li> <li>Tea</li>
<li>Bread</li> <li>Bread</li>
<li>Eggs</li> <li>Eggs</li>
</ul> </ul>
</li> </li>
<li>Go to bus stop</li> <li>Go to bus stop</li>
</ul> </ul>
HTML Attributes
<tag attribute=value>Content</tag>
<tag attribute=value attributetwo=value
>Content</tag>
HTML Global Attributes
• Global attributes (can be used on any element):
• id → unique identifier.
• class → group elements for styling.
• style → inline CSS.
• title → tooltip text.
Lists Attributes
• Type
• Start
Activity
• Create a list of your favourite websites.
Style Attribute
Adding styling to our html structure
Style Attribute
<tag style=”property : value”>Content</tag>
Anchor Elements
Understanding HTML Attributes
https://developer.mozilla.org/en-US/docs/Web/HTML/
Reference/Elements/a
The Anchor Element
<a>This is a link</a>
<a href=“https://sites.google.com/seecs.edu.pk/
cs344-webengineering”>This is a link</a>
File Path
Absolute Paths (not recommended)
• <a href=“e:/myWeb/html/intro.html”>
Relative Paths (recommended)
• Same directory: <a href=“file.html”>
• Parent directory: <a href=“../file.html>
Target Attribute
• <a href=“url” target=“_blank”>…</a>
Target Attribute
• The target attribute specifies where to open the linked
document
• _blank - Opens the linked document in a new window or tab
• _self - Opens the linked document in the same window/tab
as it was
• clicked (this is default)
• _parent - Opens the linked document in the parent frame
• _top - Opens the linked document in the full body of the
window
Image Elements
Adding images to our websites
Image Element
<img src=“url” />
<img src=“https://picsum.photos/200” />
<img src=“https://picsum.photos/200” alt= “random
text”/>
Activity
Task: Create a one-page profile using HTML.
Include:
• A heading with your name.
• A paragraph introducing yourself.
• A list of at least 3 hobbies.
• An image (can be anything relevant).
• A link to your favourite website.
Table Element
How to create tables in HTML?
Table Element
<TABLE BORDER=“1”>
<CAPTION ALIGN="bottom">Class
Grades</CAPTION>
<THEAD>
<TH>Student</TH>
<TH>Grade</TH>
</THEAD>
<TBODY>
<TR>
<TD>Ibrahim</TD>
<TD>B+</TD>
</TR>
<TR>
<TD>Fatima</TD>
<TD>A-</TD>
</TR>
</TBODY>
</TABLE>
Table Attributes
• BORDER=value
• ALIGN=left | right | center
• CELLSPACING=value
• CELLPADDING=value
• WIDTH=value|percent
Cell
Spacing
VS Cell
Padding
Rowspan vs
Colspan
Attribute
VS Code Implementation
Summary
Basic elements:
HTML = Structure of headings,
the web. paragraphs, lists,
links, images.
Attributes = Extra
Hands-on activity
information for
reinforces concepts.
elements.
