코딩/HTML

html 문서 구조의 시각화

moodyblues 2021. 4. 6. 17:29

1. html 구조의 시각화.

 

html 문서 구조의 시각화

정의하다= define

브라우저에 표시되는 내용 : body 속의 내용.

브라우저의 문서 제목 표시줄(페이지 탭)에 표시되는 내용 : title의 내용.

 

2. Html 문서 구조의 설명

 

1) 먼저, 문서 유형의 선언으로 시작된다.

 

<!DOCTYPE html> = 이 문서는 HTML5 문서로 작성되었습니다

(문서의 맨 앞에 한 번만 사용,

대소문자 구분하지 않음)

 

2) <html>= 이것은 html 문서입니다.

</html> = html 문서 끝났습니다.

 

3) <head> = 문서의 head가 시작됩니다.

</head> = 문서의 head가 끝났습니다.

이 곳에서 html 문서에 대한 데이터를 정의(define)한다.

(문서 제목, 스타일, 링크, 스크립트 등)

 

4) <body> = 문서의 본문이 시작됩니다.

(/body> = 본문이 끝났습니다.

문서 본문의 내용을 정의(define)한다.

(제목, 단락, 이미지, 표 등)

 

5) <title> = 문서의 제목이 시작됩니다.

</title> = 문서의 제목이 끝났습니다.

(타이틀의 내용은 페이지 탭에 문서 전체의 타이틀로 표시된다.>

 

6) <h1>  = 제목1이 시작됩니다.

</h1> = 제목1이 끝났습니다.

(본문 내에서 글의 제목으로 표시된다.)

H= heading ← 제목 ← heading = 머리; 수위; 우두머리.

h 태그에는 <h1> 태그 ~ <h2> 태그까지 6개가 있다.

= <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

 

(h1의 중요성 : 검색 엔진이 웹페이지의 구조와 콘텐츠를 찾을 때 h1을 사용하여 찾는다.)

(h1이 기본 제목으로 가장 중요한 제목, 그 이하로 갈수록 덜 중요한 제목.)

 

7) <p> = 한 문단이 시작됩니다.

</p>= 이 문단이 끝났습니다.

P= paragraph : 단락; 패러그래프; 짧은 기사.

(단락은 자동으로 새 줄에서 시작된다.

단락 앞 뒤에는 자동으로 여백이 추가된다.)

 

<용어 설명>

요소 = <시작 태그 이름> +그 사이의 콘텐츠 + <종료 태그 이름>

= 시작 태그부터 종료 태그까지의 전부.

 

<h1> 요소 = <h1> + 첫 제목 + </h1>

<p> 요소 = <p> + 단락 + </p>

 

빈 요소

일부 html 요소에는 콘텐츠 없는 태그를 말한다.

= <br> 등, = 종료 태그가 없다 = 이들을 빈 요소라 부른다.

 

 

html5 이미지

 

'코딩 > HTML' 카테고리의 다른 글

잊어야 할 태그(tag)들  (0) 2021.04.08
속성(attributes)과 요소  (0) 2021.04.07
요소(element)의 요소 5가지  (0) 2021.04.07
DOCTYPE html은 생략해도 될까?  (0) 2021.04.06
html 문서의 기본 구조 2단계  (0) 2021.04.05