[HTML] 정보로서의 HTML

이번 시간엔 인류의 지식을 담아내는 그릇 HTML을 더 깊게 배울 예정이다. HTML을 정보답게 하는, 왜 HTML이 정보를 담아내는 그릇인지 설명하겠다.

 

HTML - Font(퇴출 태그)

HTML에는 약 150개의 태그가 있다. 현재 폰트 태그는 퇴출이 되었는데 여전히 많이 사용하고 있다. 하지만 CSS라는 별도의 언어를 굳이 사용함으로써 정보로서의 HTML을 명확히 제공하는 것을 지향한다. 

 

Meta : 어떤 데이터를 설명하는 것

이 웹페이지의 저자는 누구인가, 검색할 때 사용할 수 있는 키워드는 무엇인가.

ex) meta charset-utf8

 

HTML - 의미론적인 태그 (semantic)

<header></header>

<footer></footer> 개인보호정책, 회사소개같은 작게 들어가는 것

<nav></nav> 문서의 네비게이션 항목

 

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

 

검색엔진 최적화(SEO:Search Engine Optimization)

검색엔진 최적화란? 사용자가 검색했을 때 가장 적합한 답을 제공하는 것.

방법 (HTML을 의미론적으로 타당하게 제공할수록 검색엔진에 잘 나타나게 된다.)

1. meta 태그에 핵심 잘 나타내기

2. 301 리디렉션 : 다른 곳으로 보내버린다

3. 제목 태그를 잘 작성하면 검색엔진에 잘 뜰 수 밖에 없다.

4. robots.txt를 효과적으로 활용하기

<?xml version="1.0" encoding="UTF-8"?> => 사이트맵이라 해서 한 HTML 안에 얼마나 다양한 사이트가 있는지 확인할 수 있다.

 

*페이지랭크

많은 사이트가 주소를 업로드했을 수록 랭크 올라간다. 페이지랭크가 높은 사이트가 링크를 걸어주면 검색에 더 잘뜨게 된다.

구글의 검색엔진은 어떻게 검색을 하는가?

하이퍼 텍스트가 얼마나 중요한지 공부하는 사례

 

 

---

 

본 공부를 통해 웹의 본질은 링크라는 사실을 새삼 배웠다.

HTML이 단순히 필요한 정보를 보이는 것을 넘어 컴퓨터와 어떻게 소통할 수 있는 지 배웠다. 의미론적 태그, Meta 등을 활용하면서 지속적으로 컴퓨터에게 내가 어떤 정보를 담고있는지 명확히 표현해야 한다.

 

HTML을 정보의 관점으로 바라볼 수 있고, 어떻게 하면 가치있는 정보로 만들 수 있는지 고민할 필요가 있다. 

 

웹을 공부하는 한, Html을 떠날 순 없다.