HTML 기본구조

프론트엔드/HTML

HTML 기본구조

alswlfl 2022. 11. 18. 10:05

HTML(Hyper Text Markup Language)
: 태그로 이루어진 markup언어

1. HTML 태그

HTML요소(태그)=시작태그+종료태그
<태그명 속성명 = “속성값”>content</태그명>
ex) <h1 class=”primary”>제목</h1>
content가 없는 태그는 종료 태그를 생략 가능하다! (ex: hr, br)

2. HTML 문서 기본 구조

<!DOCTYPE html>
<html lang="ko">
	<head> 
    	<title>Learn HTML</title>
    <head>
    <body>
    </body>
</html>

head태그: html태그의 자식 태그, 웹 문서의 문서 정보 담당, 브라우저에는 표시 되지 않음
body태그: html태그의 자식 태그, 웹 브라우저에 표시되는 공간

✨ ! 입력 후, enter 누르면 자동완성됨

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello HTML!!</title>
  </head>
  <body>
    <h1>헬스</h1>
    <hr />
    <p>
      위키백과, 우리 모두의
      <br />
      백과사전.
    </p>
    <p>
      헬스(health)는 기본적으로
      <a href="https://ko.wikipedia.org/wiki/%EA%B1%B4%EA%B0%95">건강</a>을
      가리키며 그 외에 다음을 가리킨다.
    </p>
    <ul>
      <li>의료</li>
      <li>보건</li>
      <li>체력(게이밍)</li>
      <li>패션 헬스(Fashion health)</li>
      <li>헬스클럽(health club)</li>
      <li>구글 헬스: 구글이 제공하는 개인 의료 정보 서비스</li>
    </ul>
  </body>
</html>

3. HTML 주석

<!-- 메모 -->

✨ 단축키

윈도우: Ctrl+/
맥: command+/