구조와 표현을 분리하는 또 다른 중요한 측면은 문서 내용을 구조화하기 위해 의미론적 마크업을 사용하는 것입니다. XHTML 요소가 있다는 것은 표시된 콘텐츠의 일부가 해당 구조적 의미를 갖고 있으며 다른 마크업을 사용할 이유가 없음을 의미합니다. 즉, CSS가
태그 제목 대신
를 사용하여 하나의 HTML 요소를 다른 HTML 요소처럼 보이게 만들지 마세요.
먼저, 시맨틱스와 기본 스타일의 차이점에 대해 말씀드리자면, 기본 스타일은 브라우저에서 설정한 흔히 사용되는 태그의 표현입니다. Hx 시리즈는 굵고 큰 글꼴 크기로 인해 제목과 매우 유사해 보입니다. ,은 다른 단어와 구별하고 강조하는 역할을 하는 데 사용됩니다. 목록과 표는 해당 기능이 무엇인지 명확하게 알려줍니다.
둘째, 시맨틱 웹 페이지의 가장 중요한 이점은 검색 엔진에 친숙하다는 것입니다. 구조와 의미가 좋으면 웹 콘텐츠가 자연스럽게 검색 엔진에 의해 쉽게 크롤링되며 웹 사이트를 홍보하는 데 드는 노력을 줄일 수 있습니다.
,
,
,
,
,
은 중요도 순으로 제목으로 사용됩니다.
이 가장 높은 수준입니다. 예:
<h1>文档标题</h1>
<h2>次级标题</h2>
로그인 후 복사
문서 제목
또는 문서 제목을 사용하는 대신 분명히 검색 엔진은 후자를 사용하지 않을 것입니다. 제목에 하나.
단락 기호,
를 단락으로 알고 나면 더 이상 를 사용하여 단락을 구분할 필요가 없습니다. 단락.
의 텍스트는 자동으로 줄 바꿈되며 줄 바꿈 효과는 보다 좋습니다. 단락 사이의 간격도 CSS를 사용하여 제어할 수 있으므로 단락을 서로 구별하는 것이 쉽고 명확합니다. line-height를 사용하면 선 사이의 간격을 쉽게 정의할 수 있고, 첫 글자 장식과 같은 효과를 정의할 수 있어 완벽합니다. 예:
포럼과 블로그에서는 다른 사람을 인용할 때 짧은 한 줄 인용문을 표시하기 위해 를 사용하는 경우가 많습니다. 웹 브라우저는 사이의 콘텐츠를 자동으로 인식합니다. 불행하게도 IE는 이를 인식하지 못하며 때로는 로 인해 일부 접근성 문제가 발생할 수 있습니다. 이 때문에 일부 사람들은 사용을 피하고 인용 태그를 수동으로 삽입할 것을 권장합니다. 적절한 클래스가 포함된 내에 참조 콘텐츠 한 줄을 추가하면 CSS로 참조 스타일을 지정할 수 있지만 이는 의미상 의미가 없습니다. 관련 문제 처리에 대한 Mark Pilgrim의 Q 태그(http://peintomark.org/archives/2002/05/04/the_q_tag)를 읽어보세요. 하나 이상의 단락을 길게 인용하려면
를 사용하세요. CSS를 사용하여 참조 스타일을 정의할 수 있습니다. 기사의 단락은
에 직접 배치할 수 없으며, 인용된 내용은 일반적으로
요소에도 포함되어야 합니다. cite 속성은 인용된 콘텐츠의 소스 주소를 제공하기 위해 및
와 함께 사용할 수 있습니다. 콘텐츠를 인용하기 위해 태그 대신 을 사용하면 cite 속성을 사용할 수 없습니다. 예:
<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.
로그인 후 복사
<p> <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.</p>
로그인 후 복사
<p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/
struct/text.html#h-9.2.1">The presentation of phrase elements
depends on the user agent.</q>.</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
