HTML - 무엇인지 스치듯이 알아봅시다~!
HTML(Hyper Text Markup Language)
- HTML 웹문서는 브라우저에서 읽을 수 있는 텍스트로 이루어진 마크업 언어입니다.
- 일반 문서를 만들듯이 큰제목, 두번째 제목... 내용, 이미지, 섹션, 머릿말, 꼬릿말등 계층구조에 맞춰서 시각적인 요소와 상관없이도 계층구조가 맞게 마크업을 하는 것이 중요하고, 이것을 우리는 웹표준이라고 합니다.
- 100% 웹표준이라는 말은 없습니다. 최대한 웹표준에 맞게 문법의 계층구조를 지키고, HTML요소 중 필수속성의 사용을 지키며, 위계를 지켜 마크업하는 것이 중요합니다.
기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다.
HTML Syntax
A. 시작태그(start tag)
- 마크업은 시작태그로 시작을 합니다. 시작태그에는 속성(Attribute)를 넣을 수 있으며, HTML 마크업은 대소문자가 상관없지만 보통 소문자로 통일하여 사용합니다.
B. 종료태그(end tag)
- 종료태그는 해당 엘리먼트의 종료지점을 뜻하며, 시작태그처럼 속성(Attributte)를 넣을 수 없으며, 종료만 할 수 있습니다.
C. 속성(Attributes)
- HTML 속성은 개수의 제한 없이 넣을 수 있으며, 순서또한 상관이 없습니다. 하지만, 같은 속성을 두번 지정할 수 없습니다.
- 태그마다 필수속성으로 지정된 것은 반드시 넣어주어야 웹표준에 위배되지 않습니다.
D. 빈요소(Empty Element)
- 종료태그가 존재하지 않는 태그도 있습니다.
<img>, <br>, <meta>, <link>, <input> 등의 태그가 있습니다.
E. XHTML 문법
HTML Development History
- HTML4.01 -> XHTML1.0 -> XHTML2.0(진행중해체됨) -> HTML5 -> HTML LivingStandard(현재)
- HTML5부터 우리는 웹문서를 시작할때에 DTD선언부에서 HTML의 버전과 타입을 적지 않게 되었습니다.
- 하여, 현재는 HTML문법과 XHTML문법 둘다 사용이 가능합니다.
- 하지만, 프레임웤이나 상황에 맞게 한가지로 통일하여 쓰는 것을 권합니다.
그렇다면, HTML과 XHTML의 차이점은 무엇일까요?
대표적인 차이점 몇개를 정리해 드릴게요
| Content | HTML | XHTML | Description |
| 따옴표 | ", ' 둘다 허용 | " 겹따옴표만 허용 | |
| 속성 축약형 | 사용가능 <input type="text" required> |
사용불가 <input type="text" required="required"> |
속성="값" 이때에 속성과 값이 같으면 축약하여 보통 사용합니다. 하지만 XHTML문법에서는 이를 허용하지 않습니다. |
| 영문 | 대,소문자 둘다 허용 | 소문자만 허용 | |
| 빈요소 닫기 | 닫지않음 <img src="" alt=""> |
반드시 닫아야함(공백+슬러시+괄호) <img src="" alt="" /> |
일부 프레임웍에서는 닫아야하는 경우가 있습니다. 이는 XHTML문법을 사용하기 때문입니다. |
본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.
힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.
제 피드를 공유하거나 링크를 해주시는것은 감사합니다~
하지만, 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^
감사합니다.