Enjoy Programming

HTML5 의 기본 문법및 구조를 살펴보자 + semantic tag 본문

HTML

HTML5 의 기본 문법및 구조를 살펴보자 + semantic tag

LEETAEEON 2021. 4. 7. 11:12

이제 html5의 기본 구조를 살펴 보자

html은 반드시 <!DOCTYPE html> 로 시작한다

이는 이 문서는 html코드를 포함하고 있다고 브라우저에게 말해주는 역할을 한다.

이후 실질적인 html 코드들이 실행 되는데

크게 head, body로 구분된다.

head에는 문서의 title이나 참조, meta태그 등이 들어가는데 이는 문서의 configure라 할 수 있다.

meta 태그는 문서의 별도의 정보를 알려주는 역할을 한다.

그리고 body에는 실제 웹에 보여질 content들이 들어간다.

 

기본 문법은 앞서 설명한 것도 있지만 추가로 더 다뤄 보겠다.

html태그는 기본적으로 중첩이 되는데 이때 부자관계가 형성 된다.

위 사진에 바디안에 h1태그와 p태그가 있다

바디는 부모 요소가 되고 h1과 p는 직계 자식요소가 된다. 그리고 h1과 p태그는 sibling(형제)요소가 된다.

 

그리고 태그중 self closing태그가 있다고 했는데 부가적으로 설명하면 content가 필여없으며 attribute만 가질 수 있다.

대표적으로 <br> <hr> <img> <input> <link> <meta> 등등이 있다.

 

그리고 attribute(속성)에는 자주 사용되는 속성이 있는데 global attribute라고 하며 대체로 모든 elements에 사용 가능하다

그리고 !!주석!! 은 아주 중요한 역할을 한다.

html뿐 아닌 모든 프로그래밍에서 주석을 사용하는 것은 중요하다

내가 작성한 코드에 대한 부연설명을 하고 그때 그때 수정하거나 할때 유용한데

코드 작성시 설명이 필요한 부분이라면 꼭 주석을 사용하자 

 

semantic TAG

html5는 semantic tag와 non semantic tag가 있다.

semantic이란 코드 조각의 의미를 나타낸다.

html에서는 element에 따라 의미가 있는지 아니면 의미가 없는 태그인지 구분되어있다.

예를 들어 font태그와 h1태그를 비교해 보자

font태그는 의미론적으로 그 어떤 의미도 가지고 있지 않다. 의도가 명확하지 않다는 것이다.

다만 태그안에 들어있는 content 즉 메타데이터만 브라우저에 알린다.

그러나 h1태그는 제목중 가장 상위 레벨이라는 의미를 내포하고 있다. 

이는 개발자가 의도한 element의 의미가 명확히 드러난다. 이는 코드의 가독성을 높이고 유지보수를 쉽게 한다.

semantic tag는 브라우저, 검색엔진, 개발자 모두에게 컨텐츠의 의미를 명확히 설명하는 역할을 한다.

이로인해 그 데이터를 활용하고 명확히 해석할 수 있는 시맨틱 웹이 실현 될 수 있다.

semantic web이란 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 잡다한 데이터 집합이었던

웹페이지를 의미와 관련성을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

 

non-semantic element > div, span ...

semantic element > form, tabale, h1, img....

HTML5에 새롭게 추가된 semantic tag

 

'HTML' 카테고리의 다른 글

List 표현을 위한 태그  (0) 2021.04.09
Hyperlink tag  (0) 2021.04.09
TEXT Tag  (0) 2021.04.09
기본 태그  (0) 2021.04.09
HTML5 - 에 대하여  (0) 2021.04.06
'HTML' Related Articles more