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 ํ๊ทธ ๋ฌธ์ ๋ฅผ ์ฐพ์ ์ ์๋ค.




์๋งจํฑ ํ๊ทธ์ ๋๊ฐ์ง ๋ฒ์ฃผ
๊ตฌ์กฐ(๋ ์ด์์) ์ ๋ฌ
๋ ์ด์์์ ์ ๋ฌํ๋ ํ๊ทธ๋ ์๋์ ๊ฐ๋ค.
<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..
์ฐธ๊ณ
Last updated