<!DOCTYPE html> //이 문서가 html 문서임을 명시
<html> //html 시작 태그로 문서 전체의 틀을 구성
<head> //head 태그는 문서의 메타데이터를 선언
<title>Page title</title> //문서의 제목, 브라우저의 탭에 보여진다.
</head> //</태그이름>은 해당태그가 끝났음을 의미
<body> //body 태그는 문서의 내용을 담는 곳
<h1>Hello world</h1> //heading을 의미하며 크기에 따라 h1부터 h6 까지 있다.
<div>Contets here //content division을 의미하며 줄바꿈 된다.
<span>Here too!</span> //줄바꿈이 없는 content 컨테이너
</div> //div 태그가 끝났음을 의미한다.
</body> //body 태그가 끝났음을 의미한다.
</html> //html 태그가 끝났음을 의미한다.
<img src="codestates-logo.png"></img>
<img src="codestates-logo.png" />
<div>div 태그는 한줄을 차지합니다.</div>
<div>division 2</div>
<span>span 태그는 컨텐츠 크기만큼 공간을 차지합니다.</span>
<span>span 2</span>
<span>span 3</span>
<div>division 3</div>
<img src="http://i.imgur.com/JVAto.jpg>
<a href="http://abcdef.com" target="_blank">abcdef</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 has nested list
<ul>
<li>Item 3-1</li>
</ul>
</li>
</ul>
<input type="text" placeholder="type here">
<div>
<input type="radio" name="choice" value="a"> a
<input type="radio" name="choice" value="b"> b
</div>
<textarea></textarea>
<div>
<input type="checkbox" checked> checked
<input type="checkbox"> unchecked
</div>
<button>submit</button>
시멘틱(semantic) 요소란 그 자체에 의미를 가지고 있는 요소를 말한다. 즉 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다.
시멘틱 요소가 아닌 div, span 요소 등은 해당 요소가 무슨 내용인지는 내부 코드를 봐야 알 수 있다. 그에 비해 시멘틱 요소인 form, table, img 요소는 코드를 보지 않아도 해당 요소가 이름만 봐도 바로 알 수가 있다.
<article>
: 독립적이고 자체 포함된 콘텐츠를 지정한다.<aside>
: 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소이며 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용된다.<footer>
: 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용한다.<header>
: 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며 사이트의 제목이 보통 들어가며 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다.<nav>
: 내비게이션(navigation)의 약자로 일반적으로 상단바 등 사이트를 안내하는 요소에 사용되며 보통은 안에 <ul>
을 넣어 목록 형태로 사용한다.<main>
: 문서의 주된 콘텐츠를 표시한다.id
: 고유한 이름을 붙일때
class
: 반복되는 영역을 유형별로 분류할 때. 즉 비슷한 태그들을 같은 class로 지정해 줄 수 있다. 하나의 태그에 2개 이상의 class를 부여하고 싶을 때는 스페이스바로 구분 짓는다. 아래 예시에서 input은 2개의 class를 가진다.
html 태그 | Selector |
---|---|
<div id="writing-section" | div#writing-section |
<li class\"comment" | li.comment |