03. HTML Elements
익스랩 최고 관리자
·2019. 10. 28. 19:19
HTML 요소
HTML 요소는 대개 시작 태그와 종료 태그로 구성되어 있고, 그 사이에 내용이 삽입됩니다.
<tagname>content goes here...</tagname> |
HTML 요소는 시작 태그로부터 종료 태그까지의 모든 것을 말합니다.
시작 태그 | 요소 내용 | 종료 태그 |
<h1> | My First Heading | </h1> |
<p> | My First paragraph. | </p> |
<br> |
몇 HTML 요소는 <br> 요소처럼 내용이 비어있을 수도 있고, 종료 태그가 없을 수도 있습니다.
중첩된 HTML 요소
HTML 요소는 중첩이 가능합니다. 즉, 요소는 요소로 포함할 수 있다는 것입니다.
모든 HTML 요소는 중첩된 HTML 요소로 구성됩니다.
해당 예제는 4개의 HTML 요소를 포함하고 있습니다.
See the Pen 01.nested_HTML_Elements by heunho (@heunho) on CodePen.
예제 설명
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
- HTML 요소는 전체 문서를 정의합니다.
- 시작 태그 <html>와 종료 태그 </html>로 구성됩니다.
- 내용 요소는 다른 HTML 요소입니다. (<body> 태그)
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
- <body> 요소는 문서의 본문을 정의합니다.
- 시작 태그 <body>와 종료 태그 </body>로 구성됩니다.
- 요소 내용은 두 개의 다른 HTML 요소입니다.(<h1> 및 <p>)
<h1>My First Heading</h1>
- <h1> 요소는 제목을 정의합니다.
- 시작 태그 <h1>과 종료 태그 </h1>으로 구성됩니다.
- 요소 내용은 다음과 같습니다. My First Heading
<p>My first paragraph.</p>
- <p> 요소는 단락을 정의합니다.
- 시작 태그 <p>와 종료 태그 </p>로 구성됩니다.
- 요소 내용은 다음과 같습니다. My first paragraph.
종료 태그를 잊지 마세요!
종료 태그를 잊어버린 경우에도 일부 HTML 요소는 올바르게 표시됩니다.
See the Pen 02.Do Not Forget the End Tag by heunho (@heunho) on CodePen.
위의 예제는 모든 브라우저에서 작동합니다. 그 이유는 닫는 태그가 선택 사항으로 간주되기 때문입니다.
하지만! 절대 이것에 의지하지 마세요. 종료 태그를 잊어버리면 예기치 않은 결과 혹은 오류가 발생할 수 있습니다.
비어있는 HTML 요소
내용이 없는 HTML 요소는 비어있는(Empty) 요소라고 합니다.
<br> 은 닫는 태그가 없는 비어있는 요소입니다.
(<br> 태그는 줄 바꿈을 정의하는 태그입니다.)
See the Pen 03.Empty HTML Elements by heunho (@heunho) on CodePen.
비어있는 요소는 다음과 같이 시작 태그에서 닫을 수 있습니다. <br/>
HTML5에서는 빈 요소를 닫을 필요가 없습니다. 그러나 더 엄격한 유효성 검사를 원하거나
XML 파서로 문서를 읽을 수 있도록 해야 하는 경우 모든 HTML 요소를 올바르게 닫아야 합니다.
소문자 태그 사용
HTML 태그는 대소 문자를 구분하지 않습니다. <P>는 <p>와 같습니다.
HTML5 표준은 소문자 태그를 필요로 하지 않지만 W3C는 HTML에서 소문자를 권장하고 XHTML과 같이 더 엄격한 문서 유형의 경우 소문자를 요구합니다.
참고 : <body> 섹션 (위 이미지의 흰색 영역) 안에 있는 내용만 브라우저에 표시된다.
HTML 버전들
초기 웹 이래로 많은 HTML 버전이 있었습니다. (참고만 하세요)
Version | Year |
HTML | 1991 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML | 2000 |
HTML5 | 2014 |
틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.
질문도 올려주시면 아는 선에서 답변해드리겠습니다.
대부분의 내용의 저작권은 w3schools에 있습니다.
'IT 언어 연구소 > HTML,CSS [초급, 기본 개념, W3C 번역]' 카테고리의 다른 글
05.HTML Heading (0) | 2019.10.28 |
---|---|
04.HTML Attributes (0) | 2019.10.28 |
02. HTML Basic (0) | 2019.10.28 |
01. HTML Introduction (0) | 2019.10.28 |
[w3school(HTML) 번역 프로젝트] 시작에 앞서 (0) | 2019.10.28 |