Scribd
Upload
1 views25 pages

Chapter 2

Uploaded by

singitannuguse
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views25 pages

Chapter 2

Uploaded by

singitannuguse
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Internet Programming I – SWEG3107 2018EC

Chapter 2
Designing and Building Web Pages with HTML5 Elements
1.1. Getting Started with HTML
The Hypertext Markup Language (HTML) is the backbone of the World Wide Web. Every website,
regardless of its complexity, is built upon HTML. It provides the structure of web pages, allowing
developers to define content such as text, images, links, forms, and multimedia. In this section, we explore
what HTML is, its role in web development, and how to create a basic HTML document.

What is HTML and Its Role in Web Development?


HTML stands for Hypertext Markup Language. It is not a programming language but a markup language,
which means it uses tags to describe the structure and meaning of content on a web page.

 Hypertext refers to the linking of documents through hyperlinks, enabling navigation across web
pages.
 Markup refers to the use of elements (tags) that describe the structure of content (e.g., headings,
paragraphs, lists).

HTML defines the structure of web content, such as headings, paragraphs, and tables. It works together
with CSS (Cascading Style Sheets) to handle the visual styling and with JavaScript to add interactivity and
dynamic behavior. Serving as the foundation of all websites and web applications, HTML provides the
essential framework upon which every other web technology is built.

HTML5 Overview
The current standard is HTML5, introduced in 2014. It brought new features to make the web more
powerful and semantic.

Key improvements include:

 New semantic elements like <header>, <footer>, <article>, <section>.


 Support for audio and video playback without plugins using <audio> and <video>.
 Enhanced form controls such as <input type="email"> and <input type="date">.
 Support for graphics through <canvas> and scalable vector graphics (SVG).
 Improved accessibility and better integration with modern devices.

Department of Software Engineering, AASTU 1 of 25


Internet Programming I – SWEG3107 2018EC

Structure of an HTML Document


Every HTML document follows a basic structure:

<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>

Explanation of elements:

 <!DOCTYPE html>: Tells the browser the document is HTML5.

 <html>: The root element, enclosing the entire page.

 <head>: Contains metadata, such as the page title and links to stylesheets.

 <title>: Defines the title shown on the browser tab.

 <body>: Holds all the visible content (text, images, links, etc.).

Steps to create a web page:

1. Open a text editor (Notepad, VS Code, Sublime Text).


2. Write a simple HTML structure.
3. Save the file with the extension .html (e.g., [Link]).
4. Open the file in any web browser (Chrome, Firefox, Edge).

1.2. Text and Document Structure


Text is the core component of most web pages. HTML provides a set of elements that help organize,
structure, and format text in a meaningful and readable way. Understanding how to structure content
using proper tags is crucial for creating clear, accessible, and professional web pages.

Department of Software Engineering, AASTU 2 of 25


Internet Programming I – SWEG3107 2018EC

In this section, we will learn how to use HTML tags to define headings, paragraphs, line breaks, formatted
text, quotations, and code snippets. We will also explore the difference between block-level and inline
elements and understand how <div> and <span> are used for layout and grouping.

Headings (<h1> - <h6>)


Headings define the hierarchical structure of content. HTML provides six levels of headings, from <h1>
(the most important) to <h6> (the least important).

Example:
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

Use only one <h1> tag per page, typically for the main title, to establish a clear hierarchy. Subsequent
headings such as <h2>, <h3>, and others should be used to organize content logically and maintain a well-
structured document. Following proper heading practices enhances both readability for users and search
engine optimization (SEO), making the content more accessible and easier to index.

Paragraphs (<p>)
Paragraphs are used to represent blocks of text. The browser automatically adds spacing before and after
each paragraph.

Example:

<p>HTML is the standard language used to create web pages. It defines


the structure and layout of documents for the World Wide Web.</p>

Line Breaks and Horizontal Rules

 Line Break (<br>): Used to start text on a new line without creating a new paragraph.
o <p>Address:<br>Addis Ababa,<br>Ethiopia</p>
 Horizontal Rule (<hr>): Inserts a horizontal line to separate sections or topics.
o <hr>

Text Formatting Elements


HTML provides several elements to emphasize, highlight, or style text semantically.

Department of Software Engineering, AASTU 3 of 25


Internet Programming I – SWEG3107 2018EC

Element Description Example

