Scribd
Upload
28 views19 pages

04 Introduction To HTML

The document discusses semantic tags and how to use them in HTML. It explains common semantic tags like header, nav, footer, article, aside, and section and how they are used to group related page elements. It also covers how to create tables using table tags.

Uploaded by

6213044
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
28 views19 pages

04 Introduction To HTML

The document discusses semantic tags and how to use them in HTML. It explains common semantic tags like header, nav, footer, article, aside, and section and how they are used to group related page elements. It also covers how to create tables using table tags.

Uploaded by

6213044
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
You are on page 1/ 19

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

You might also like