>  기사  >  웹 프론트엔드  >  HTML5의 제목 태그 안에 단락 요소를 중첩하는 것이 유효합니까?

HTML5의 제목 태그 안에 단락 요소를 중첩하는 것이 유효합니까?

DDD
DDD원래의
2024-11-11 06:56:02554검색

Is it Valid to Nest Paragraph Elements Inside Heading Tags in HTML5?

HTML5의 제목 내에 단락을 중첩할 수 있나요? (H1 내부의 P)

질문:

HTML5의 제목(H1) 태그 내에 단락(P) 요소를 사용하는 것이 유효합니까?

답변:

아니요, W3C 지침에 따르면 유효하지 않습니다. 헤더 요소에는 A, EM 및 SPAN과 같은 요소가 포함된 "문구 콘텐츠"만 포함되어야 합니다.

중첩 단락 사용의 단점:

  • 검색 엔진 제목을 잘못 구문 분석하여 중요한 데이터가 누락될 수 있습니다. 이는 SEO에 영향을 미칠 수 있습니다.
  • 단락이 제목과 의미상 관련이 없기 때문에 HTML의 "의미론 우선, 표시는 나중에" 원칙을 위반합니다.

대체 스타일 옵션 :

제목 내의 요소에 스타일을 지정해야 하는 경우 대신 SPAN과 같은 유효한 요소를 사용하세요. 그런 다음 다음과 같이 이러한 요소에 CSS 스타일을 적용할 수 있습니다.

<h1>
    <span class="major">Major part</span>
    <span class="minor">Minor part</span>
</h1>
h1 span {
    display: block;
}

h1 span.major {
    font-size: 50px;
    font-weight: bold;
}

h1 span.minor {
    font-size: 30px;
    font-style: italic;
}

이 접근 방식은 의미 체계 마크업을 사용하면서 원하는 대로 요소의 스타일을 지정할 수 있습니다. 특정 사용 사례에 맞게 CSS 선택기를 조정하는 것을 잊지 마세요.

위 내용은 HTML5의 제목 태그 안에 단락 요소를 중첩하는 것이 유효합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.