<b> Makes text bold (non-semantic). <b>Bold Text</b>

<strong> Indicates strong importance (semantic). <strong>Important!</strong>

<i> Italicizes text (non-semantic). <i>Italic Text</i>

<em> Emphasizes text (semantic). <em>Emphasized Text</em>

<u> Underlines text. <u>Underlined</u>

<mark> Highlights text. <mark>Highlighted</mark>

<sub> Subscript text. H<sub>2</sub>O

<sup> Superscript text. X<sup>2</sup>

These tags help create well-styled and meaningful documents when used properly.

Quotations
Quotations are important when referencing statements or citing external sources. HTML offers specific
tags for this purpose:

Block-level quotation (<blockquote>) – Used for long quotations.

<blockquote>
“The best way to predict the future is to invent it.” - Alan Kay

</blockquote>
Inline quotation (<q>) – Used for short quotes within a sentence.

<p>Alan Kay once said, <q>The best way to predict the future is to invent
it.</q></p>

Citation (<cite>) – Refers to the title of a cited work (book, article, etc.).

<p><cite>The Art of Computer Programming</cite> by Donald Knuth</p>

Code and Preformatted Text


Web developers often need to display programming code or keyboard inputs. HTML provides special tags
to preserve formatting and represent such content accurately.

Department of Software Engineering, AASTU 4 of 25


Internet Programming I – SWEG3107 2018EC

Element Purpose Example


