본문 바로가기
Frontend/HTML

[HTML] HTML 규칙

by cogito21_js 2024. 6. 8.
반응형

HTML 코딩 컨벤션, 네이밍 컨벤션, 그리고 규칙을 정리한 가이드를 제공하겠습니다. 이 가이드는 코드의 가독성을 높이고 유지보수성을 향상시키는 데 중점을 둡니다.

HTML 코딩 컨벤션

1. 문서 구조

HTML 문서는 항상 다음과 같은 기본 구조를 따라야 합니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

2. 들여쓰기 및 공백

  • 들여쓰기: 일반적으로 2칸이나 4칸의 공백을 사용합니다. 탭보다는 공백을 사용하는 것이 권장됩니다.
  • 공백: 요소 간의 공백을 적절히 사용하여 가독성을 높입니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Page</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <main>
        <section>
            <h2>About Me</h2>
            <p>This is a brief introduction.</p>
        </section>
        <section>
            <h2>My Work</h2>
            <p>Here is some of my recent work.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

3. 속성 정렬 및 따옴표

  • 속성 값: 항상 따옴표로 감쌉니다. 보통 큰따옴표(")를 사용합니다.
  • 속성 정렬: 한 줄에 작성하고, 필요할 경우 공백으로 구분합니다.
<input type="text" id="username" name="username" placeholder="Enter your username">

4. 태그 닫기

  • 모든 태그: 명시적으로 닫아야 합니다. 빈 요소는 자기 닫힘 형태로 작성하는 것이 좋습니다.
<img src="profile.jpg" alt="Profile Picture">
<br>
<hr>

5. 시맨틱 마크업 사용

  • HTML5 시맨틱 요소를 사용하여 문서의 구조와 의미를 명확히 합니다.
  • 시맨틱 태그는 SEO와 접근성 향상에 도움이 됩니다.
<header>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content goes here.</p>
    </article>
</main>
<footer>
    <p>&copy; 2024 My Website. All rights reserved.</p>
</footer>

6. 주석 사용

  • 주석: 코드의 구조와 목적을 설명합니다. 주석은 <head>와 <body> 태그 내에서도 사용할 수 있습니다.
<!-- Header section -->
<header>
    <h1>Website Title</h1>
</header>

<!-- Main content section -->
<main>
    <h2>Main Heading</h2>
    <p>Paragraph of text.</p>
</main>

7. 의미 있는 클래스 및 아이디 이름 사용

  • 클래스와 아이디 이름은 의미 있고 읽기 쉽게 작성합니다.
  • camelCase 또는 kebab-case를 사용하여 단어를 구분합니다.
<div id="mainContent">
    <section class="profile-section">
        <h2>Profile</h2>
        <p>Profile information goes here.</p>
    </section>
</div>

8. 외부 파일 분리

  • 스타일(CSS)과 스크립트(JavaScript)는 외부 파일로 분리하여 링크합니다.
  • 이는 코드의 가독성과 유지보수성을 높이는 데 도움이 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script src="scripts.js"></script>
</body>
</html>

9. 접근성 고려

  • alt 속성을 사용하여 이미지에 대체 텍스트를 제공합니다.
  • 폼 요소와 연결된 <label> 태그를 사용합니다.
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

HTML 네이밍 컨벤션

1. 아이디(id)와 클래스(class) 네이밍

기본 원칙
  • 의미 있는 이름: 요소의 목적과 기능을 설명할 수 있는 이름을 사용합니다.
  • 일관성: 프로젝트 전체에서 일관된 네이밍 스타일을 유지합니다.
  • 소문자 사용: 이름은 소문자로 작성하고, 단어를 구분할 때는 하이픈(-)을 사용합니다. 대문자 사용은 지양합니다.
아이디(id) 네이밍
  • 고유성: HTML 문서 내에서 고유해야 하며 한 페이지에 한 번만 사용합니다.
  • 특정 요소에 사용: 특정 요소에 스타일을 적용하거나 JavaScript에서 참조할 때 사용합니다.
<div id="main-header"></div>
<button id="submit-button"></button>
클래스(class) 네이밍
  • 재사용 가능성: 여러 요소에 적용될 수 있으므로 반복적으로 사용 가능한 이름을 사용합니다.
  • 시맨틱한 이름: 요소의 역할이나 목적을 설명할 수 있는 이름을 사용합니다.
<div class="container"></div>
<section class="profile-section"></section>

2. 네이밍 스타일

BEM(Block Element Modifier) 방법론

BEM 방법론은 클래스 이름을 작성할 때 많이 사용하는 패턴으로, 다음과 같이 구성됩니다:

  • Block: 독립적인 블록 단위입니다.
  • Element: 블록의 구성 요소를 나타냅니다.
  • Modifier: 블록이나 요소의 변형을 나타냅니다.
<!-- BEM 방법론 사용 -->
<div class="header">
    <h1 class="header__title">My Website</h1>
    <nav class="header__nav">
        <ul class="header__nav-list">
            <li class="header__nav-item header__nav-item--active">Home</li>
            <li class="header__nav-item">About</li>
            <li class="header__nav-item">Contact</li>
        </ul>
    </nav>
</div>

3. 기본 네이밍 예시

  • container: 콘텐츠를 감싸는 기본 레이아웃 요소
  • header, footer, nav: 주요 페이지 영역
  • section, article, aside: 시맨틱 태그와 일치하는 영역
  • btn, btn-primary: 버튼 요소
  • form, form-group, form-control: 폼 요소
<!-- 기본 네이밍 예시 -->
<div class="container">
    <header class="header">
        <h1 class="header__title">Welcome to My Website</h1>
    </header>
    <main id="main-content" class="main-content">
        <section class="profile-section">
            <h2 class="profile-section__title">About Me</h2>
            <p class="profile-section__description">This is a brief introduction.</p>
        </section>
        <section class="contact-section">
            <h2 class="contact-section__title">Contact Information</h2>
            <form id="contact-form" class="contact-form">
                <label for="email" class="contact-form__label">Email:</label>
                <input type="email" id="email" name="email" class="contact-form__input" required>
                <button type="submit" class="contact-form__submit-button">Submit</button>
            </form>
        </section>
    </main>
    <footer class="footer">
        <p class="footer__text">&copy; 2024 My Website. All rights reserved.</p>
    </footer>
</div>

HTML 규칙

1. 주석 사용

코드의 목적과 구조를 설명하는 주석을 추가합니다. 주석은 코드를 이해하기 쉽게 하고 유지보수를 용이하게 합니다.

<!-- Header section -->
<header>
    <h1>Website Title</h1>
</header>



<!-- Main content section -->
<main>
    <h2>Main Heading</h2>
    <p>Paragraph of text.</p>
</main>

2. 접근성 고려

웹 페이지를 더 많은 사용자들이 쉽게 접근할 수 있도록 만드는 것입니다. 예를 들어, <label> 태그를 사용하여 폼 요소와 연결하고, 이미지에 alt 속성을 추가하여 시각 장애인들이 화면 읽기 프로그램을 통해 내용을 이해할 수 있게 합니다.

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

3. 시맨틱 마크업 사용

HTML5 시맨틱 태그를 사용하여 문서의 구조와 의미를 명확히 합니다. 이는 SEO와 접근성 향상에 도움이 됩니다.

<header>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content goes here.</p>
    </article>
</main>
<footer>
    <p>&copy; 2024 My Website. All rights reserved.</p>
</footer>
반응형
저작자표시

'Frontend > HTML' 카테고리의 다른 글

[HTML] HTML 심화  (1) 2024.06.08
[HTML] HTML 예제  (0) 2024.06.08
[HTML] HTML 기본  (0) 2024.06.08

관련글

티스토리툴바