๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ–ฅ๏ธ ํ”„๋ก ํŠธ์—”๋“œ/HTML&CSS

HTML5 ์˜๋ฏธ๋ก ์  ํƒœ๊ทธ

by OR15A 2023. 11. 22.

 

HTML5์—์„œ ๋„์ž…๋œ ์˜๋ฏธ๋ก ์ (semantic) ํƒœ๊ทธ๋“ค์€ ์›น ํŽ˜์ด์ง€์˜ ๊ฐ ๋ถ€๋ถ„์ด ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š”์ง€ ๋ช…ํ™•ํ•˜๊ฒŒ ์ •์˜ํ•˜๋ฉฐ, ์›น์‚ฌ์ดํŠธ์˜ ์ ‘๊ทผ์„ฑ์„ ๊ฐœ์„ ํ•˜๊ณ , ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO)์—๋„ ๋„์›€์„ ์คŒ.

 

HTML5์—์„œ ํ”ํžˆ ์‚ฌ์šฉ๋˜๋Š” ์˜๋ฏธ๋ก ์  ํƒœ๊ทธ ์˜ˆ์‹œ

  • <header>
    • : ํŽ˜์ด์ง€๋‚˜ ์„น์…˜์˜ ๋จธ๋ฆฌ๊ธ€์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ๋ณดํ†ต ๋กœ๊ณ , ์ œ๋ชฉ, ๋„ค๋น„๊ฒŒ์ด์…˜ ๋งํฌ ๋“ฑ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.
  • <nav>
    • : ๋„ค๋น„๊ฒŒ์ด์…˜ ๋งํฌ๋ฅผ ์œ„ํ•œ ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. ์ฃผ ๋ฉ”๋‰ด, ๋ชฉ์ฐจ, ์ƒ‰์ธ ๋“ฑ์˜ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋งํฌ๋ฅผ ๊ฐ์‹ธ๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
  • <article>
    • : ๋…๋ฆฝ์ ์œผ๋กœ ๊ตฌ๋ถ„๋˜๊ฑฐ๋‚˜ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋‚ด์šฉ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋ธ”๋กœ๊ทธ ๊ธ€์ด๋‚˜ ๋‰ด์Šค ๊ธฐ์‚ฌ, ํฌ๋Ÿผ ๊ฒŒ์‹œ๋ฌผ ๋“ฑ์ด ์ด์— ํ•ด๋‹นํ•ฉ๋‹ˆ๋‹ค.
  • <section>
    • : ๋ฌธ์„œ๋‚˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋…๋ฆฝ์ ์ธ ์„น์…˜์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ๊ฐ ์„น์…˜์€ ์ฃผ๋กœ ํ•œ ์ฃผ์ œ์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.
  • <aside>
    • : ๋ณธ๋ฌธ๊ณผ ๊ฐ„์ ‘์ ์œผ๋กœ ๊ด€๋ จ๋œ ๋‚ด์šฉ์„ ์œ„ํ•œ ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. ์‚ฌ์ด๋“œ๋ฐ”, ๊ด‘๊ณ , ์‚ฌ์ด๋“œ ๋ฉ”๋‰ด ๋“ฑ์„ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
  • <footer>
    • : ํŽ˜์ด์ง€๋‚˜ ์„น์…˜์˜ ๋ฐ”๋‹ฅ๊ธ€์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ์ €์ž‘๊ถŒ ์ •๋ณด, ์—ฐ๋ฝ์ฒ˜ ์ •๋ณด, ๋ฐฑ ๋งํฌ ๋“ฑ์„ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • <figure> ๋ฐ <figcaption>
    • : ์ด๋ฏธ์ง€, ๋„ํ‘œ, ์ฝ”๋“œ ๋ชฉ๋ก ๋“ฑ์˜ ์ž์ฒด์ ์ธ ์ปจํ…์ธ ๋ฅผ <figure>๋กœ ๊ฐ์‹ธ๊ณ , ํ•ด๋‹น ์ปจํ…์ธ ์— ๋Œ€ํ•œ ์„ค๋ช…์„ <figcaption>์œผ๋กœ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
  • <main>
    • : ์›น ํŽ˜์ด์ง€์˜ ์ฃผ์š” ์ฝ˜ํ…์ธ ๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ํ•œ ๋ฌธ์„œ์— ํ•˜๋‚˜์˜ <main> ํƒœ๊ทธ๋งŒ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.