Scribd
Upload
543 views10 pages

Semantic Tags

The document discusses semantic HTML elements and their purposes. Semantic elements clearly describe their meaning to browsers and developers, unlike non-semantic <div> and <span> elements. Common semantic elements include <form>, <table>, and <article>. The document then explains specific semantic elements like <section> for grouping thematically related content, <article> for independent content, <header> and <footer> for introductory and copyright information, and <nav> for navigation links.

Uploaded by

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

Semantic Tags

The document discusses semantic HTML elements and their purposes. Semantic elements clearly describe their meaning to browsers and developers, unlike non-semantic <div> and <span> elements. Common semantic elements include <form>, <table>, and <article>. The document then explains specific semantic elements like <section> for grouping thematically related content, <article> for independent content, <header> and <footer> for introductory and copyright information, and <nav> for navigation links.

Uploaded by

Adelina Davtyan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

SEMANTIC TAGS

Образец заголовка

1
What
Образец заголовка are Semantic Elements?
• A semantic element clearly describes its
meaning to both the browser and the developer.

• Examples of non-semantic elements: <div> and


<span> - Tells nothing about its content.

• Examples of semantic elements: <form>,


<table>, and <article> - Clearly defines its
content.

2 2
Semantic
Образец заголовка
Elements in HTML
Many web sites contain HTML code like: <div id="nav">
<div class="header"> <div id="footer"> to indicate
navigation, header, and footer.

In HTML there are some semantic elements that can be


used to define different parts of a web page:

• <article> • <main>
• <aside> • <mark>
• <details> • <nav>
• <figcaption> • <section>
• <figure> • <summary>
• <footer> • <time>
• <header> 3 3
HTML
Образец<section>
заголовка Element

• The <section> element defines a section in a document.


• According to W3C's HTML documentation: "A section is a
thematic grouping of content, typically with a heading."
• A web page could normally be split into sections for
introduction, content, and contact information.

4 4
HTMLзаголовка
Образец <article> Element
The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to
distribute it independently from the rest of the web site.

An <article> element can be used:

• Forum post
• Blog post
• Newspaper article

5 5
HTML header> Element
Образец<заголовка

The <header> element represents a container for introductory content or a set


of navigational links.

A <header> element typically contains:

• one or more heading elements (<h1> - <h6>)


• logo or icon
• authorship information

6
HTML заголовка
Образец <footer> Element
The <footer> element defines a footer for a document or section.
A <footer> element typically contains:
• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents
You can have several <footer> elements in one document.
7 7
HTMLзаголовка
Образец <nav> Element

The <nav> element defines a set of navigation links.

8 8
HTML <aside>
Образец заголовка Element

The <aside> element defines some content aside from the content it is placed in
(like a sidebar).

The <aside> content should be indirectly related to the surrounding content.

HTML <figure> and <figcaption> Elements


The <figure> tag specifies self-contained content, like illustrations, diagrams,
photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption>
element can be placed as the first or as the last child of a <figure> element.

The <img> element defines the actual image/illustration. 9 9


Образец заголовка

Thanks!

10

You might also like