HTML?
-웹 브라우저 환경의 베이스
HTML은 웹 페이지를 위한 지배적인 mark up 언어로 브라우저를 통해 보는 모든 것들은 HTML 태그의 결과물이다.
웹페이지를 통해서 전달하고자 하는 모든 정보컨텐츠의 집합체이기 때문에 문서의 구조와 정보 위계가 명확하게 보이는 HTML코드 작성이 중요하다.
이를 '시맨틱(Semantic)하게 Mark up한다'고 표현한다.
웹 사이트에서 css를 제거해 HTML의 구조를 확인할 수 있다
시맨틱한 마크업은 왜 필요한가
-개발자와 브라우저 모두를 위해
1.검색 엔진 최적화(SEO, Search Engine Optimization)
브라우저가 정보의 위계질서를 파악할 때 자연어가 아닌 HTML의 마크업을 참고하기 때문에 정보의 중요도를 감안하지 않은 마크업은 해당 웹사이트의 노출에 악영향을 주게된다.
2.정보 가시성 향상
코드를 수정할 때 중요도를 포함하지 않은 태그로 지저분하게 도배됐을 경우 브라우저 뿐 아니라 개발자의 혼란도 야기할 수 있다.
3.접근성
스크린 리더와 브라우저가 코드를 더 쉽게 해석할 수 있게 해 모바일 장치와 시각장애인의 웹 페이지 접근성을 향상시킬 수 있다.
이미지 삽입으로 이해하는 시맨틱 웹과 태그
<img alt="">,<div>&background-image
콘텐츠로서의 의미가 있다면 검색 엔진 최적화를 위해 html내에서 img태그를 활용해 메타데이터로 인식시킨다.
반면 단순 디자인을 위한 이미지일 경우 div태그와 css의 background-image를 활용해 웹이 이를 인식하지 못하도록 한다.
데이터로서의 의미 여부를 잘 판단한 후 시맨틱한 웹을 구축하자.
주요 요소
•<h1>~<h6> 순서대로 높은 중요도와 폰트 크기를 부여하는 제목 관련 요소
•<p> paragraph 문단 태그
•<emp> 중요도 부여 강조(흘려쓰기)
•<i>흘려쓰기
•<strong> 중요도 부여 강조(굵게)
•<b> 굵게
•<u> 밑줄
•<div> 줄 전체 차지(block level)
•<span> 내용물 만큼의 공간만 차지(inline level)
•<q> 문장 내 인용문 사용
•<blockquote> 문단 혹은 내용 전체 인용문 사용
•<li> list(ul ol 의 자식요소)
•<ul> unordered list
•<ol> ordered list
속성 attribute
태그의 동작을 제어하기 위해 "여는 태그" 안에 사용되는 특수 용어로 추가적인 정보를 제공하며 일부 태그는 속성을 반드시 필요로 한다.
Audio•Image•Video
html <audio src=""></audio> 직접 경로를 설정하거나 링크를 입력하는 방식으로 사용
Anchor
html <a href="http://link">text</a> url
html <a href="page.html"></a>html 문서에 대한 상세 경로를 사용할 수도 있다.
html <a href="mailto:emailaddress"></a> 메일링크
html <a href="tel:phonenumber"></a> 모바일
table
<th>는 header cell 나머지를 standard cell로 구분한다.
| 순위 | 간식 |
|---|---|
| 1 | 츄르 |
| 2 | 참치캔 |
<html>
<table border="1">
<thead>
<tr>
<th>순위</th>
<th>간식</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>츄르</td>
</tr>
<tr>
<td>2</td>
<td>참치캔</td>
</tr>
</tbody>
</table>
</html>