HTML 특징

태그의 부모 자식 관계

• 웹 페이지는 ‘트리 구조’로 구성되어 보임.

 각 요소가 하나 이상의 요소에 연결되는 데이터 구조 유형임.

검색 엔진

search engine

• 웹 사이트나 웹 페이지등을 검색해주는 시스템이나 프로그램 등을 통칭.
• 웹에서 정보를 찾는데 걸리는 시간을 최소화 해 줌

검색엔진 동작 원리

• 결과를 빠르게 보여주려고 수많은 정보를 미리 정리해 놓음.
• 이 과정을 자동으로 DB시키는 프로그램을 봇(bot) 또는 크롤러(crawler)라고 부름.
  • 검색 엔진은 봇이 주기적으로 웹 사이트들을 방문하여 쌓은 정보를 정리한 후, 데이터베이스에 저장함.
  • 이 정보를 이후 사용자가 검색할 때 결과를 빠르고 정확하게 보여주는 데 사용됨.

검색엔진의 최적화

• Search Engine Optimization (SEO)
• 검색이 잘되도록 설계하는 일.
• HTML로 웹 페이지를 만들면서 검색 엔진 최적화를 해야함.
  • 메타 태그와 시맨틱 태그 사용하는 방법.

    - 웹 페이지 정보를 검색 엔진에 제공하는 태그임.

메타 태그

• 검색 엔진에 정보를 제공할 목적의 태그

시맨틱 태그

• 웹 페이지 구조를 구성하는 태그
• Semantic (의미론적인)
• 의미 있는 태그
• 검색 엔진은 HTML 코드만으로 의미를 인식해야 함.
• 시맨틱 요소로 구성된 웹 페이지는 검색 엔진에 문서 정보를 더 의미있게
  전달 할 수 있음.
• 검색 엔진이 읽을 수 있는 문서 구조를 작성하는데 사용됨.

    - h1, p, form, label

레이아웃 관련 태그

• header : 소개 요소 또는 탐색 링크를 나타냄
• nav : 주로 메뉴를 구현함
• aside : 사이드바처럼 좌우에 위치하는 공간임
• section : 본문 내용을 포함하는 공간임
• article : 독립적인 요소임.
• footer : 문서의 하단을 정의함. 저작권등 명시

비 시맨틱 태그

• div,span

HTML 전역 속성

title

• 요소의 정보나 설명을 지정

    <태그 title="설명"></태그>

style

• 요소에 적용할 스타일(css)을 지정

    <태그 style="스타일"></태그>

class

• 요소를 지칭하는 중복 가능한 이름

    <태그 class="이름"></태그>

id

• 요소를 지칭하는 고유한 이름

    <태그 class="이름"></태그>