미새문지

24.08.19 day48 HTML 작성 규칙 본문

개발 TIL

24.08.19 day48 HTML 작성 규칙

문미새 2024. 8. 19. 23:46
728x90

HTML 작성 규칙

HTML은 웹 페이지를 작성하는 데 사용하는 표준 언어이다. HTML 코드를 작성할 때는 몇 가지 기본적인 규칙을 따르는 것이 중요한데, 이러한 규칙은 HTML 문서를 올바르게 구성하고, 웹 브라우저가 이를 정확하게 해석하도록 돕는다.

HTML 코드 작성 기본 규칙

문서 구조

HTML 문서는 기본적으로 다음과 같은 구조를 가진다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document Title</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
  • <!DOCTYPE html>: 문서 유형을 선언한다. HTML5의 경우 <!DOCTYPE html>을 사용하여 문서가 HTML5 표준을 따름을 명시함
  • <html>: 문서 전체를 감싸는 루트 요소
  • <head>: 메타데이터와 관련된 정보를 담는다. 예를 들어, 페이지 제목(title), 문자 인코딩(meta), 외부 CSS 파일 링크 등이 들어감
  • <body>: 실제 콘텐츠가 포함되는 영역이며, 텍스트, 이미지, 링크, 폼 등 웹 페이지에서 보여지는 모든 내용이 이 안에 들어감

 

태그는 열고 닫아야 함

대부분의 HTML 태그는 시작 태그(<tag>)와 종료 태그(</tag>)로 이루어져 있다.

태그를 열면 반드시 닫아야 하며, 중첩된 태그의 경우 안쪽 태그부터 닫아야 한다.

<p>hello, world</p>

예외: <img>, <input> 같은 일부 태그는 종료 태그 없이 자체적으로 종료되는 빈 태그(self-closing tag)입니다. 그러나 HTML5에서는 종료 태그 없이 단일 태그로 사용 가능하다.

<img src="image.jpg" alt="Description">

 

태그 중첩 규칙

HTML 태그는 중첩될 수 있다. 이 때, 내부에 포함된 태그는 먼저 닫혀야 하며 잘못된 중첩은 오류를 발생시킬 수 있다.

올바른 예:

<div>
  <p>This is <strong>important</strong> text.</p>
</div>

잘못된 예: 

<div>
  <p>This is <strong>important</p></strong>
</div>

 

 

속성(Attribute) 사용

HTML 태그는 다양한 속성을 가질 수 있다. 속성은 태그에 추가 정보를 제공하며, 속성 값은 따옴표로 감싸야 한다.

<a href="https://example.com" target="_blank">Visit Example</a>

 

  • href: 링크의 URL을 지정하는 속성
  • target: 링크가 열릴 방법을 지정하는 속성(예: 새 창에서 열리게 설정)

 

주석

주석은 코드에 설명을 추가하는 데 사용되며, 브라우저에 의해 무시된다. 주석은 <!--로 시작하고 -->로 끝난다.

<!-- This is a comment -->

 

 

 

문자 인코딩 설정

HTML 문서에서 문자를 제대로 표시하기 위해 반드시 <meta charset="UTF-8">을 추가해야 하며, 이를 통해 유니코드(UTF-8)를 사용할 수 있다.

 

대소문자 구분

HTML 태그와 속성 이름은 대소문자를 구분하지 않는다. 그러나 HTML5에서는 모든 태그와 속성 이름을 소문자로 작성하는 것이 관례이다.

<p>This is correct.</p>

 

 

접근성 고려

HTML 작성 시 접근성을 고려해야 한다.

예를 들어, 이미지에는 alt 속성을 포함하여 대체 텍스트를 제공하고, 폼 요소에는 레이블을 추가하는 것이 좋다.

<img src="image.jpg" alt="Description of the image">

 

HTML 코드를 작성할 때는 문법적으로 정확한 태그 사용, 코드의 계층적 구조 준수, 태그와 속성의 올바른 사용을 신경 써야 한다. 이러한 규칙을 따르면 웹 페이지가 표준에 맞게 표시되고 다양한 기기에서 일관된 사용자 경험을 제공할 수 있다.

 

728x90
저작자표시 비영리 변경금지

'개발 TIL' 카테고리의 다른 글

24.08.21 day50 공용 컴포넌트 작성 방식  (0) 2024.08.21
24.08.20 day49 로그인 UI  (0) 2024.08.20
24.08.16 day47 필터 구현  (0) 2024.08.16
24.08.14 day46 CSS 적용 방식  (0) 2024.08.14
24.08.13 day45 타입스크립트 경로 에러, SPA  (0) 2024.08.13
'개발 TIL' Related Articles more