기초부터 시작할 수 있는 튜토리얼 사이트
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
예제
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
실제 나타나는 모습 (HTML 코드 블럭 삽입해둠)
This is a Heading
This is a paragraph.
예시 설명
- 이 <!DOCTYPE html> 선언은 이 문서가 HTML5 문서임을 정의함.
- 해당 <html> 요소는 HTML 페이지의 루트 요소.
- 해당 <head> 요소는 HTML 페이지에 대한 메타 정보 포함.
- 이 <title> 요소는 HTML 페이지의 제목(브라우저의 제목 표시줄이나 페이지 탭에 표시됨)을 지정.
- <body> <body> 요소는 문서의 본문을 정의하며, 제목, 단락, 이미지, 하이퍼링크, 표, 목록 등과 같은 모든 보이는 콘텐츠를 담는 컨테이너.
- 해당 <h1> 요소는 큰 제목을 정의함.
- 해당 <p> 요소는 단락을 정의.
HTML 요소란 무엇인가?
<tagname> 여기에 내용 을 입력 하세요 ... </tagname>
HTML 요소 는 시작 태그부터 종료 태그까지의 모든 것을 포함한다.
<p> 첫 번째 단락 입니다 . </p>
<h1> 첫 번째 제목 </h1>
HTML 요소는 시작 태그, 내용, 그리고 종료 태그로 정의됨.
| Element | content | End tag |
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> | none | none |
참고: 일부 HTML 요소는 내용이 없다(예: <br> 요소). 이러한 요소를 빈 요소라고 함. 빈 요소에는 종료 태그가 없다!
웹 브라우저
웹 브라우저(크롬, 엣지, 파이어폭스, 사파리)의 목적은 HTML 문서를 읽고 올바르게 표시하는 것.
브라우저는 HTML 태그를 직접 표시하지는 않지만, 이러한 태그를 사용하여 문서를 어떻게 표시할지 결정함.
HTML 페이지 구조
아래는 HTML 페이지 구조를 시각화한 것.
참고: <body> 태그 안의 내용은 브라우저에 표시됨. <title> 태그 안의 내용은 브라우저의 제목 표시줄 또는 페이지 탭에 표시됨.
'HTML' 카테고리의 다른 글
| html 6. 제목 (0) | 2026.05.25 |
|---|---|
| html 5. 속성 (0) | 2026.05.25 |
| html 4. 요소 (0) | 2026.05.25 |
| html 3. 기본 예제 실습 (0) | 2026.05.25 |
| html 2. 편집기, 웹페이지를 만드는 4단계 (0) | 2026.05.25 |