웹 페이지를 디자인하기 위해 처음 XHTML CSS를 접했을 때, 나는 태그 사용 경험이 거의 없었고, 효과를 얻을 수만 있다면 충분할 것이라고 생각하면서 생각나는 대로 사용하는 경우가 많았습니다. 하지만 검색 엔진 최적화 지식에 대한 연구와 이해가 깊어지면서 태그 사용이 실제로 과학이라는 것을 알게되었습니다.
우리는 Script Home - jb51.net의 CSS 튜토리얼 기사에서 의미론을 강조해왔는데, HTML 태그를 어떻게 사용합니까? 일반적으로 어디에 사용되나요?
처음 XHTML CSS 웹페이지 디자인을 접했을 때 태그 사용 경험이 거의 없었고, 효과를 얻을 수만 있다면 충분할 것이라고 생각하면서 생각나는 대로 사용하는 경우가 많았습니다. . 하지만 검색 엔진 최적화 지식에 대한 연구와 이해가 깊어지면서 태그 사용이 실제로 과학이라는 것을 알게되었습니다.
여기서는 CSS의 각 태그에 해당하는 속성과 사용법에 대해 자세히 소개하지 않겠습니다. 웹 페이지의 적용에만 집중하겠습니다. 모두에게 도움이 되기를 바랍니다.
1. DIV
DIV는 XHTML 웹사이트를 구축하는 사람들에게 익숙할 것입니다. 많은 웹사이트와 자료는 웹 표준 웹사이트 구축을 DIV CSS 웹사이트 구축이라고도 부릅니다. W3C에서는 웹 페이지의 레이아웃에 Table 태그를 사용하는 것을 권장하지 않으며, 레이아웃 태그인 DIV가 자연스럽게 레이아웃의 중요한 책임을 맡게 되므로 이렇게 부르는 것이 무리가 없습니다.
DIV는 큰 컨테이너라고도 할 수 있습니다. 웹페이지의 전체적인 구조적 레이아웃 외에도 웹페이지에서 상대적으로 독립적으로 보이는 영역을 분할하여 사용하는 것이 좋습니다. 신문과 마찬가지로 DIV의 기능은 다양한 콘텐츠를 구분하는 큰 컨테이너입니다. 다양한 영역에서는 특정 상황에 따라 적절한 라벨이 선택됩니다.
2. H 태그
H 태그는 제목 태그로, 문단의 의미를 나타내기 위해 문단 앞에 자주 사용됩니다. 표현의 정도와 표현하고자 하는 의미에 따라 H1~H6으로 나눌 수 있습니다.
H1은 가장 중요하며 전체 웹사이트의 기능과 성격에 대한 설명을 표현하거나 웹사이트의 대상 독자를 나타내는 데 자주 사용됩니다. 다른 태그는 레벨에 따라 특정 지역의 이름이나 특정 소개 텍스트에 대한 일반적인 설명을 표시하는 데 사용됩니다.
H 태그는 웹 사이트에 대한 일반적인 설명이나 텍스트의 특정 단락을 나타내기 때문에 검색 엔진에 비해 가치가 높습니다. 그러나 이것이 부담없이 사용할 수 있다는 의미는 아닙니다. 예를 들어, 일부 웹사이트에서는 특정 키워드에 대한 순위를 의도적으로 추구하기 위해 H 태그를 사용하여 텍스트 단락에 키워드를 표시합니다. 또는 H 태그를 컨테이너로 사용하여 웹 페이지를 레이아웃할 수도 있습니다. 이는 H 태그의 역할을 완전히 혼동하므로 권장되지 않습니다.
3. P
P는 텍스트 집합의 서로 다른 단락을 구별하는 데 사용되는 단락 태그입니다. 검색 엔진의 경우 크롤링 순서에 따라 첫 번째 P 태그의 텍스트도 높은 값을 갖습니다. Baidu와 마찬가지로 메타 태그 설명(설명)의 텍스트를 무시하고 첫 번째 P 태그의 내용을 가져옵니다(절대적인 것은 아님).
일부 웹사이트에서는 검색 엔진이 더 많은 콘텐츠를 크롤링하고 사용자에게 더 나은 탐색 환경을 제공할 수 있도록 분류할 때
태그를 사용합니다. 때로는 원하는 효과를 전혀 얻을 수 없다는 의미는 아닙니다. 엄격하게 입력된 문서의 경우
표현형식에 속하는 태그이므로 사용이 불가합니다.
대부분의 웹사이트에서는 전환 문서 유형을 사용하지만 텍스트 분할에는 사용하지 않는 것이 좋습니다.
4. UL 및 LI 태그
순서가 지정되지 않은 목록이고 UL 태그는 목록의 선언이며 LI는 목록 항목입니다. 프로젝트의 상대적인 독립성으로 인해 탐색, 뉴스 또는 기사 목록 등에 자주 사용됩니다. UL은 다양한 목록을 구별하는 컨테이너로도 사용할 수 있습니다.
일부 웹사이트는 "웹 표준"을 추구하고 테이블을 UL 및 LI로 변환할 수 있습니다. 이로 인해 웹 페이지를 읽고 유지 관리하기가 어려워집니다. 이는 웹 표준이 전달하는 개념에 어긋납니다.
5. 테이블
여기서는 테이블의 사용법에 대해 자세히 소개하지 않겠습니다. 단지 웹 표준이 테이블을 앞으로 사용할 수 없다는 의미는 아니지만 권장되지 않는다는 점만 말씀드리고 싶습니다. 레이아웃에는 테이블을 사용하고 사용할 시간만 표시합니다. 따라서 웹을 준수하는 웹페이지와 Table 태그를 사용하는 것에는 모순이 없습니다.
6. 검색 엔진을 위해 준비된 태그
(1) 제목: 웹 페이지의 제목과 웹 사이트에 대한 설명입니다. 하위 태그는 검색 엔진에도 유용하며 종종 대상 키워드를 포함합니다.
(2) 메타 키워드: 웹 페이지의 주요 키워드입니다. 원래는 검색 엔진이 쉽게 웹 사이트를 분류할 수 있도록 하기 위해 마련되었으나 나중에 많은 웹 사이트에서 키워드 순위를 더 유리하게 만들기 위해 이 태그를 부정 행위로 사용하는 경우가 많았기 때문에 이제 이 태그는 검색 엔진에서 거의 의미가 없습니다.
(3) 메타 설명: 웹페이지에 대한 설명입니다. 키워드와 마찬가지로 원래는 검색 엔진 분류를 용이하게 하기 위한 것이었습니다. 또한 많은 웹사이트에서 이 태그를 사용하여 속임수를 쓰기 때문에 더 이상 검색 엔진에 중요하지 않습니다. 현재 주류 검색 엔진 중 Google만이 여전히 콘텐츠를 크롤링하고 있지만, 콘텐츠를 기반으로 키워드를 결정하는 경우는 거의 없습니다.
사실 검색 엔진에서 가장 중요한 것은 콘텐츠의 품질입니다. 마찬가지로, 우리는 방문자에게 자신을 홍보하기 위해 웹사이트를 구축합니다. 신속성 때문에 기본을 잊지 마시기 바랍니다. 결국 사용자는 웹사이트 순위가 아니라 정보가 자신에게 필요한 것인지 여부에 관심을 갖습니다.
위 내용은 초보자가 혼동하기 쉬운 일반적으로 사용되는 태그입니다. 앞으로 새로운 문제가 발생하면 최근 계속 확장될 예정인 jb51.net의 업데이트된 CSS 튜토리얼에 주목해 주세요. .
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
