끄적끄적 개발 블로그입니다.

2 분 소요

HTML 문서 구조

HTML 문서는 요소와 태그 그리고 속성과 속성값으로 구성됩니다. 요소는 웹페이지에 나타낼 콘텐츠에 의미를 부여하며 시작과 종료 태그 그리고 내용으로 구성됩니다.

태그는 요소를 만들기 위해 사용되는 표기법입니다. 속성은 시작 태그 안에 작성하여 요소에 추가 정보를 부여하며, 속성값은 속성에 부여하는 값입니다.

구성 요소 설명
요소 시작과 종료 태그, 내용으로 구성된 모든 HTML 요소
예) <title> 문서의 제목 </title>
태그 시작 태그 < >와 종료 태그 </ > 로 요소 정의 일부 요소는 종료 태그 없음(예: <br>)
속성 요소에 추가 정보 부여. 요소의 시작 태그 내에 사용
예) <body id= “page”> 문서의 내용 </body>
속성 값 속성에 대한 값
예) <body id="page"> 문서의 내용 </body>		 
<! DOCTYPE html>
<html>
  <head>
    <title>웹 페이지 제목</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
            minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi"/>
    <!-- 전화, 주소, 이메일 자동 링크 없애기-->
    <meta name="format-detection" content="telephone=no, address=no, email=no" />
    <!-- 기본 포멧 삭제-->
    <meta name="format-detection" content="no" />
    <meta name="title" property="og:title" content="타이틀">
    <meta name="images" property="og:image" content="대표 이미지">
    <meta name="description" property="og:description" content="설명">
    <meta name="type" property="og:type" content="저작권">
    <script type="text/javascript" src="외부 자바스크립트 파일"></script>
    <link rel="stylesheet" type="text/css" href="외부 CSS 파일">
  </head>
  <body>
  </body>
</html>

  1. <! DOCTYPE html>

    이 문서가 지켜야 할 표준을 알려주는 DTD(document type definition)입니다. DTD는 현재 문서에서 사용할 수 있는 요소나 속성을 정의하는 기준이 되며, 웹 브라우저가 렌더링 모드를 확인하고 문서의 규칙을 결정하는 데 사용합니다.

  2. <html>

    HTML 문서의 시작을 알리는 태그입니다. </html>과 함께 웹 문서 전체를 감싸는 형태로 작성합니다.

  3. <head>

    사이트의 제목인 <title>을 비롯해서 문서의 정보를 담는 <meta> 그리고 CSS 파일과 자바스크립트 파일 등을 불러올 수 있습니다.

  4. <title>웹 페이지 제목</title>

    현재 문서의 제목을 작성합니다. 즐겨 찾기로 등록 할 때, 제목이 되며 검색 엔진이 페이지의 내용을 파악할 때 기본으로 사용하므로 알맞게 작성해야 합니다.

  5. <meta charset=”UTF-8” >

    브라우저에는 표현되지 않지만 현재 HTML 문서에 대한 정보를 요약해서 담고 있습니다.

  6. <script type=”text/javascript” src=”외부 자바스크립트 파일”></script>

    <script>는 문서에 자바스크립트를 포합합니다. scr속성으로 외부의 자바스크립트 파일을 불러오거나 <script></script>사이에 직접 작성할 수 있습니다.

  7. <link rel=”stylesheet” type=”text/css” href=”외부 CSS 파일” >

    <link> 를 사용해 외부의 CSS 파일을 연결합니다.

  8. <body>

웹 브라우저에 나타낼 내용을 작성하는 본문 태그입니다. DTD에 선언된 기준에 따라 유효성에 맞게 작성해야 합니다.

시멘틱 웹이란?

HTML 문서를 통해 정보를 전달하기 위해서는 논리적인 구조로 의미 있게 작성되어야 합니다. 각 콘텐츠를 나타낼때 그 의미에 맞는 태그를 사용하고 의미에 맞게 논리적인 구조로 작성하는 것을 시맨틱이라고 합니다.

시맨틱(semantic) 웹은 컴퓨터(웹 브라우저)가 사람을 대신하여 정보를 읽고 이해하는 지능형 웹을 가리킵니다.

일관성 있고 표준화된 코드 사용하기

HTML문서는 표준화된 방법으로 일관되게 작성해야 합니다. » 코드를 읽기 쉽게 구조화 가능하며, 논리 정연하게 정리도니 정보를 제공할 수 있습니다.

웹 접근성 지키기

웹에서 제공하는 모든 정보는 누구나 동등하게 접근하고 이용가능해야 합니다.

코드의 가독성 고려하기

우베 사이트는 대부분 여러 사람과 협업하여 만드므로 코드를 읽기 쉽게 작서해야 합니다. 혼자만 보는 파일이 아니기 때문에 다른 설명이 없어도 구조를 쉽게 알 수 있도록 그룹화하고 아이디나 클래스등을 의미있는 이름으로 작성해야 합니다.

업데이트:

댓글남기기

참고