방법 1: 말이 되나요?
<span class="heading">기사 제목</span>
<span>은 상황에 따라 편리한 태그가 될 수 있지만 제목의 전체 의미를 전달하지는 않습니다. 이 방법을 사용하면 CSS 규칙을 첨부하고 제목 클래스를 할당하여 텍스트가 제목처럼 표시되도록 할 수 있다는 장점이 있습니다.
.제목 {
글꼴 크기: 24px;
글꼴 두께: 굵게;
색상: 파란색;
}
자, 이제 모든 제목은 크고 굵은 글꼴과 파란색의 제목 클래스로 표시됩니다. 기이! 하지만 이것이 옳은 일일까요? 누군가가 CSS를 지원하지 않는 브라우저로 해당 콘텐츠를 보면 어떻게 되나요?
예를 들어, 우리가 설정한 외부 스타일 시트의 규칙이 이전 버전의 브라우저에서 지원되지 않으면 어떻게 되나요? 아니면 시각 장애가 있는 사람이 스크린 리더를 사용하여 이 페이지를 읽는다면 어떻게 될까요? 이러한 수단을 통해 방문자가 보거나 듣는 내용은 페이지의 일반 텍스트와 다르지 않아야 합니다.
class="heading"이 태그에 약간의 의미를 추가하기는 하지만 <span>은 여전히 대부분의 브라우저의 기본 스타일에 따라 수정될 수 있는 일반 태그일 뿐입니다.
검색 엔진은 이 페이지를 크롤링할 때 <span> 태그가 존재하지 않는 것처럼 무시하고 해당 태그에 포함될 수 있는 키워드에 추가 주의를 기울이지 않습니다. 검색 엔진과 제목의 관계에 대해서는 나중에 자세히 설명하겠습니다.
마지막으로 <span> 태그는 인라인 요소이므로 <p> 태그나 <div> 태그와 같은 추가 블록 수준 요소 내에 중첩하여 별도의 줄을 형성해야 할 수도 있습니다. , 불필요한 코드로 인해 태그가 더욱 복잡해집니다. CSS를 지원하지 않는 브라우저에서 동일한 텍스트를 표시하려면 이러한 추가 태그가 필요합니다.
방법 2: <p>와 <b>의 조합
<p><b>기사 제목</b></p>
단락 태그를 사용하면 블록 수준 표시가 제공되고 <b>는 텍스트를 굵게 표시합니다. 그러나 중요한 제목을 표시하기 위해 이 방법을 사용하면 우리는 똑같이 의미 없는 결과에 직면하게 됩니다.
방법 A와 달리 <b> 태그는 CSS를 지원하지 않는 브라우저에서도 시각적 브라우저에서 텍스트를 굵게 표시할 수 있습니다. 그러나 <span> 태그와 마찬가지로 검색 엔진은 단락에 굵은 글씨로 표시되어 있다고 해서 더 높은 우선순위를 부여하지 않습니다.
스타일링이 어렵다
<p>와 <b>의 일반적인 조합을 사용하면 또 다른 단점이 발생합니다. 이 제목을 다른 단락과 다르게 디자인하는 것은 불가능합니다. 페이지 내용을 더 명확하고 체계적으로 만들기 위해 제목을 강조하는 특별한 스타일을 사용하고 싶을 수도 있지만 이 방법을 사용하면 제목이 굵게 표시될 뿐입니다.
방법 3: 스타일에 내용을 더함
<h1>기사 제목</h1>
글쎄, 정말 훌륭한 제목 정의입니다. 대부분의 웹 디자이너는 이에 익숙합니다. 실제로 <Hn>을 적절하게 사용하면 페이지 콘텐츠에 유연하고 색인화 가능하며 스타일 지정이 가능한 구조를 제공할 수 있습니다.
이것은 또한 그것을 정의하는 현명한 방법이며 매우 간단하다는 것을 알게 될 것입니다. 더 이상 추가 태그가 필요하지 않으며 이 방법은 다른 두 가지 방법보다 아주 조금 더 많은 바이트를 절약할 뿐이라고 주장할 수 있습니다. 이는 무시할 수 있지만 절약 횟수는 중요합니다.
<h1>부터 <h6>까지는 가장 중요한 제목(<h1>)부터 가장 중요하지 않은 제목(<h6>)까지 6가지 수준의 제목을 나타냅니다. 그것들은 블록 수준 자체이므로 개별적으로 정렬하기 위해 다른 요소를 추가할 필요가 없습니다. 간단하고 효과적입니다. 훌륭한 도구입니다.
쉽게 스타일을 사용자 정의
<h1> 태그를 고유하게 사용하고 <b> 또는 <p> 태그가 페이지 전체에 사용하기에 더 적합하기 때문에 다양한 CSS 방법을 사용하여 스타일을 지정할 수 있습니다.
게다가 제목 태그는 스타일을 전혀 지정하지 않고도 제목을 명확하게 나타낼 수 있습니다! 시각적 브라우저는 <h1>을 더 큰 굵은 글꼴로 표시합니다. 스타일이 지정되지 않은 페이지는 의미를 전달하는 적절한 제목 태그와 함께 문서 구조를 예상대로 표시합니다.
화면 판독기, PDA, 휴대폰, 시각적 및 비시각적 브라우저는 모두 제목 태그를 만났을 때 무엇을 해야 하는지 알고 이를 올바르게 처리하며 페이지의 일반 텍스트보다 더 심각하게 처리합니다. <span> 태그를 사용하면 CSS를 지원하지 않는 브라우저는 이를 특별히 처리하지 않습니다.
짜증나는 기본 스타일
과거에는 브라우저 기본값이 너무 보기 흉했기 때문에 디자이너들이 제목 태그 사용을 완전히 피했을 수도 있습니다. 또는 기본 크기가 크기 때문에 <h1> 또는 <h2> 사용을 피하고 대신 더 작은 크기를 얻으려면 더 높은 번호의 제목 태그를 사용하세요.
그러나 CSS를 사용하여 이러한 제목 태그를 쉽게 변경할 수 있다는 점을 강조하는 것이 중요합니다. 예를 들어 < ;h1>은 화면의 절반을 차지하는 거대한 태그일 필요는 없습니다. 나중에 CSS를 사용하여 제목 태그 스타일을 지정하는 것이 얼마나 간단한지 설명하여 압도적인 두려움을 완화할 수 있기를 바랍니다.
검색 엔진 친화적
이것은 큰 이점입니다. 검색 엔진은 제목 태그를 좋아합니다. 반면에 <span> 태그나 일반 굵은 단락 태그는 의미가 적습니다. <h1>부터 <h6>까지 제목을 적절하게 표시하려면 약간의 노력만 필요하지만 검색 엔진이 페이지를 더 쉽게 크롤링할 수 있으므로 사람들이 궁극적으로 해당 페이지를 찾을 수 있습니다.
검색 엔진 봇은 제목 태그에 특별한 주의를 기울입니다. 여기에 키워드를 넣을 수 있습니다. <title>과 <meta>가 검색되는 것처럼 제목 태그를 따라 페이지를 검색합니다. 이러한 태그를 사용하지 않으면 태그에 포함된 키워드는 가치 있는 것으로 간주되지 않으며 무시됩니다.
따라서 약간의 노력만 하면 사람들이 페이지의 콘텐츠를 기반으로 귀하의 사이트를 찾을 가능성을 높일 수 있습니다. 좋은 것 같지 않나요?
제목 순서에 대해
예에서 이 특정 제목은 문서의 제목이므로 페이지에서 가장 중요합니다. 따라서 가장 중요한 제목 태그인 <h1>을 사용합니다. W3C 사양에 따라 일부 사람들은 여러 제목 수준을 건너뛰는 것이 나쁜 습관이라고 생각합니다. 예를 들어, 다음 페이지에 있다고 가정해 보겠습니다.
<h1>기사 제목</h1>
다음 제목(다른 <h1>과 반복되지 않는 경우)은 <h2>, 그 다음 <h3> 등이 됩니다. <h1> 이후 한 레벨을 건너뛰고 바로 <h3>으로 이동하면 안 됩니다. 나는 위의 관점에 동의하고 레이아웃 구조를 구성하기 위해 텍스트를 따라 레벨의 연속성을 유지하는 경향이 있습니다. 이렇게 하면 기존 페이지에 제목과 스타일을 추가하는 것이 더 쉽고 추가 숫자를 사용하여 발생하는 오류를 줄일 수 있습니다.
앞서 언급했듯이 디자이너는 기본 글꼴 크기가 <h1>만큼 크지 않기 때문에 <h4>를 사용하여 페이지의 가장 중요한 제목에 태그를 지정할 수 있습니다. 하지만 구조를 먼저 만들고 디자인은 나중에 한다는 점을 기억하세요. 언제든지 CSS를 사용하여 원하는 텍스트 크기로 제목 스타일을 지정할 수 있습니다.