HTMLํ๊ทธ (Tags) ์ ์์ฑ (attribute)
ํ๊ทธ(Tag)๋ <> ๊ธฐํธ๋ก ๊ตฌ์ฑ๋๋ค.
์์ฑ ๊ท์น์, ํ ์คํธ(Content)์ ์ ๋ค์ ๋ชจ๋ ์์ฑํ์ฌ ๋ง์น ํด๋น ํ ์คํธ๋ฅผ ๊ฐ์ธ๋ ๊ฒ์ฒ๋ผ ์์ฑํ๋ค,
<tag name> content </tag name>
ํ๊ทธ์ content๊น์ง ๋ค ํฉ์ณ ์ฐ๋ฆฌ๋ ์์๋ผ๊ณ ํ๋ค.
HTML ํ๊ทธ๋ 100์ฌ๊ฐ ์ด์ ์กด์ฌ, ๊ทธ ์ค์์ ์์ฃผ ์ฌ์ฉ๋๋ ํ๊ทธ๋ ์๋์ ๊ฐ๋ค.
๋งํฌ : https://www.advancedwebranking.com/seo/html-study
HTML Study - AWR SEO Guide
This study looks at 11 mm index pages gathered from Top 20 Google results to uncover how people write HTML markup as new web tech emerge.
www.advancedwebranking.com
ํ๊ทธ๋ ์์ฑ์ ๊ฐ์ง๋ค.
๊ฐ๊ฐ์ ํ๊ทธ๋ค์ ์์ฑ(attribute)์ ๊ฐ์ง๋๋ฐ, ์์ฑ์ Tag๋ณ๋ก ๊ณ ์ ํ ์๋ ์๊ณ , ๊ณตํต ๋ ์๋ ์๋ค.
์ด๋ฌํ ์์ฑ๋ค์ ๊ฐ Tag๋ณ ๊ธฐ๋ฅ์ด๋ ๋ถ๊ฐ ์ต์ ์ ์ ๊ณตํ๊ธฐ ์ํ ์ฉ๋๋ก ์ฌ์ฉ๋๋ค.
<tag name attribute = "value"> content </tag name>
href ์์ฑ
ex)
<a href = "www.naver.com"> go to Never web </a>
ํ๊ทธ ์ข ๋ฅ์ ๊ธฐ๋ฅ ๊ทธ๋ฆฌ๊ณ ์์ฑ
<<๊ธฐ๋ฅ์ ๊ฐ์ง ํ๊ทธ(Functional Tags):>>
<h1> -- <h6> ํ๊ทธ
6 ๋จ๊ณ๋ก ๊ตฌํ ์ ๋ชฉ์ ํ์ํฉ๋๋ค. ๊ฐ๊ฐ ํฌ๊ธฐ๊ฐ ๋ค๋ฆ ๋๋ค. ์ฃผ๋ก ์ ๋ชฉ์ ์ด์ฉ๋๋ฉฐ, ํ ํ์ด์ง๋น h1 ํ๋๋ง ์ฌ์ฉ๋๋ ๊ฒ์ ๊ถ์ฅํ๊ณ ์๋ค.
<a> ํ๊ทธ
->
์์ฑ :
href : <a href = "www.naver.com"> go to Never web </a>
<img> ํ๊ทธ
์์ฑ:
src :
<form> ํ๊ทธ
-> ํผ(Form)์ด๋ ๋ณดํต ์ฌ์ฉ์์์ ์ํธ์์ฉ์ ์ํด ์ฌ์ฉ์์ ์ ๋ ฅ์ ๋ฐ๋ ํ๊ทธ์ด์ ์ข ๋ฅ๋ฅผ ๊ฐ๋ฅดํจ๋ค.
์ฃผ๋ก <input> ํ๊ทธ์ ๊ฐ์ด ์ฐ์ธ๋ค.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
* ์ฌ๊ธฐ์ <br> ํ๊ทธ๋ ์ค ๋ฐ๊ฟ ํ๊ทธ์ด๋ค. ์ค์ ๋ฐ๊ฟ ์ ์๋ค. ์์ด ์์ฑ์ ๋๋ํ ์ ํ๋ ์ํฉ์ด ๋์จ๋ค.
<Input> ํ๊ทธ
-> ์ ๋ ฅ์ ๋ฐ๋ ํ๊ทธ ์ข ๋ฃ ํ๊ทธ๊ฐ ์๋ค.
<button> ํ๊ทธ
->
<<์๋ฏธ๋ง ๊ฐ์ง๊ณ ์๋ ํ๊ทธ(Semantic Tags):>>
<div> ํ๊ทธ
<p> ํ๊ทธ
<header> ํ๊ทธ
<nav> ํ๊ทธ
<main> ํ๊ทธ
<section> ํ๊ทธ
<footer> ํ๊ทธ