1. Semantic Tags

์˜๋ฏธ์žˆ๋Š” ๋งˆํฌ์—…(Semantic Tags)

์‹œ๋งจํ‹ฑ ๋งˆํฌ์—…์ด๋ผ๊ณ ๋„ ํ•˜๋Š” ์‹œ๋งจํ‹ฑ HTML์€ ๊ทธ ์•ˆ์— ํฌํ•จ๋œ ์ฝ˜ํ…์ธ ์˜ ์˜๋ฏธ ๋˜๋Š” ์‹œ๋งจํ‹ฑ์„ ์ „๋‹ฌํ•˜๋Š” HTML ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค. ์‹œ๋งจํ‹ฑ์œผ๋กœ ์ž‘์„ฑํ•˜๋ฉด ํŽ˜์ด์ง€์˜ ์—ฌ๋Ÿฌ ๋ถ€๋ถ„์˜ ์—ญํ• ๊ณผ ์ƒ๋Œ€์  ์ค‘์š”์„ฑ์„ ์ •์˜ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜๋Š” ์ถ”๊ฐ€ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋‹ค.

์›น ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ ๋ชจ๋“  ๊ฒƒ์„ div ํƒœ๊ทธ๋กœ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, div ํƒœ๊ทธ๋กœ๋งŒ ์ž‘์„ฑํ•˜๋‹ค๋ณด๋ฉด ํ™”๋ฉด์˜ ์–ด๋А ๋ถ€๋ถ„์ด ์ฝ”๋“œ์— ์–ด๋–ค ๋ถ€๋ถ„์ธ์ง€ ์ฐพ๊ธฐ ๋ชจํ˜ธํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋˜๋„๋ก์ด๋ฉด ์˜๋ฏธ์žˆ๋Š” ๋งˆํฌ์—…์„ ์‚ฌ์šฉํ•˜์ž๋Š” ์ด์•ผ๊ธฐ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, <header>, <article>, <footer> ์™€ ๊ฐ™์€ ํƒœ๊ทธ๋Š” ์‹œ๋งจํ‹ฑ HTML ํƒœ๊ทธ์ด๋‹ค. ์ด๋Ÿฌํ•œ ํƒœ๊ทธ๋Š” ํฌํ•จ๋œ ์ฝ˜ํ…์ธ ์˜ ์—ญํ• ์„ ๋ช…ํ™•ํ•˜๊ฒŒ ๋‚˜ํƒ€๋‚ธ๋‹ค.

๋ฐ˜๋ฉด์— <div> ๋ฐ <span> ๊ณผ ๊ฐ™์€ ํƒœ๊ทธ๋Š” ๋น„์‹œ๋งจํŠธ ํƒœ๊ทธ์˜ ๋Œ€ํ‘œ์ ์ธ ์˜ˆ์ด๋‹ค. ์ด๋Ÿฌํ•œ ํƒœ๊ทธ๋Š” ์ฝ˜ํ…์ธ  ๋ณด์œ ์ž ์—ญํ• ๋งŒ ํ•  ๋ฟ, ํฌํ•จ๋œ ์ฝ˜ํ…์ธ ์˜ ์œ ํ˜•์ด๋‚˜ ํŽ˜์ด์ง€์—์„œ ํ•ด๋‹น ์ฝ˜ํ…์ธ ๊ฐ€ ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜์ง€ ์•Š๋Š”๋‹ค.

์™œ ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”๊ฐ€

์ฝ”๋“œ๋ฅผ ๊ฒ€ํ† ํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋‹ค๋Š” ๋ช…๋ฐฑํ•œ ์ด์œ  ์™ธ์—๋„ ํ•ญ์ƒ ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋ฅผ ์ง€ํ–ฅํ•ด์•ผ ํ•˜๋Š” ์ด์œ ๊ฐ€ ์žˆ๋‹ค.

Accessibility

์ผ๋ฐ˜ ์‚ฌ์šฉ์ž์˜ ๊ฒฝ์šฐ ์›นํŽ˜์ด์ง€์˜ ๋‹ค์–‘ํ•œ ๋ถ€๋ถ„์„ ์‰ฝ๊ฒŒ ์‹๋ณ„ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋จธ๋ฆฌ๊ธ€, ๋ฐ”๋‹ฅ๊ธ€, ์ฃผ์š” ์ฝ˜ํ…์ธ ๊ฐ€ ๋ชจ๋‘ ์‹œ๊ฐ์ ์œผ๋กœ ์ฆ‰์‹œ ๋ˆˆ์— ๋“ค์–ด์˜จ๋‹ค.

