Scribd
Upload
86 views

HTML Semantic Tags

Programming

Uploaded by

Liz Forastier
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
86 views

HTML Semantic Tags

Programming

Uploaded by

Liz Forastier
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML semantic tags

What is HTML?

HTML (Hypertext Markup Language) is the code used to structure a web page
and its content. For example, the content could be structured into a set of
paragraphs, a bulleted list, or use images and data tables.

HTML is a markup language that defines the structure of your content. HTML
consists of a series of elements that are used to enclose or wrap different parts
of content to make it look or act a certain way. Attached tags can hyperlink a
word or image to another place, can italicize words, can make font larger or
smaller, etc.

What is HTML Semantics?

The core characteristic of a semantic element is that it clearly communicated its


meaning to both the developer and the browser. These elements clearly define
its content.

Why Do You Need to Use Semantic Tags in HTML?

The are several advantages of using semantics tags in HTML:

• The semantic HTML tags help the search engines and other user devices
to determine the importance and context of web pages.
• The pages made with semantic elements are much easier to read.
• It has greater accessibility. It offers a better user experience.

HTML Semantic Tag Structure

The following HTML tags can be used to break your page into identified parts:
• <header>: It defines a header for a web page.
• <nav>: It defines a container for navigation links.
• <section>: This defines a section in a web page.
• <article>: This element contains the main part, containing information
about the web page.
• <aside>: The <aside> content is often placed as a sidebar in a
document.
• <footer>: It defines a footer for a document or a section.
SEMANTIC TAGS CHART

TAGS EXPLANATION
<nav> It is used to designate a section of a web
page that contains navigation links or menus.
<article> It is used to define a self-contained piece of
content within a web page. It can contain
various types of content, including text,
images, videos, or other multimedia
elements.
<section> It defines sections of a web page. Each
section typically represents a distinct
thematic or conceptual grouping of content.
<aside> It is often used for elements such as
sidebars, advertisements, author information,
related links, or other content that is not
directly part of the main content flow but
provides additional context or enhancements
to the page.
<header> The <header> element defines the header
section of a web page or a specific section
within a document. It is typically used to
encapsulate introductory content or the
topmost part of a web page, such as the site
logo, navigation menu, page title, or any
other relevant information that appears at the
top of the page.
<footer> It defines the footer section of a web page or
a specific section within a document. It is
commonly used to provide additional
information, copyright notices, contact
details, or navigation links that appear at the
bottom of a page.
<address> It is used to define a section that contains
contact information. It is typically used to
provide details such as the physical address,
phone number, email address, or other
contact information.
<main> It represents the primary content area of a
web page, excluding any headers, footers,
sidebars, or navigation elements. According
to the HTML specification, there should be
only one <main> element per document.

ACTIVITY: TEST
Choose the correct option

Which HTML tag is used to represent the main content of a webpage?

<section>
<main>
<body>
<content>
<article>

What is the purpose of the <header> tag?

It represent introductory content at the top of a section or article.


It specifies a section that contains contact information.
It represents the heading of a webpage.
It defines a container for the navigation links.

What does the <nav> tag represent?

It represents a figure or illustration.


It defines a block of performatted text.
It defines a section that contains important details.
It specifies a section that contains navigation links.

What is the purpose of the <footer> tag?

It specifies a section that contains a sidebar or addicional information.


It defines a container for the main content.
It represents a highlighted or emphasized text.
It represents the footer of a webpage.

What is the purpose of the <aside> tag?

It defines a table of content.


It defines a hyperlink.
It represent a sidebar or additional content.
It specifies a line break.

You might also like