<code>print("Hello,
<code> Displays code snippets inline. World!")</code>
Displays preformatted text with spaces and
<pre>
line breaks preserved.

Example:

<pre>
for i in range(3):
print(i)
</pre>

1.3. Hyperlinks and Images


One of the defining features of the web is its interconnectivity, the ability to link documents, media, and
resources across the internet. Hyperlinks make this possible, allowing users to navigate from one page to
another with a simple click. Similarly, images enrich web content, making pages more visually engaging
and informative.

In this section, we will explore how to use hyperlinks and images in HTML, including advanced features
like image maps and favicons.

Hyperlinks (<a>)
The <a> tag (short for anchor) is used to create hyperlinks in HTML. Hyperlinks connect web pages,
documents, or external resources.

Basic Syntax: <a href="URL">Link Text</a>

 The href (hypertext reference) attribute specifies the destination of the link.

Example:

<a href="[Link] Example</a>

Types of Links

1. Absolute URLs
These contain the full web address, including protocol and domain name.
<a href="[Link] W3C Website</a>

Department of Software Engineering, AASTU 5 of 25


Internet Programming I – SWEG3107 2018EC

Use this for linking to external websites.

2. Relative URLs
These point to resources within the same website or directory.
<a href="[Link]">About Us</a>
Use this when linking pages within your own project folder.

3. Email Links
HTML allows creating links that open the user’s default email client.
<a href="[Link] Email</a>

4. Phone Links
On mobile devices, you can make a link that initiates a phone call.
<a href="[Link] Us</a>

5. File Download Links


You can provide downloadable files (like PDFs or images).
<a href="files/[Link]" download>Download Brochure</a>

Additional Attributes

Attribute Description Example

target="_blank" Opens link in a new tab or window. <a href="[Link]"


target="_blank">Open</a>

title Adds a tooltip when hovering. <a href="[Link]" title="Go to


homepage">Home</a>

rel="noopener" Improves security when opening <a href="..." target="_blank"

links in new tabs. rel="noopener">Secure Link</a>

Images (<img>)
Images make web pages more appealing and can communicate information visually.

Basic Syntax

<img src="[Link]" alt="Description of the image">

Attributes:

Department of Software Engineering, AASTU 6 of 25


Internet Programming I – SWEG3107 2018EC

Attribute Description Example

src Specifies the image file path (URL or <img src="images/[Link]">


relative path).

alt Provides alternative text (important <img src="[Link]" alt="Student in a


for accessibility). classroom">

title Adds tooltip text when hovering. <img src="[Link]" title="Our Team">

width and Define image dimensions (in pixels <img src="[Link]" width="300"
height or percentages). height="200">

Example

<img src="[Link]" alt="Beautiful sunset over the mountains"


width="500" height="300">

If the image file cannot be found, the browser displays the alt text instead, a critical accessibility feature
for screen readers.

Image Maps (<map> and <area>)


Image maps allow specific areas of an image to act as separate clickable links.

Example

<img src="[Link]" usemap="#worldmap" alt="World Map">

<map name="worldmap">
<area shape="rect" coords="50,50,150,150" href="[Link]"
alt="Africa">
<area shape="circle" coords="300,200,50" href="[Link]"
alt="Europe">
</map>

Explanation:

 <map> defines the image map and is given a name (referenced by usemap).

 <area> defines clickable regions:

o shape can be "rect", "circle", or "poly".

Department of Software Engineering, AASTU 7 of 25


Internet Programming I – SWEG3107 2018EC

o coords specifies the region’s coordinates.

o href points to the destination page.

This feature is useful for interactive diagrams, maps, or infographics.

Favicon (<link rel="icon">)

A favicon is a small icon that represents a website, displayed in the browser tab and bookmarks.

Example
<head>
<link rel="icon" type="image/png" href="images/[Link]">
</head>

Notes:
 Favicons should be small (usually 16×16 or 32×32 pixels).
 Common formats include .ico, .png, or .svg.
 It helps build brand identity and improve the website’s professional appearance.

1.4. Lists
Lists are an essential part of web pages because they help organize content into a clear, readable, and
logical format. HTML provides three types of lists, ordered, unordered, and description lists, each serving
a unique purpose. Lists can also be nested, allowing developers to create structured and hierarchical
content, such as menus or outlines.

In this section, we will explore how to create and style different types of lists using HTML elements.

Ordered Lists (<ol>)


An ordered list is used when the order or sequence of items matters, such as steps in a process, rankings,
or instructions. Each item inside an ordered list is placed within a <li> (list item) tag.

Syntax:

<ol>
<li>Step One</li>
<li>Step Two</li>
<li>Step Three</li>
</ol>

Example:

Department of Software Engineering, AASTU 8 of 25


Internet Programming I – SWEG3107 2018EC

<h3>How to Create an HTML Page</h3>


<ol>
<li>Open a text editor.</li>
<li>Write HTML code.</li>
<li>Save the file as [Link].</li>
<li>Open it in a browser.</li>
</ol>

By default, ordered lists use numbers (1, 2, 3, …). However, you can customize the numbering style using
the type attribute.

Common type values:


Type Description Example
1 Default numbering 1, 2, 3
A Uppercase letters A, B, C
a Lowercase letters a, b, c
I Uppercase Roman numerals I, II, III
i Lowercase Roman numerals i, ii, iii

Example:
<ol type="A">
<li>Introduction</li>
<li>Body</li>
<li>Conclusion</li>
</ol>

Unordered Lists (<ul>)


An unordered list is used when the order of items is not important. These lists typically display items with
bullet points.

Syntax:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

You can change the bullet style using the type attribute (though CSS is preferred for styling).
Type Description
disc Default filled circle
circle Hollow circle
square Solid square

Department of Software Engineering, AASTU 9 of 25


Internet Programming I – SWEG3107 2018EC

Example:

<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>

Description Lists (<dl>)


A description list is used to display terms and their definitions, similar to a glossary or dictionary entry.

Syntax:
<dl>
<dt>HTML</dt>
<dd>The standard language for creating web pages.</dd>
<dt>CSS</dt>
<dd>A style sheet language used to describe the look of a
webpage.</dd>
</dl>

Explanation:
 <dl> - Defines the start of a description list.
 <dt> - Stands for “definition term.”
 <dd> - Stands for “definition description.”

Example:
<h3>Web Technologies</h3>
<dl>
<dt>HTML</dt>
<dd>Defines the structure of web content.</dd>
<dt>CSS</dt>
<dd>Styles and formats web pages.</dd>
<dt>JavaScript</dt>
<dd>Adds interactivity to websites.</dd>
</dl>

Nested Lists
Lists can be nested, meaning one list can be placed inside another. This is useful for creating menus,
outlines, or categorized data.

Example:
<h3>Course Topics</h3>
<ul>
<li>Frontend Development

Department of Software Engineering, AASTU 10 of 25


Internet Programming I – SWEG3107 2018EC

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend Development
<ol>
<li>PHP</li>
<li>[Link]</li>
</ol>
</li>
</ul>

Explanation:
 A <ul> list can contain another <ul> or <ol> inside its <li> items.
 Proper indentation improves readability.

1.5. Tables
Tables in HTML are used to organize data into rows and columns, making it easier to display structured
information such as schedules, price lists, or statistical data. The <table> element provides a flexible way
to present tabular content on a web page.

Although modern web design often uses CSS for page layout, HTML tables remain essential for displaying
structured data clearly and accessibly. In this section, we will explore the fundamental table elements and
attributes, how to merge cells, add captions, and organize large tables using grouping elements.

Basic Table Structure:

A table is made up of several key tags:

 <table> - defines the entire table.

 <tr> - defines a row.

 <td> - defines a standard data cell (table data).

 <th> - defines a header cell, which is bold and centered by default.

Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Abebe</td>

Department of Software Engineering, AASTU 11 of 25


Internet Programming I – SWEG3107 2018EC

<td>22</td>
<td>Addis Ababa</td>
</tr>
<tr>
<td>Selam</td>
<td>24</td>
<td>Hawassa</td>
</tr>
</table>

Explanation:
 <th> cells represent headings (e.g., column or row titles).

 <td> cells contain regular data.

 <tr> groups both header and data cells into rows.

Merging Cells: colspan and rowspan


Sometimes, you may need a cell to span across multiple columns or rows. This is achieved using the
colspan and rowspan attributes.

Example - Column Span:


<table border="1">
<tr>
<th colspan="3">Student Information</th>
</tr>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Abebe</td>
<td>22</td>
<td>Addis Ababa</td>
</tr>
</table>

Here, the first header cell spans three columns.

Example (Row Span):


<table border="1">
<tr>
<th rowspan="2">Region</th>
<th>City</th>
<th>Population</th>
</tr>
<tr>
<td>Addis Ababa</td>
<td>5,000,000</td>
</tr>

Department of Software Engineering, AASTU 12 of 25


Internet Programming I – SWEG3107 2018EC

</table>

Here, the “Region” cell extends across two rows.

Adding Captions (<caption>)


The <caption> tag provides a short title or description for the table. It helps users, especially those using
screen readers, understand the purpose of the table.

Example:
<table border="1">
<caption>Student Grades for 2025</caption>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
<tr>
<td>Abebe</td>
<td>Math</td>
<td>A</td>
</tr>
</table>

By default, the caption appears above the table, though CSS can change its position.

Grouping Table Sections: <thead>, <tbody>, and <tfoot>


For larger or more complex tables, it’s helpful to group related rows using these elements:

 <thead> - Defines the header section of the table.

 <tbody> - Contains the main body of data rows.

 <tfoot> - Defines the footer section, often used for totals or summaries.

Example:
<table border="1">
<caption>Monthly Sales Report</caption>
<thead>
<tr>
<th>Month</th>
<th>Sales</th>
<th>Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$5,000</td>
<td>$1,200</td>

Department of Software Engineering, AASTU 13 of 25


Internet Programming I – SWEG3107 2018EC

</tr>
<tr>
<td>February</td>
<td>$6,000</td>
<td>$1,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<th>$11,000</th>
<th>$2,700</th>
</tr>
</tfoot>
</table>

Benefits of Grouping:

 Improves readability and organization.


 Enables styling or scripting for specific sections.
 Enhances accessibility for assistive technologies.

Styling Attributes
Although modern developers use CSS for styling, HTML still supports a few basic table attributes that help
visualize structure quickly during learning or prototyping.
Attribute Description Example
border Defines the thickness of table borders. <table border="1">
cellpadding Adds space inside each cell (between text and border). <table cellpadding="5">
cellspacing Adds space between cells. <table cellspacing="5">

Example:
<table border="1" cellpadding="5" cellspacing="3">
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Bread</td>
<td>$2</td>
</tr>
</table>

1.6. Forms and User Input


Forms are essential components of web pages that allow users to enter and submit data to a server. The
<form> element defines the boundary of a form and contains various input controls, labels, and buttons.

Department of Software Engineering, AASTU 14 of 25


Internet Programming I – SWEG3107 2018EC

A form is created using the <form> tag with key attributes:

 action - specifies the URL where the form data will be sent.

 method - determines how data is sent (GET or POST).

Example:
<form action="[Link]" method="post">
<!-- form elements go here -->
</form>

Input Types

The <input> tag is used to collect various types of data. Common input types include:
Input Type Description
text Single-line text input.
password Masked input for passwords.
email Validates email format.
number Allows numeric input with optional range.
date Date picker control.
file Lets users upload files.
color Color selection interface.
range Slider control for numeric ranges.
checkbox Used for multiple selections.
radio Used for single-choice options.

Example:

<input type="text" name="username">


<input type="password" name="password">
<input type="checkbox" name="subscribe">

Labels and Accessibility

Labels make forms more accessible by linking descriptive text to input controls using the <label for>
attribute.

Example:

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Grouping Form Elements

The <fieldset> tag groups related form elements, and <legend> provides a title for the group.

Department of Software Engineering, AASTU 15 of 25


Internet Programming I – SWEG3107 2018EC

Example:

<fieldset>
<legend>Personal Information</legend>
<input type="text" name="fullname">
<input type="date" name="birthdate">
</fieldset>

Dropdown Lists

Dropdown menus are created using the <select> element, with individual options inside <option>. The
<optgroup> tag can group related options.

Example:

<select name="country">
<optgroup label="Africa">
<option value="ethiopia">Ethiopia</option>
<option value="kenya">Kenya</option>
</optgroup>
<optgroup label="Asia">
<option value="china">China</option>
<option value="india">India</option>
</optgroup>
</select>

Text Area

The <textarea> tag is used for multi-line text input, such as comments or messages.

Example:

<textarea name="comments" rows="4" cols="30"></textarea>

Buttons

Buttons perform actions like submitting or resetting the form. Common types:

 <button type="submit"> – submits the form.

 <button type="reset"> – clears the form fields.

 <button type="button"> – used for custom scripts or actions.

Department of Software Engineering, AASTU 16 of 25


Internet Programming I – SWEG3107 2018EC

Example:

<button type="submit">Submit</button>
<button type="reset">Clear</button>

Form Validation

HTML provides built-in validation attributes to ensure correct input before submission:

 required – makes a field mandatory.

 pattern – defines a regular expression for input format.

 min, max, step – restrict numeric or date ranges.

Example:

<input type="number" name="age" min="18" max="60" required>


<input type="text" name="zipcode" pattern="[0-9]{5}">

Get vs Post

1.7. Multimedia
Multimedia elements enhance web pages by allowing the inclusion of audio, video, and interactive
content. HTML provides built-in tags to easily embed and control such media without external plugins.

Audio Element

The <audio> tag is used to embed sound content such as music or narration. It supports attributes like:

 controls – displays play, pause, and volume options.

 autoplay – starts playing automatically when the page loads.

 loop – replays the audio continuously.

Department of Software Engineering, AASTU 17 of 25


Internet Programming I – SWEG3107 2018EC

Example:
<audio controls autoplay loop>
<source src="sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Video Element

The <video> tag embeds video content directly into web pages. It can include multiple sources and
several useful attributes:

 controls – shows playback controls.

 poster – specifies an image to display before playback starts.

 autoplay and loop – similar to the <audio> element.

Example:

<video controls poster="[Link]" width="400">


<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
Your browser does not support the video tag.
</video>

Track Element for Captions

The <track> tag adds text tracks, such as subtitles or captions, to video elements. It improves
accessibility and comprehension.

Example:
<video controls>
<source src="lesson.mp4" type="video/mp4">
<track src="[Link]" kind="captions" srclang="en"
label="English">
</video>

Embedding External Content with <iframe>

The <iframe> tag embeds external resources such as web pages, maps, or videos (e.g., from YouTube).

Example:

<iframe
src="[Link]

Department of Software Engineering, AASTU 18 of 25


Internet Programming I – SWEG3107 2018EC

width="560"
height="315"
allowfullscreen>
</iframe>

1.8. Semantic Structure


Semantic HTML elements provide meaning and context to the structure of a web page. Instead of using
generic <div> tags everywhere, semantic elements describe the purpose of each section, making web
content more accessible, SEO-friendly, and easier to maintain.

Common Semantic Elements


Element Purpose / Description
<header> Represents the introductory section of a page or a specific section, usually containing the
logo, title, or navigation links.
<nav> Defines a section that contains navigation links to other parts of the site or page.
<main> Contains the main content of the page, unique to that document. Only one <main>
should exist per page.
<article> Represents independent, self-contained content such as a blog post, news story, or
article.
<section> Groups related content within a page, often with its own heading.
<aside> Contains side content or complementary information such as sidebars, advertisements,
or related links.
<footer> Represents the footer of a page or section, often containing contact info, copyright, or
navigation links.

Example:
<header>
<h1>Tech Today</h1>
<nav>
<a href="#home">Home</a>
<a href="#articles">Articles</a>
<a href="#contact">Contact</a>
</nav>
</header>

<main>
<article>
<h2>The Rise of AI</h2>
<p>Artificial Intelligence is shaping the future of
technology...</p>
</article>

<aside>

Department of Software Engineering, AASTU 19 of 25


Internet Programming I – SWEG3107 2018EC

<h3>Related Topics</h3>
<ul>
<li>Machine Learning</li>
<li>Neural Networks</li>
</ul>
</aside>
</main>

<footer>
<p>&copy; 2025 Tech Today. All rights reserved.</p>
</footer>

Benefits of Semantic HTML

 Accessibility: Screen readers and assistive technologies can better understand the content
structure.
 SEO Improvement: Search engines can interpret and rank content more effectively.
 Cleaner Code: Enhances readability, maintainability, and organization of HTML documents.

1.9. Metadata and Document Settings


Metadata provides information about a web page rather than what is displayed on it. These elements,
usually placed inside the <head> section, help browsers, search engines, and social platforms understand
and present the page correctly.

Common Metadata Elements

Element / Attribute Purpose / Description Example


<meta charset> Defines the character encoding of <meta charset="UTF-8">
the document. UTF-8 is the
standard for supporting all major
languages and symbols.
<meta Controls how the page is displayed <meta name="viewport"
name="viewport"> on mobile devices. Helps make web content="width=device-width,
initial-scale=1.0">
pages responsive.
<meta Provides a short summary of the <meta name="description"
name="description"> page content. Used by search content="Learn HTML from
basics to advanced with
engines for snippets. practical examples.">
<meta Lists relevant keywords (less <meta name="keywords"
name="keywords"> important for modern SEO but still content="HTML, web
development, tutorial">
useful).
<meta Specifies the author of the <meta name="author"
name="author"> document. content="Biruk Gebru">

Open Graph Metadata

Department of Software Engineering, AASTU 20 of 25


Internet Programming I – SWEG3107 2018EC

Open Graph tags are used to improve how web pages appear when shared on social media platforms like
Facebook, LinkedIn, and X (Twitter).

Property Purpose / Example


Description
og:title Title displayed on <meta property="og:title" content="Learn HTML
social platforms. Step by Step">
og:description Summary shown <meta property="og:description" content="A
under the title. beginner-friendly guide to HTML.">

og:image URL of the image <meta property="og:image"


preview. content="[Link]">

og:url Canonical URL of <meta property="og:url"


the shared page. content="[Link]

Base Element

The <base> tag defines a base URL for all relative links within a document. It ensures that all internal links
reference the correct root location.

Example:

<base href="[Link]
<a href="[Link]">Contact Us</a> <!-- becomes
[Link] -->

Noscript Element

The <noscript> tag provides fallback content for users whose browsers do not support or have disabled
JavaScript.

Example:

<noscript>
<p>JavaScript is disabled in your browser. Some features may not work
properly.</p>
</noscript>

1.10. Advanced HTML5 Elements


HTML5 introduced several new elements that enhance interactivity, presentation, and meaning within
web pages — without relying heavily on JavaScript or external plugins. These advanced elements help
create richer user experiences and improve the structure and semantics of content.

<details> and <summary>

Department of Software Engineering, AASTU 21 of 25


Internet Programming I – SWEG3107 2018EC

The <details> element is used to create collapsible content sections that can be expanded or hidden
by the user. The <summary> tag defines the visible heading or label for that section.

Example:

<details>
<summary>Learn More About HTML5</summary>
<p>HTML5 introduces semantic, multimedia, and interactive elements
that enhance web development.</p>
</details>

Uses:

 FAQs or help sections.


 Showing and hiding additional information.
 Creating lightweight accordions without JavaScript.

<dialog> Element

The <dialog> tag defines a dialog box or popup window that can be opened or closed programmatically
or by the user.

Example:

<dialog id="infoDialog">
<p>Welcome to the course!</p>
<button
onclick="[Link]('infoDialog').close()">Close</button>
</dialog>

<button
onclick="[Link]('infoDialog').showModal()">Open
Dialog</button>

Attributes:
 open – displays the dialog by default.

 JavaScript methods: .show(), .showModal(), and .close() control dialog visibility.

<progress> and <meter>

Both elements visually represent numeric values, but they serve slightly different purposes.

Department of Software Engineering, AASTU 22 of 25


Internet Programming I – SWEG3107 2018EC

Element Purpose / Description Example


<progress> Displays task completion progress (e.g., file <progress value="60"
upload, form submission). max="100"></progress>

<meter> Represents a known measurement within a <meter value="0.7" min="0"


range (e.g., temperature, rating, or disk max="1">70%</meter>
usage).

<time> and <abbr>

These elements add semantic meaning to time and abbreviations.

Element Purpose / Description Example


<time> Represents a specific date, time, or duration, which <time datetime="2025-10-
can be machine-readable. 06">October 6, 2025</time>

<abbr> Defines an abbreviation or acronym, providing full <abbr title="HyperText Markup


meaning through the title attribute. Language">HTML</abbr>

Benefits:

 Improves accessibility and search engine understanding.


 Helps browsers and tools recognize time-based data or abbreviations.

<canvas> Introduction

The <canvas> element allows drawing graphics directly on a web page using JavaScript. It’s commonly
used for animations, games, and visualizations.

Example (Basic Rectangle and Circle):

<canvas id="myCanvas" width="200" height="150" style="border:1px solid


#000;"></canvas>

<script>
const canvas = [Link]('myCanvas');
const ctx = [Link]('2d');

// Draw rectangle
[Link] = "lightblue";
[Link](20, 20, 100, 50);

// Draw circle

Department of Software Engineering, AASTU 23 of 25


Internet Programming I – SWEG3107 2018EC

[Link]();
[Link](150, 75, 25, 0, 2 * [Link]);
[Link] = "orange";
[Link]();
</script>

Key Methods:

 fillRect(x, y, width, height) -> draws a rectangle.

 arc(x, y, radius, startAngle, endAngle) -> draws a circle or arc.

 fill() and stroke() –> fill or outline shapes with color.

1.11. Accessibility and Entities


Web accessibility ensures that websites are usable by everyone — including people with disabilities. HTML
provides several features and attributes that help create inclusive, readable, and user-friendly web pages.
Additionally, HTML entities allow special symbols to be displayed correctly in the browser.

Accessibility Best Practices

Accessibility focuses on making web content understandable and navigable for all users, especially those
using assistive technologies like screen readers.

Best Practice Purpose / Description Example


alt attribute Provides descriptive text for images, read <img src="[Link]" alt="AASTU
by screen readers or shown if the image University Logo">
fails to load.
label Links descriptive text to form controls, <label
element improving form accessibility. for="email">Email:</label>
<input type="email" id="email">
Semantic tags Using elements like <header>, <main>, <main><article><h2>News</h2></a
<article>, and <footer> gives structure rticle></main>
and meaning to web content.

Additional Tips:

 Use headings (<h1>–<h6>) in logical order.


 Ensure sufficient color contrast between text and background.
 Provide keyboard navigation support.

ARIA Basics

Department of Software Engineering, AASTU 24 of 25


Internet Programming I – SWEG3107 2018EC

ARIA (Accessible Rich Internet Applications) attributes improve accessibility in dynamic web content,
particularly when JavaScript updates the page without reloading.

Attribute Purpose / Description Example


role Defines the type or purpose of an element. <div role="navigation">...</div>
aria- Adds an accessible label to an element that <button aria-
label may lack visible text. label="Close">×</button>

aria- Hides content from assistive technologies. <span aria-hidden="true">*</span>


hidden

Note: ARIA should be used to enhance, not replace, proper semantic HTML.

HTML Entities

HTML entities are used to display special characters or symbols that might otherwise be interpreted as
code. They begin with an ampersand (&) and end with a semicolon (;).
Entity Displayed As Meaning / Usage
&lt; < Less-than symbol.
&gt; > Greater-than symbol.
&amp; & Ampersand character.
&copy; © Copyright symbol.
&nbsp; (non-breaking space) Prevents line breaks between words or elements.

Example:

<p>5 &lt; 10 &amp; 10 &gt; 5</p>


<p>&copy; 2025 Addis Ababa Science and Technology University</p>
<p>Use&nbsp;non-
breaking&nbsp;spaces&nbsp;to&nbsp;keep&nbsp;text&nbsp;together.</p>

Department of Software Engineering, AASTU 25 of 25

You might also like