ํ•˜์ง€๋งŒ ์‹œ๊ฐ ์žฅ์• ๊ฐ€ ์žˆ๊ฑฐ๋‚˜ ์Šคํฌ๋ฆฐ ๋ฆฌ๋”์— ์˜์กดํ•˜๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ๋Š” ์‰ฝ์ง€ ์•Š๋‹ค. HTML ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋ฅผ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์‚ฌ์šฉํ•˜๋ฉด ํ™”๋ฉด ๋ฆฌ๋”๊ฐ€ ์ฝ˜ํ…์ธ ๋ฅผ ๋” ์ •ํ™•ํ•˜๊ฒŒ ์ „๋‹ฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด๋Ÿฌํ•œ ๋…์ž๊ฐ€ ์ฝ˜ํ…์ธ ๋ฅผ ๋” ์ž˜ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.

SEO

์‹œ๋งจํ‹ฑ HTML ํƒœ๊ทธ๋Š” ํƒœ๊ทธ ๋‚ด์—์„œ ์ฝ˜ํ…์ธ ์˜ ์—ญํ• ์„ ๋‚˜ํƒ€๋‚ด๋ฏ€๋กœ SEO(๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”)์— ์ค‘์š”ํ•˜๋‹ค.

์ด ์ •๋ณด๋ฅผ ํ†ตํ•ด Googlebot๊ณผ ๊ฐ™์€ ๊ฒ€์ƒ‰ ์—”์ง„ ํฌ๋กค๋Ÿฌ๋Š” ์ฝ˜ํ…์ธ ๋ฅผ ๋” ์ž˜ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ฝ˜ํ…์ธ ๊ฐ€ ๊ฒ€์ƒ‰ ์—”์ง„ ๊ฒฐ๊ณผ ํŽ˜์ด์ง€(SERP)์—์„œ ๊ด€๋ จ ํ‚ค์›Œ๋“œ์— ๋Œ€ํ•œ ์ˆœ์œ„ ํ›„๋ณด๋กœ ์„ ์ •๋  ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์•„์ง„๋‹ค. ์ฆ‰, ์‹œ๋งจํ‹ฑ HTML์ด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๊ตฌํ˜„๋œ ํŽ˜์ด์ง€๋Š” ๊ทธ๋ ‡์ง€ ์•Š์€ ํŽ˜์ด์ง€์— ๋น„ํ•ด SEO์—์„œ ์œ ๋ฆฌํ•˜๋‹ค.

Site Audit ์™€ ๊ฐ™์€ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ SEO์— ์˜ํ–ฅ์„ ๋ฏธ์น  ์ˆ˜ ์žˆ๋Š” HTML ํƒœ๊ทธ ๋ฌธ์ œ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ๋‹ค.

site-audit-1
site-audit-2
site-audit-3
site-audit-4

์‹œ๋งจํ‹ฑ ํƒœ๊ทธ์˜ ๋‘๊ฐ€์ง€ ๋ฒ”์ฃผ

๊ตฌ์กฐ(๋ ˆ์ด์•„์›ƒ) ์ „๋‹ฌ

๋ ˆ์ด์•„์›ƒ์„ ์ „๋‹ฌํ•˜๋Š” ํƒœ๊ทธ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

  • <header>

  • <nav>

  • <main>

  • <article>

  • <section>

  • <area>

  • <aside>

  • <footer>

ํƒ์ŠคํŠธ ์ „๋‹ฌ

  • <h1>: heading

  • <h2~h6>: subheading

  • <p>: paragraph

  • <a>: anchor

  • <ol>: ordered list

  • <ul>: unordered list

  • <q>: for long, multiline quotations

  • <blockquote>: for shorter, inline quotations

  • <em>: emphasis

  • <strong>: strong emphasis

  • <code>: A block of computer code.

๊ทธ ์™ธ๋กœ

  • b, summary, time, address, video, audio, img, legend, picture, button dl, dt, dd, caption..

์ฐธ๊ณ 

Semantic HTML: What It Is and How to Use It Correctly

Last updated