[HTML] Html의 태그 구조

Study/Javascript, Jquery, CSS  2020. 1. 9. 23:41

안녕하세요. 명월입니다.


이 글은 Html의 태그 구조에 관한 글입니다.

웹 브라우저에 사용되는 웹 페이지를 구성하는 프로그램(?) 언어는 Html과 Javascript, CSS가 있습니다.

Html은 XML형식의 도큐멘트 마크 업으로 정확히 이야기하면 프로그램 언어는 아니고 웹 페이지를 구성하는 구조체(?)라고 생각하면 됩니다.

CSS은 Html으로 구성된 구조체를 UI디자인을 입혀서 좀 더 가독성을 높히고 이쁘게(?) 구성하는 스타일 시트입니다.

Javascript는 웹 도큐멘트 Html과 CSS등을 좀 더 동적으로 움직이기 위해서 사용되는 스크립트 프로그램 언어입니다.


Html은 XML형식을 계승 받았기 때문에 기본적으로 태그를 열고 닫는 형태로 작성됩니다. 즉, <태그></태그>의 형태의 구조가 됩니다.


그리고 Html은 기본적으로 DOCTYPE으로 문서의 버젼을 선언하고 html태그로 시작해서 head와 body를 필수로 가지고 있는 형태로 구성됩니다.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

위의 구조로 기본적으로 구성되며 head태그에는 title 태그가 필수로 필요합니다.

그리고 head 태그에는 style과 script의 링크 선언, 매타 태그가 선언되고 body태그에는 실제로 브라우저에 표시되는 오브젝트가 선언됩니다.

참조 - https://www.w3schools.com/html/html5_new_elements.asp

태그 설명
html HTML 태그의 최상위 태그입니다. (필수)
head HTML 하위 태그로서 head에는 타이틀, 메타정보가 포함됩니다.
body HTML의 하위 태그로서 HTML 문서정보가 포함됩니다.
meta head의 하위 태그로서 문서의 메타정보가 포함됩니다.
메타정보는 문서의 인코딩 정보, 키워드, 검색사이트의 제어설정, 외부링크정보가 포함됩니다.
title head의 하위 태그로서 HTML 문서의 제목을 나타내며 브라우저의 타이틀에 표시됩니다.
link head의 하위 태그로서 라이브러리등을 연결할 때 사용됩니다.
header body의 하위 태그로서 문서의 상단 부분을 나태낼 때 사용합니다..
main body의 하위 태그로서 주요 콘텐츠를 작성할 때 사용됩니다.
article body의 하위 태그로서 독립적은 콘텐츠를 작성할 때 사용합니다.
session body의 하위 태그로서 콘텐츠의 세션을 구분할 때 사용합니다.
nav body의 하위태그로서 웹 문서의 내이게이션을 나타낼 때 사용합니다.
aside body의 하위태그로서 main 태그의 주요 콘텐츠와 정보를 분리할 때 사용합니다.
footer body의 하위태그로서 문서의 하단 부분을 나타낼 때 사용합니다.

구조적인 html 태글르 설명했습니다만 이해가 힘드니 아래의 이미지를 참조해 주세요.

body 구조

참고로 위 이미지는 body태그 내부에서 사용되는 태그에 대한 설명입니다.

위 태그를 보면 body 안에서도 header, main, footer 영역을 구분해서 작성을 하는 게 좋습니다. 그 편이 나중에 CSS나 Javascript 적용하기도 편하고 무엇보다 태그 가독성이 매우 좋고 관리하기도 편합니다.


참조 - 명월일지 티스토리 스킨

예전에 저도 위 태그를 사용하지 않고 오로지 div태그를 이용해서 class로 CSS 스타일 입히고 작업한 적이 있습니다.

사실 지금도 그렇게 한다고 해서 화면이 깨진다거나 제대로 작동을 안하는 건 아닙니다. 일반 유저가 보기에는 크게 차이도 없습니다.


그런데 오로지 div태그로 하게 될 때, 웹페이지가 점점 커지게 될 때 태그 찾기가 매우 어려워 집니다. 또 div 태그 안에 div 태그로 계속 반복적으로 사용하게 되면 후에 CSS 적용하기도 점점 까다로워 집니다.

특히나 블로그이나 SEO에 신경쓰는 웹페이지의 경우에는 이 태그를 좀 더 신경써야 할 부분이 있습니다. 딱히 확인된 사항이나 검증된 것은 아니지만 아무래도 HTML 표준을 정확하게 지킨 페이지가 구글이나 네이버 등에서 크롤링하기도 좋고, adsense같은 광고에서도 키워드 설정하기가 좀 더 편할 것입니다.

이렇게 신뢰도가 높은 블로그는 결국 구글이나 네이버에서 순위 상승과는 간접적으로 영향이 반드시 있을 꺼라 생각합니다.


여기까지 Html의 태그 구조에 대한 설명이었습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.

저작자표시 비영리 동일조건

'Study > Javascript, Jquery, CSS' 카테고리의 다른 글

[CSS] Selector(선택자)  (0) 2020.01.13
[CSS] CSS Styles이란?  (0) 2020.01.12
[HTML] Open graph (오픈 그래피, og 태그)  (0) 2020.01.12
[HTML] 메타 태그(SEO 최적화 포함)  (0) 2020.01.12
[Jquery] Jquery의 이벤트(Event) 관련 함수 - 2 (Mouse Events)  (0) 2016.03.30
[Jquery] Jquery의 이벤트(Event) 관련 함수 - 1 (Attachment)  (2) 2016.03.29
[Jquery, CSS] Jquery의 CSS 관련 함수  (0) 2016.03.28
[Jquery] Attributes 관련 함수  (0) 2016.03.27