정보로서의 HTML

################ 글꼴 -  font ################

퇴출됨~.~

 

<font> 태그는 문서 내의 TEXT를 시각적으로 꾸며주는 역할을 담당하며
size / color 등의 여러 속성들을 적용할 수 있다.
(size 속성값은 기본이 3이며 1~7까지의 값을 표현해낼 수 있다.)

단, <font> 태그는 디자인의 역할만 할 뿐 어떠한 정보로서의 의미도 갖지 않으며,
중복 사용으로 인한 파일 용량 증가, 가독성 저하, 관리 측면에서의 불편함 등의 이유로
현재는 퇴출된 태그이며 그 역할을 CSS가 담당하게 되었다.

 

################ meta ################

 

1. <meta> 태그
　웹페이지에 표현되진 않지만, 웹 페이지를 잘 설명하기 위한 부가 정보들을 담당한다.

2. 사용가능한 속성
· charset="속성값" : 브라우저에 디코딩되는 문자형식을 지정 (속성값 utf-8은 한글폰트를 정상 출력시켜줌)
· name="description" content="내용" : 검색 결과에 대한 요약에 사용됨
· name="keywords" content="내용" : 문서를 설명하는 중요 단어(키워드)들
· name="author" content="내용" : 저자
· http-equiv="refresh" content="숫자" : 지정한 시간(초) 마다 웹페이지를 리프레쉬 시켜줌

 

################ 의미론적 태그(semantic element) ################

 

1. semantic(의미론적) 태그
　시각적인 변화는 없지만 문서상의 정보들을 각 용도에 맞게 체계적으로 정리하기 위해 사용되는 태그
　문서를 의미론적으로 잘 정리하는 것이 검색엔진 최적화에 도움이 된다.

 

html을 코딩할때는 의미에 집중해서 코딩하는 것이 좋다.

※ <section>태그
　한 페이지에 여러 번 사용될 수 있는 시멘틱 태그(대표적으로 <article>태그)들을 묶어줄 때 사용
　(<header>, <footer> 등과 같이 한 번만 사용되는 태그는 <section>태그로 묶어줄 필요가 없다.)

 

article	본문
aside	광고와 같이 페이지의 내용과는 관계가 적은 내용들
details	기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
figure	삽화나 다이어그램과 같은 부가적인 요소를 정의
footer	화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
header	화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
main	문서에서 가장 중심이 되는 컨텐츠를 정의
mark	참조나 하이라이트 표시를 필요로 하는 문자를 정의
nav	문서의 네비게이션 항목을 정의
section	문서의 구획들을 정의 (참고)
time	시간을 정의

 

################ 검색엔진 최적화 ################

 

1. <link rel="canonical" href="특정 URL주소" />
　A와 B와 C라는 문서가 동일한 내용일 경우, 사용자가 B나 C의 URL로 접속해도 A를 보여주도록 하는 태그
　(A 태그를 기준으로 하려면 나머지 문서들(B와 C)에 적용시키면 된다.)

2. 리디렉션
　특정 URL을 통해 접속한 사용자를 미리 지정해둔 다른 URL로 보내는 기능
　(HTML이 아닌, java나 php나 ruby등 서버쪽 언어에서 사용)

3. robots.txt
　페이지를 방문하는 로봇에게 크롤링 허용 범위를 요청하는 것
　예시 :
　　　User-agent : *
　　　Disallow : /
　　/ 뒤에 아무 것도 없다면, 모든 웹페이지에 대해 어떠한 로봇의 크롤링도 허용하지 않는다는 의미.
　　검색할 필요가 없거나, 보호될 필요가 있거나 비즈니스적인 목적으로 보호되어야 할 경우 Disallow에,
　　크롤링이 권장될 경우에는 Allow에 표시한다.

4. page rank
　검색엔진이 동일한 주제의 웹페이지들에 대해 순위를 매겨 검색 노출 순서를 조정하는 것.
　순위가 높은 웹페이지가 우선 노출되며 트래픽이 더 많이 증가한다.