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에 있습니다.

 

Introduction to HTML

HTML Introduction What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements are the building blocks of HTML pages HTML elements

www.w3schools.com

 

 

반응형

'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

💖 포스터에게 힘 보내기 💖

카카오뱅크
3333-25-9477515
치킨 좋아하는 포스터