HTML 기본문법과 시맨틱요소

1. HTML ?

웹페이지를 기술하기위한 마크업 언어

웹페이지의 내용과 구조를 담당한다.

2. HTML5 ?

2014년 에 확정된 차세대 웹 표준 으로 기능이 추가됬다.

• 멀티미디어
• 그래픽 - SVG, 캔버스를 사용한 2차원 그래픽 CSS3, WebGL 으로 3차원그래픽 지원
• 양방향 통신
• 카메라, 동작센서등 하드웨어 기능을 직접적으로 제어할수있다.
• 오프라인 및 저장소
• 시맨틱 태크
• CSS3 지원

3. HTML5 의 기본문법

3.1 요소

시작태그와 종료 태그 그사이에 위치한 content로 구성된다.

3.1.1 요소의 중첩

요소의 중첩으로 부모자식관계를 나타내며 웹페이지 구조를 표현한다.

3.1.2 빈 요소

content 를 가질수없는 요소를 빈요소 라 한다.

• br
• hr
• img
• input
• link
• meta

3.2 어트리뷰트

말그대로 속성이라는뜻이고 시작태그에 위치해야한다.

 

3.2.1 글로벌 어트리뷰트

모든 HTML 요소가 공통으로 사용할수있는 어트리뷰트다

3.3 주석

개발자에게 코드를 설명하기위해 사용한다.

시맨틱 웹

웹에 존재하는 수만은 웹페이지들에 메타데이터를 부여하여 웹페이지에 의미와 관련성을 가지는 거대한 데이터 베이스로 구축하고자 하는 발상이다.

검색엔진이 로봇이라는 프로그램을 이용해 웹사이트 정보를 수집하는데 이걸 크롤링이라한다.

그리고 이용자가 검색할만한 키워드를 미리 예상해 검색 키워드에 대응하는 인덱스 를 만들어두는데 인덱스를 생성할때 사용되는정보는 HTML 코드이다 이 코드만으로 의미를 해석할때 시맨틱 요소를 해석하게 된다.

<font size ="6"><b>Hello</b></font>
<h1>Hello</h1> 

위코드에서 1행과 2행의 출력은 동일하다 왜냐면

태그의 디폴트 스타일이 1행과 같기때문이다

다만 코드에서 볼때 1행은 의도가 명확하지가 않다. 반면 2행은 개발자의 의도한 요소의 의미가 명확히 드러나고있다.

검색엔진은 대체로 h1 요소 내에 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다.

이렇게 시맨틱 요소로 구성되있는 웹페이지는 검색엔진 , 개발자 모두에게 콘텐츠를 의미를 명확히 설명하는 역활을 하게된다.