이번 글에서는 HTML요소에 관련해서 학습해보고자 한다.
HTML 구성요소와 중첩HTML에 관련해서 살펴볼 것이며, 빈 HTML요소와 HTML 대소문자에 관련해서 정리해 볼 것이다.
HTML 기본 요소에 대한 개념을 파악하고 이해하는 시간이니 가볍게 읽어보시고 가능하면 천천히 실습을 꼭 해보기를 추천한다.
HTML 요소 구성요소
HTML 요소는 시작 태그에서 끝 태그까지 모든 것이 요소이다.
| <tagname>내용은 이곳에...</tagname> |
HTML 요소의 예제이다.
|
<h1>나의 첫번째 제목</h1>
<br> <p>나의 첫번째 단락.</p>
|
상기 HTML요소를 정리하며 아래 표와 같다.
| 시작태그 | 요소내용 | 끝태그 |
| <h1> | 나의 첫번째 제목 | </h1> |
| <p> | 나의 첫번째 단락 | </p> |
| <br> | none | none |
<br> 요소는 내용을 가지고 있지 않다. 이런 요소를 빈요소(empty elements)라고 부른다. 빈요소는 끝태그도 가지고 있지 않다.
중첩 HTML 요소
HTML요소는 중첩이 될 수 있다.(중첩의 의미는 요소는 다른 요소들을 포함할 수 있다.)
모든 HTML문서는 중첩 HTML요소로 구성한다.
다음 예제는 4개의 HTML요소를 포함한다(<html>, <body>, <h1>, <p>)
| 중첩예제 |
| <!DOCTYPE html> <html> <body> <h1>나의 첫번째 제목</h1> <p>나의 첫번째 단락.</p> </body> </html> |
<html>요소는 루트 요소이고 전체 HTML문서를 정의한다.
시작태그 <html>과 끝태그</html>을 가지고 있다.
그리고 <html>요소 안에 <body> 요소가 있다.
| <html> <body> <h1>나의 첫번째 제목</h1> <p>나의 첫번째 단락.</p> </body> </html> |
<body>요소는 문서의 몸체를 정의한다.
<body>요소는 <body> 시작태그와 </body> 끝태그로 구성한다.
<body>요소안에는 <h1>과 <p> 2개의 다른 요소를 있다.
| <h1>나의 첫번째 제목</h1> <p>나의 첫번째 단락.</p> |
<h1> 요소는 제목을 정의한다.
<h1> 시작태그와 </h1> 끝태그로 구성한다.
| <h1>나의 첫번째 제목</h1> |
<p>요소는 단란을 정의한다.
<p> 시작태그와 </p> 끝태그로 구성한다.
| <p>나의 첫번째 단락.</p> |
끝태그를 건너뛰지 마라
몇 HTML요소는 끝태그 입력을 잊어버렸어도 정확하게 표시할 것이다.
| 예제 |
| <html> <body> <p>이것은 단락입니다. <p>이것은 단락입니다. </body> </html> |
그러나 절대 </p>와 같이 끝태그 입력을 잊어버리지 않기를 바란다.
빈 HTML요소
내용을 가지고 있지 않는 HTML 요소를 빈 요소라고 불린다.
예로 <br> 태그는 줄바꿈을 정의하며 끝을 알리는 태그 없이 빈 요소이다.
| 예제 |
| <p>이것은<br> 줄바꿈이 있는 단란입니다.</p> |
HTML은 대소문자를 가리지 않는다.
HTML태그는 대소문자를 구분하지 않는다. <P>는 <p>와 같은 의미이다.
HTML 표준은 소문자 태그를 요구하지 않지만, W3C HTML에 소문자를 권고한다. XHTML과 같이 엄격한 문서 유형에 대해서는 소문자를 요구한다.
마무리
지금까지 HTML 요소의 기본 개념과 개념을 이해할 수 있는 실습을 하였다.
꼭 손으로 눈으로 머리로 익히며 실습하기를 바란다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 스타일(Styles) (0) | 2023.04.16 |
|---|---|
| HTML 단락(Paragraphs) (0) | 2023.04.15 |
| HTML 제목(Headings) (0) | 2023.04.14 |
| HTML 속성(Attributes) (0) | 2023.04.13 |
| HTML 시작하기 (0) | 2023.04.10 |
댓글