티스토리 뷰

Web 개발/HTML,CSS

HTML | 기본 구조, meta tag, script tag

최입동 2021. 6. 7. 09:00
320x100

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다.

문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다.

HTML이란

HyperText Markup Language의 약자로 사용자가 페이지를 넘나들며 정보를 얻을 수 있는(HyperText) 문서를 태그(tag)를 이용한(Markup) 문법으로 만드는 언어입니다.

기본 구조

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML Study</title>
  </head>
  <body>
    <h1>Let's study HTML!</h1>
    <main>
      <ul>
        <li>기본 구조</li>
        <li>주요 태그</li>
        <li>Semantic HTML</li>
      </ul>
    </main>
    <script src="./src/index.js"></script>
  </body>
</html>

최상위 레벨에 html tag, 그 하위 레벨에 head, body tag 작성합니다.

head tag

head tag 하위에는 페이지에 표시되지는 않지만 페이지에 필요한 메타데이터를 작성합니다.

 

meta tag

  • 문서에 대한 설명. name과 content 특성을 사용하여 웹 로봇에게 이름-값 쌍으로 제공 가능.
    • ex) <meta name="description" content="검색 시 헤드라인 아래에 나오는 페이지 요약">
    • ex) <meta name="keywords" content="메인 키워드,콤마로 구분,기술의 발전으로 많이 사용되지 않음">
  • charset: 문서의 인코딩 방식
  • viewport
    • 반응형 웹을 위한 HTML5 추가 기능. 페이지 로드 시, 초기 페이지 너비와 줌 레벨 설정.
    • 일반적인 모바일 대응용 설정 [참고1] [참고2]
      • <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 추가 참고자료

title tag

  • 문서의 이름. 브라우저 탭의 이름이자 검색 시 SEPRs(Search Engine Results Pages)에 클릭 가능하게 표시되는 헤드라인.

body tag

body tag 하위에는 html tag를 이용하여 페이지에 표시될 문서를 작성합니다. 문서 작성과 관련한 HTML Semantics는 다음 글에서 다룰 예정입니다.

 

script tag

  • 데이터나 실행 가능한 코드를 문서에 포함할 때 사용(ex. JavaScript, JSON etc.)
  • body tag의 마지막에 위치 시킴
    • DOM이 완성된 후에 조작하기 위해
    • JavaScript 로딩/파싱/실행에 영향 없이 빠르게 페이지를 로딩하기 위해
  • 비동기 로딩
    • src 속성으로 파일을 로드하는 경우, 아래 속성을 사용하여 HTML 파싱과 JS 로드를 비동기적으로 실행 가능.
    • async 속성 - JS 로드 완료 직후 JS 실행(JS 실행 시에는 HTML 파싱 중단). JS 실행 순서 보장 안됨.
    • defer 속성 - JS 로드 완료와 무관하게 HTML 파싱 완료 직후 JS 실행(DOMContentLoaded 발생 직전).

일반적인 Convention [참고]

  • DOCTYPE 선언하기
  • 태그와 속성은 소문자로 작성하기
  • 속성의 값은 소문자와 숫자, _의 조합을 사용하며 ""(따옴표)로 감싸기
  • 기본 언어 설정하기 <html lang="en-US">
  • 이미지 태그에는 width, height, alt 속성 작성하기
  • 의미 없는 blank와 indent 제거하기

유효성 검사 사이트

320x100
저작자표시 비영리 동일조건

'Web 개발 > HTML,CSS' 카테고리의 다른 글

TIL | Sass - mixins vs @extend(inheritance)  (0) 2021.08.23
PostCSS vs Scss ?  (0) 2021.06.23
HTML Semantics  (0) 2021.06.16
HTML | DOCTYPE  (0) 2021.05.17
댓글