CSS를 대신 사용할 수 있는데 왜 p, span, hx 태그와 같은 태그를 사용해야합니까?

CSS를 대신 사용할 수 있는데 왜 p, span, hx 태그와 같은 태그를 사용해야합니까? SEO 관점에서 중요합니까?

짧은 버전은 다양한 태그와 CSS의 목적이 다르다는 것입니다.

<h1>Whatever</h1>예를 들어 "이것은 헤더, 중요한 1 단계 헤더"등과 같이 그 의미와 함께 어느 정도의 의미를 갖습니다. 일부 파서는 hx 태그 (및 기타)를 사용하여 데이터 처리에서 접근성 (예 : 스크린 리더가 다음 h3으로 건너 뛰어 웹 마스터 홈페이지의 다음 질문으로 건너 뛰는 경우)에 사용할 수있는 문서 구조의 개요 를 만듭니다 . .

CSS로 수행 할 수있는 작업을 기반으로 시맨틱 태그를 해제 할 수 없으며 그 반대도 마찬가지입니다.
CSS를 다른 태그에 적용 하여 h1과 동일 하게 보이 도록 할 수 있습니다 . 예를 들어, <span style="font-weight:bold;font-size:2em">Whatever</span>여전히 해당 범위 태그 를 기능 및 의미 측면에서 실제 헤더 로 만들지는 않습니다 . 이 경우, 위의 링크는 헤더가 아니기 때문에 임의로 불가능한 것입니다. 그러나 임의로 텍스트를 크고 대담하게 만들었습니다.

마크 업과 프리젠 테이션이 다릅니다

이것은 "도장을 할 때 왜 벽을 가져야합니까?"라고 묻는 것과 같습니다. :)

HTML 태그는 콘텐츠가 무엇인지를 나타냅니다 . 제목, 목록 등입니다.

CSS 는 콘텐츠의 모양을 나타냅니다. 헤드 라인은 파란색이어야하고 목록은 이만큼 들여 써야하며 메뉴는 왼쪽에 있어야합니다.

Javsascript는 페이지의 작동 방식 ( 애니메이션 등)을 알려줍니다 .

따라서 HTML 내용이 없으면 CSS와 Javascript는 실제로 작동하지 않습니다.

이러한 카테고리는 100 % 흑백이 아닙니다. 예를 들어 CSS는 이제 애니메이션 인 "전환"을 지정할 수 있지만 기본 아이디어입니다.

여기 및 여기 에서 StackOverflow에서이 주제에 대한 이전 토론을 참조 하십시오 .

좋은 마크 업은 많은 노력을 절약하고 더 잘 작동합니다.

무언가 링크처럼 동작하기를 원한다면 <span class="mylink">CSS와 JS를 사용 하고 사용하여 모양과 느낌을 적절하게 만들 수 있습니다. 또는<a> 브라우저가 이미 수행 할 작업을 알고 있고 빠른 기본 코드로 로직을 구현했기 때문에 다운로드 할 추가 코드없이 요소를 사용하여 무료로 모든 것을 얻을 수 있습니다. 또한 스크린 리더, 모바일 브라우저, 검색 엔진, 애그리 게이터 및 기타 생각하지 못한 사용 사례에서 올바르게 작동 할 가능성이 훨씬 높습니다.

이것은 당신이 사용해야하는 이유도 <button>클릭 할 수있는 조치를 들면,이 <label>레이블을 <input>하고, <main>페이지의 주요 섹션.

좋은 마크 업이 SEO에 미치는 영향

기본적으로 SEO는 귀하의 콘텐츠가 검색어와 가장 일치한다고 검색 엔진을 설득하는 것입니다. 분명히 Google의 어느 누구도 모든 웹 페이지를 개인적으로 읽고 순위를 매기는 사람이 없습니다.

따라서 검색 엔진이 컨텐츠가 무엇인지 알기 위해서는 프로그램이 구문 분석해야합니다.

그리고 봐요! 우리는 기계가 이해할 수있는 방식으로 귀하의 콘텐츠에 라벨을 붙이기 위해 HTML이라고하는이 모든 언어를 가지고 있습니다! :)

예, 명확한 마크 업은 검색 엔진이 페이지를 더 잘 색인하는 데 도움이됩니다.

극단적 인 예를 사용하려면 페이지의 헤드 라인이 실제로 신문 헤드 라인에서 찍은 사진 인 경우 흥미로워 보일 수 있으며 사람들은 잘 읽을 수 있지만 검색 엔진에서는 의미가없는 이미지 일뿐입니다. . 반면에 <h1>Turtle Groomer 5000</h1>위생 검사를 용이하게하는 제품은 검색 엔진에 명확하게 알려줍니다.

