Basic Elements and Tags of HTML
A Beginner’s Guide to Web
Development
Introduction to HTML
• HTML stands for HyperText Markup Language.
• It is the standard language for creating webpages.
• HTML uses tags to structure content.
• Tags usually come in pairs: opening < > and closing </
>.
Structure of an HTML Document
• <!DOCTYPE html> – is the document type declaration for HTML5. It is a required
preamble that must be the very first line of code in any HTML document, preceding the
<html> tag. Its primary purpose is to inform the web browser about the version of
HTML the page is written in. For HTML5, this declaration is simplified to <!DOCTYPE
html>, which is case-insensitive.
• The <head> element in an HTML document contains metadata about the page that is
not directly displayed in the browser's visible area. It provides crucial information for
both the browser to render the page correctly and for search engines to understand its
content.
• Common elements found within the <head> tag include:
– <title>: Defines the title of the document, which appears in the browser tab or
window title bar and is often used by search engines.
– <meta>: Provides various metadata about the HTML document, such as character
set (charset), description, keywords, author, and viewport settings for responsive
design.
– <link>: Links external resources to the HTML document, most commonly used to
link CSS stylesheets for styling and favicons for browser tabs.
– <style>: Contains internal CSS rules directly embedded within the HTML document.
– <script>: Embeds or links external JavaScript files, which add interactivity and
dynamic functionality to the webpage.
– <base>: Specifies a base URL for all relative URLs within the document.
Structure of an HTML Document
• The <body> tag in HTML defines the main content of an HTML document,
representing the visible part of a web page that users interact with.
• Key characteristics of the <body> element:
• Content Container:
– It encloses all the content that is displayed in the browser window, such as
text, images, videos, links, lists, tables, and other structural elements.
• Single Instance:
– There can only be one <body> element within a valid HTML document.
• Placement:
– It must be the second element within the <html> element, following the
<head> element.
• Styling:
– CSS styles can be applied directly to the <body> element to control the
overall appearance of the page, such as background color, font styles, and
margins.
• Accessibility:
– It's crucial for accessibility as it contains the content that screen readers
and other assistive technologies interpret for users.
Basic Tags
• <html> → Root element
• <head> → Contains metadata, title, links
• <title> → Title of the webpage (browser tab)
• <body> → Holds all visible content
Text Formatting Tags
• <h1> to <h6> → Headings (largest to smallest)
• <p> → Paragraph
• <b> or <strong> → Bold text
• <i> or <em> → Italicized text
• <br> → Line break
• <hr> → Horizontal rule
Links and Images
• Links: <a href='https://example.com'>Visit
Example</a>
• Images: <img src='image.jpg' alt='Description'>
• href defines URL, src is image path, alt is alternative
text.
Lists
• Unordered List: <ul><li>Item</li></ul>
• Ordered List: <ol><li>First</li></ol>
Tables
• <table>, <tr>, <th>, <td>
• Example:
• <table
border='1'><tr><th>Name</th><th>Age</th></tr>
• <tr><td>Ana</td><td>15</td></tr></table>
Forms
• <form> collects user input
• Common tags: <input>, <label>, <textarea>, <button>
• Example: <input type='text' name='username'>
Semantic Elements (HTML5)
• <header> → Page or section header
• <nav> → Navigation links
• <section> → Section of content
• <article> → Independent article
• <footer> → Page footer
Attributes in HTML
• Attributes provide extra info about tags.
• Examples:
• <img src='image.png' alt='My Image'>
• <a href='https://google.com'
target='_blank'>Google</a>
• <p style='color:blue;'>This is blue text</p>
Summary
• HTML uses tags to structure webpages.
• Basic tags: <html>, <head>, <title>, <body>.
• Content tags: headings, paragraphs, lists, tables,
images, links.
• Forms & semantic tags make webpages functional &
meaningful.
QUIZ
Quiz: Multiple Choice (1-5)
1. What does HTML stand for?
a) HyperText Markup Language b) HighText Machine Language
c) Hyperlink and Text Markup Language d) Home Tool Markup Language
2. Which tag is used to display the largest heading?
a) <h6> b) <h1> c) <head> d) <heading>
3. What tag is used to define a paragraph in HTML?
a) <p> b) <para> c) <par> d) <pg>
4. Which tag is used to insert an image?
a) <img> b) <image> c) <pic> d) <src>
5. The attribute used to define the URL in <a> is:
a) src b) href c) link d) url
Quiz: Multiple Choice (6-10)
6. Which tag creates an ordered list?
a) <ul> b) <li> c) <ol> d) <list>
7. Which tag creates a row in a table?
a) <td> b) <tr> c) <th> d) <table>
8. What does the <br> tag do?
a) Starts a new paragraph b) Breaks a line
c) Creates bold text d) Adds a border
9. Which is a semantic element in HTML5?
a) <div> b) <span> c) <section>
d) <font>
10. Which tag defines the title in the browser tab?
a) <header> b) <meta> c) <title>
d) <head>
Quiz: Identification (11-15)
Write the correct HTML tag.
11. Root element of every HTML document: ________
12. Tag used for bold text: ________
13. Tag that creates a hyperlink: ________
14. Tag used to define a table cell: ________
15. Tag that defines the footer: ________
Quiz: True or False (16-20)
Write T if the statement is correct, F if it is not.
16. The <head> tag contains all visible content.
17. The <ul> tag creates a numbered list.
18. Attributes provide info about elements.
19. <em> and <i> make text italicized.
20. The <body> tag contains visible contents.
ANSWER KEY
Multiple Choice
1.a – HyperText Markup Language
2.b – <h1>
3.a – <p>
4.a – <img>
5.b – href
6.c – <ol>
7.b – <tr>
8.b – Breaks a line
9.c – <section>
10.c – <title>
ANSWER KEY
Identification
11.<html>
12.<b> or <strong>
13.<a>
14.<td>
15.<footer>
ANSWER KEY
True or False
16.F – <head> contains metadata, not visible content
17.F – <ul> creates an unordered (bulleted) list
18.T – Attributes provide extra info about elements
19.T – <em> and <i> italicize text
20.T – <body> contains visible contents
