Nov 29

HTML Tags
Syed Muhammad Jawad
SE120212142
 Table of contents

Semantic
01
Elements

02 Non-Semantic Elements

2
01
Semantic
Elements
• A semantic element clearly describes its meaning
to both the browser and the developer.
• In HTML, for example, the h1 element is a
semantic element, which gives the text it wraps
around the role (or meaning) of "a top level
heading on your page
• Example

<h1>This is a top level heading</h1>

4
In HTML there are some semantic elements that can be used to define
different parts of a web page.

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

5
6
 <aside>: The Aside element

The <aside> HTML element represents a portion of a document whose content is only indirectly
related to the document's main content. Asides are frequently presented as sidebars or call-out
boxes.

<aside> <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p></aside>

7
 <section>:Section element
The <section> HTML element represents a generic standalone section of a document,
which doesn't have a more specific semantic element to represent it. Sections should
always have a heading, with very few exceptions

<h1>Choosing an Apple</h1>
<section>
<h2>Introduction</h2>
<p>This document provides a guide to help with the important task of choosing the correct
Apple.</p>
</section>
<section>
<h2>Criteria</h2>
<p> There are many different criteria to be considered when choosing an Apple — size, color,
firmness, sweetness, tartness... </p>
</section>

8
OUT PUT

9
 <header>

The <header> HTML element represents introductory content, typically

a group of introductory or navigational aids. It may contain some
heading elements but also a logo, a search form, an author name, and
other elements.

<header>
<a class="logo" href="#">Cute Puppies Express!</a>
</header>

10
<nav>: The Navigation element

The <nav> HTML element represents a section of a page whose purpose is to provide
navigation links, either within the current document or to other documents. Common
examples of navigation sections are menus, tables of contents, and indexes.

<nav class="crumbs">
<ol>
<li class="crumb"><a href="#">Bikes</a>
</li> <li class="crumb"><a href="#">BMX</a></li>
<li class="crumb">Jump Bike 3000</li>
</ol>
</nav>
<h1>Jump Bike 3000</h1>
<p> This BMX bike is a solid step into the pro world. It looks as legit as it rides and
is built to polish your skills.</p>

11
OUT PUT

12
 <footer>
The <footer> HTML element represents a footer for its nearest ancestor
sectioning content or sectioning root element. A <footer> typically contains
information about the author of the section, copyright data or links to related
documents.

<article>
<h1>How to be a wizard</h1>
<ol>
<li>Grow a long, majestic beard.</li>
<li>Wear a tall, pointed hat.</li>
<li>Have I mentioned the beard?</li>
</ol>
<footer>
<p>© 2018 Gandalf</p>
</footer>
</article>

13
OUT PUT

14
 Benefits

•Search engines will consider its contents as important keywords to

influence the page's search rankings (see SEO)
•Screen readers can use it as a signpost to help visually impaired users
navigate a page
•Finding blocks of meaningful code is significantly easier than searching
through endless divs with or without semantic or namespaced classes
•Suggests to the developer the type of data that will be populated
•Semantic naming mirrors proper custom element/component naming

15
 02
Non-Semantic
Elements
 Non-semantic elements are used to create structure and presentation for
web pages. They don't provide any information about the content of the
web page. They are used to define sections of a web page and apply styles
to the content.

17
Examples of Non-Semantic Elements

The two most commonly used non-semantic elements are:

• <div>
• <span>

18
19
 The <div> Tag

The <div> element is one of the most commonly used non-semantic elements in HTML. It is used to
group content together and apply styles to the content. For example, you could use
the <div> element to group all the content on your web page together and apply a background color
to it. Here's an example of how the <div> element could be used:

20
Example
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>

<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>

</body>
</html>
21
OUT PUT

22
The <span> Tag

The <span> element is another commonly used non-semantic element in HTML. It is used to apply
styles to specific parts of the content, such as text or images. For example, you could use
the <span> element to apply a different color to a specific word in a sentence. Here's an example of how
the <span> element could be used:

23
Example

<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>
<span style="color:blue;font-weight:bold">Fahad</span>
complaint the HOD about
<span style="color:darkolivegreen;fontweight:bold">teacher.</span>
</p>
</body>
</html>

24
OUT PUT

25
26
Thanks!

27