[HTML] HTML text fundamentals

시맨틱 웹(Semantic Web)

대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 Google 이나 Naver 와 같은 검색 사이트를 이용하므로 웹사이트가 검색엔진에 노출되는 것이 매우 중요하다.

SEO(검색엔진 최적화; Search Engine Optimization) 도구를 사용해 검색엔진이 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 한다.

검색 사이트 이용자가 검색할만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다. (→ 인덱싱)

인덱스를 생성할 때 웹사이트의 HTML 코드가 사용된다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지할 수 있어야 하는데 이때 시맨틱 요소(Semantic Element)를 해석하게 된다.

HTML으로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다.

<font size="6"><b>Hello</b></font> <-- 폰트 크기와 볼드체 지정하는 메타 데이터 --> 
<h1>Hello</h1> <-- header 중 가장 상위 레벨 --> 

시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달하고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해진다.

시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

Heading 요소

• <h1> ~ <h6>
• 가급적 페이지 당 하나의 h1 요소를 사용해야 한다.
• 6개의 Heading을 사용할 수 있지만 꼭 필요한 것이 아니라면 한 페이지에 3개 이상 사용하지 않도록 한다.

List 요소

• Unordered - <ul>
• Ordered - <ol>
• list item - <li>
• List는 중첩이 가능

중요와 강조

• Emphasis - <em>
• Strong importance - <strong>

semantic & non-semanntic 요소

• semantic 요소 → <form>, <table> , <img> 등으로 이들 태그는 content의 의미를 명확히 설명한다.
• non-semantic 요소 → <div> , <span> 등으로 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.