HTML 태그를 직접 만들어 사용할 수 있음

• HTML에서는 인식되지 않는 태그 이름을 사용해도 브라우저가 이를 일반 요소로 처리함
• CSS에서 해당 태그 이름을 선택자로 지정하면 스타일 지정과 표시 제어가 가능함
• 하이픈(-)이 포함된 이름을 쓰면 미래 HTML 표준과의 충돌을 방지할 수 있음
• <div>나 <span> 대신 의미 있는 사용자 정의 태그를 쓰면 코드 가독성이 높아짐
• 복잡한 중첩 구조에서도 태그 이름만으로 구조를 파악하기 쉬워, 유지보수가 용이함

사용자 정의 HTML 태그의 활용

• 브라우저는 알 수 없는 태그를 일반 블록 요소처럼 렌더링함

  • 이는 HTML 표준에 명시된 정상 동작으로, CSS에서 스타일을 지정하면 시각적으로 제어 가능
  • 예시로 <cool-thing> 같은 태그를 정의하고 CSS에서 cool-thing { ... } 형태로 꾸밀 수 있음

• 태그 이름에 하이픈(-) 을 포함하면 향후 HTML 표준에 추가될 가능성이 없어 충돌 위험이 없음

  • 예: <main-article>, <quote-body> 등

가독성과 구조 개선

• <div>나 <span> 대신 의미 있는 이름의 태그를 사용하면 코드 이해가 쉬워짐
  • 예를 들어 <div class="article-header"> 대신 <article-header>를 사용 가능
• 중첩된 <div> 구조에서는 닫는 태그 위치를 파악하기 어렵지만, 명시적 태그 이름을 쓰면 구조가 명확해짐
  • <main-article> 내부에 <article-header>, <article-quote> 등으로 구성하면 DOM 구조 파악이 직관적임

예시 코드

• 기존 방식 <div class="cool-thing"> Hello, World! </div>
• 사용자 정의 태그 방식 <cool-thing> Hello, World! </cool-thing>
  • CSS에서 cool-thing { display: block; font-weight: bold; text-align: center; ... } 형태로 스타일 지정 가능

결론

• HTML 표준이 허용하는 유연한 태그 정의 기능을 활용하면,
  가독성 높은 구조적 마크업을 작성할 수 있음
• 단, 기존에 정의된 의미 있는 태그가 있을 경우에는 기존 태그 사용이 우선임