Introduction to HTML (2)
Edgar Chia-Han Lin
Asia University
Outline
• What is the Semantic Tag?
• How to use the Semantic Tag?
• How to create a table?
What is the Semantic Tag?
• Simplify the way to edit and maintain of the web
page
• SEO (Search Engine Optimization)
What is the Semantic Tag?
• Semantic Tag v.s. Physical Tag
• Invisible / Visible
What is the Semantic Tag?
<header>
<nav>
<section>
<aside>
<article>
<footer>
What is the Semantic Tag?
• The <div> tag is used to group the related
components
• <div class=“header”>……</div>
• <div class=“article”>……</div>
• <div class=“footer”>……</div>
How to use the
Semantic Tag?
<header>
• Group the site's intro, banners, navigation bars,
or advertisements together
• Please do not confuse with <head> or heading
(<h1> …)
<nav>
• Navigation Bar
• work with lists or hyperlinks
• in <header>
<footer>
• At the bottom of the page
• copyright, social media links or contact
information
Other Semantic Tags
• article
• aside
• main
• section
Other Semantic Tags
• figure
• figcaption
Other Semantic Tags
• Time
Other Semantic Tags
• details / summary
• mark
Table
Table
• Table
• Thead
• Tbody
• Tfoot
• tr
• td: data cell
• regular and left-aligned
• th: head cell
• bold and centered
Conclusions
• The meaning and usage of Semantic Tags
• The usage of Table
Semantic Tags
• article
• aside
• figure
• footer
• header
• main
• nav
• section
Semantic Tags
• details
• summary
• figcaption