HTML 의미와 기본 구조

1. HTML 의미

HTML은 HyperText Markup Language의 약자다.

HTML을 통해 웹 문서를 작성할 수가 있다. 작성된 웹 문서는 웹 브라우저가 해석하여 클라이언트에게 보여주게 될 것이다.

2. 기본 구조

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>웹 문서 제목</title>
    </head>
    <body>
        <h1>제목 크기1</h1>
            <p>내용</p>
        <h2>제목 크기2</h2>
            <p>내용</p>
        <h3>제목 크기3</h3>
            <p>내용</p>
        <h4>제목 크기4</h4>
            <p>내용</p>
        <h5>제목 크기5</h5>
            <p>내용</p>
        <h6>제목 크기6</h6>
            <p>내용</p>
    </body>
</html>

<!DOCTYPE html>

- Document Type의 약자로 자신이 작성한 문서의 버전이 HTML 5라는 것을 웹 브라우저에게 알려줄 필요가 있기 때문에 가장 먼저 선언을 해준다. 현재는 <!DOCTYPE html>로 단일화되어있으며, 자세하게 알고 싶으면 각자 검색해서 찾아보길 바란다.

<html> ~ </html>

- 문서와 문서의 끝을 나타내는 태그로 </html> 뒤에는 아무것도 오면 안 된다.

<html lang ="ko">

- HTML 문서가 어떤 언어로 작성되었는지를 나타낸다. 영어로 작성되었다면 ko를 en로 바꾸면 된다.

- lang = "ko"를 지정해줌으로써 웹 접근성을 향상시킨다.

<head> ~ </head>

- 웹 브라우저 화면에는 보이지 않는다.

- 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력 (title, meta, link, style 등이 있다.)

<title> ~ </title>

- 웹 문서의 제목을 표시한다.

<body> ~ </body>

- 웹 문서에 들어갈 내용을 표시한다.

<h1> ~ </h1>

- header의 약자로 제목을 의미한다.

- <h1> 에서 <h6>으로 갈수록 글씨 크기가 작아진다.

<p> ~ </p>

- Paragraph의 약자로, 내용을 의미한다.

<hr>

- horizontal rule의 약자로, 수평 가로선을 정의할 때 사용한다.

- HTML 문서에서 내용을 구분하거나 주제의 변화를 정의한다.

3. HTML 입문자가 알면 좋은 TIP

1. HTML는 들여쓰기를 안 해도 코드에 지장이 없으나 구분하는 데에 있어서 불편함을 겪지 않으려면 들여쓰기를 하는 편이 낫다.

2. Visual Studio Code에서 !를 입력 후 enter 및 tab을 누르면 HTML의 기본 구조가 자동으로 입력된다.

3. Visual Studio Code 마켓플레이스

- open in broswer 설치 후 alt + b를 누르면 웹 브라우저가 실행된다. 코드가 변경되면 일일이 alt + b를 눌러 확인해야 돼서 번거롭다.

- live server 설치 후 alt + l + alt + o를 누르면 웹 브라우저가 실행된다. 코드가 변경되면 저장할 때마다 변경된 값으로 바뀌어있기 때문에 일일이 웹 브라우저를 실행시켜주지 않아도 된다.

4. ctrl + , 을 누른 후 tab size를 입력하면 들여쓰기 크기를 변경할 수 있다.

'FrontEnd > HTMl' 카테고리의 다른 글

[HTML] 리스트와 테이블 (0)	2021.07.17
[HTML] 링크와 이미지 (0)	2021.07.17
[HTML] Style 속성 (0)	2021.07.17
[HTML] 문자셋 (0)	2021.07.17
[HTML] 텍스트 요소 (0)	2021.07.16

PteroSaurs