FrontEnd/HTML

[HTML] ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ(Semantic Tag)

devwoodie 2022. 4. 19. 15:26
728x90
๋ฐ˜์‘ํ˜•

๐Ÿ“‹ ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ(Semantic Tag) ๋ž€?

semantic์€ '์˜๋ฏธ๋ก ์ ์ธ'์ด๋ผ๋Š” ๋œป์„ ๊ฐ€์ง„ ํ˜•์šฉ์‚ฌ์ด๋‹ค.
๋”ฐ๋ผ์„œ ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋ž€ ์˜๋ฏธ๊ฐ€ ์žˆ๋Š” ํƒœ๊ทธ๋ฅผ ๋งํ•œ๋‹ค.


โœ” ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ์˜ ์žฅ์ 

1. ๊ฒ€์ƒ‰์—”์ง„์ตœ์ ํ™”(SEO)
๊ฒ€์ƒ‰์—”์ง„์€ ํƒœ๊ทธ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํŽ˜์ด์ง€ ๋‚ด ๊ฒ€์ƒ‰ ํ‚ค์›Œ๋“œ์˜ ์šฐ์„ ์ˆœ์œ„๋ฅผ ํŒ๋‹จํ•œ๋‹ค. ๊ฒ€์ƒ‰์—”์ง„์ด ํƒœ๊ทธ์˜ ๋ชฉ์ ์— ๋ถ€ํ•ฉํ•˜๊ฒŒ ์„ค๊ณ„๋˜์–ด์žˆ๋Š” ๊ตฌ์กฐ์˜ ์‚ฌ์ดํŠธ์—์„œ ํšจ์œจ์ ์œผ๋กœ ์ •๋ณด๋ฅผ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ์–ด ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ์˜ ๋…ธ์ถœ์— ์œ ๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค.

2. ์›น์ ‘๊ทผ์„ฑ
์ผ๋ฐ˜์ ์ธ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์ฐจ์ด๊ฐ€ ์—†์ง€๋งŒ ์‹œ๊ฐ์žฅ์• ์ธ์„ ์œ„ํ•œ ์›น์„œํ•‘ ํ”„๋กœ๊ทธ๋žจ ๋“ฑ๊ณผ ๊ฐ™์€ ํ™˜๊ฒฝ์—์„œ๋Š” ์›น์ ‘๊ทผ์„ฑ์„ ํ–ฅ์ƒ์‹œ์ผœ์ค€๋‹ค.

3. ์œ ์ง€๋ณด์ˆ˜
๋งŽ์€ divํƒœ๊ทธ์˜ ์‚ฌ์šฉ์œผ๋กœ ๊ด€๋ฆฌ๊ฐ€ ์–ด๋ ค์›Œ์ง€๋Š” ๋ฌธ์ œ์ ์—์„œ ๋ฒ—์–ด๋‚˜ ํƒœ๊ทธ์˜ ์ด๋ฆ„๋งŒ ๋ณด๊ณ ๋„ ์–ด๋–ค ์˜์—ญ์ธ์ง€ ๋ฐ”๋กœ ํ™•์ธ์ด ๊ฐ€๋Šฅํ•˜๋ฉฐ ํŠน์„ฑ์— ๋งž๋Š” ์ž‘์—…์„ ๊ตฌ๋ถ„ํ•˜์—ฌ ์ง„ํ–‰ํ•˜๊ธฐ์— ์šฉ์ดํ•˜๋‹ค.


โœ” ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ์˜ ์ข…๋ฅ˜

  • <header> : ๋จธ๋ฆฌ๊ธ€, ์ œ๋ชฉ
  • <nav> : ๋„ค๋น„๊ฒŒ์ด์…˜, ๋ชฉ์ฐจ, ๋ฆฌ์ŠคํŠธ
  • <aside> : ์ขŒ์ธก๊ณผ ์šฐ์ธก ์‚ฌ์ด๋“œ ์œ„์น˜ ๊ณต๊ฐ„
  • <section> : ์ฃผ์ œ, ์นดํ…Œ๊ณ ๋ฆฌ ๋ณ„ ์„น์…˜
  • <article> : ๊ธฐ์‚ฌ, ๋ธ”๋กœ๊ทธ ๋“ฑ ์ฒต์ŠคํŠธ ์œ„์ฃผ์˜ ํŽ˜์ด์ง€ ๊ตฌ์„ฑ
  • <footer> : ๋ฐ”๋‹ฅ๊ธ€, ๋ฌธ์„œ ํ•˜๋‹จ
  • <main> : ๋ฌธ์„œ์˜ ์ค‘์‹ฌ ์ฃผ์ œ, ์ฃผ์š” ๋‚ด์šฉ
  • <figure> : ์ด๋ฏธ์ง€, ๋‹ค์ด์–ด๊ทธ๋žจ, ์‚ฌ์ง„ ๋“ฑ
  • <figcaption> : <figure> ์š”์†Œ์˜ ์„ค๋ช…
728x90
๋ฐ˜์‘ํ˜•