점자 리더를 사용해야하는 장애가있는 사람들도 생각해보십시오. 이러한 경우 html 태그는 시각적 CSS 스타일보다 훨씬 중요합니다.

Su는 의미 부분에 대답했습니다. SEO와 관련하여 검색 엔진에서 h1 요소에 다른 태그보다 가중치가 더 많이 부여됩니다. h2 / b / strong 태그는 일반 텍스트보다 약간 더 무겁습니다.

대부분의 다른 태그는 거의 동일하지만 항상 작업에 가장 적합한 태그를 사용해야합니다. Google은 최근 테이블 형식 데이터에 사용될 때 테이블 구문 분석을 시작했으며, 적절하게 사용되는 다른 HTML이 다른 컨텐츠보다 어떤 컨텐츠가 더 중요한지 신호를 줄 수 있습니다.

HTML5의 경우 HTML5에서 굵은 기울임 꼴을 확인하십시오 .

요약:

사용 <b>하면 텍스트가 다른 문맥 중요성없이 스타일 만 사용하도록 할 때 <strong>당신은 내용이나 SEO 관점에서 여분의 중요성을 가지고 텍스트를 할 때.

<i>텍스트의 분위기를 상쇄하는 데 사용 하지만 <em>텍스트를 강조하기 위해 사용하십시오 .

또한 : 장애가있는 사용자에게 의미론의 중요성을 잊지 마십시오. Screenreader 소프트웨어는 이러한 의미에 의존하여 시각 장애인에게 장애로 인해 누락 된 필수 컨텍스트를 제시합니다.

첫째, <hx>다른 사람들이 언급했듯이 제목을 정의하기 때문에 다소 중요한 태그입니다. 제목은 모양뿐만 아니라 모양이 비슷하지 않은 방식으로 섹션을 분리하기 때문에 매우 유용합니다. 예를 들어 Wikipedia를 살펴보십시오. 일부 프로그램은 이러한 종류의 태그를 사용하여 문서를 "분리"하거나 자동 목차를 만듭니다. 검색 엔진은 <h1>제목 (제목)이기 때문에 태그 내의 텍스트 가 더 중요하다고 가정합니다 .

다음으로 스타일 시트는 훌륭하지만 일부 장치는 스타일 시트를 무시하고 HTML에만 초점을 맞 춥니 다. HTML과 같은 태그 <em>가 유용한 곳입니다. 스타일 시트가 비활성화되어 있거나 스타일 시트를로드하는 데 문제가있는 경우 (예 : 인터넷 연결 문제) 텍스트는 여전히 형식이 나타납니다. <em>또한 이탤릭체만으로는 영화 제목에서 이미지 캡션을 만드는 것과 일반 텍스트와 다를 수 있습니다. 이것은 장애 도구를 사용하는 사람들이 사용할 수 있으며, 그렇지 않으면 일반적으로 강조하지 못합니다.

<span>반면에, 대부분의 인라인 버전 <div>태그 및 어떤 경우, 그것은 단지 당신이 정말로 사용하고자하는 것, 그 존재가 말했다 (에 별도의 클래스를 입력하는 수고를 덜 수 있습니다 <span class="italic">대신 <i>모든 기울임 예를 들어 코드를 읽기가 어렵고 표준화가 덜되어 있고 (대부분의 사람들이 전자를 후자를 사용할 것이라는 광범위한 가정하에) 문서를 향상 시키지는 않습니다.

<p>또한 텍스트를 관리 <br />할 수없는 단락으로 나눌 수없는 방식으로 분리 할 수 ​​있기 때문에 장애가있는 사용자에게도 유용합니다 .

물론 HTML은 스타일링을위한 것이 아니라 디자인과 스타일 사이에 섬세한 선이 있습니다. 솔직히 말해서 사용자 선호라고 생각합니다. 사용 여부 <i>또는 <span class="italic">, 당신까지, 그리고 검색 엔진 최적화에 대한 차이를 만들 수 없습니다. 결국, 왜 우리가 일을하는 한 가지 방법으로 만 제한합니까? (JavaScript에서 줄 끝에서 세미콜론을 사용할지 여부를 선택할 수있는 방법과 같이 항상 사용하지만 다른 사람들은 절대로 사용하지 않으며 기능에 전혀 차이가 없습니다.)