개별 단어 또는 전체 구절을 이탤릭체와 굵은체로 쉽게 표시할 수 있습니다. 첫째, 굵은체 변형입니다. 이를 위해 기본적으로 사용할 수 있는 HTML 요소는 b와 strong 두 가지입니다.
<b>PSD-Tutorials.de</b>에 오신 것을 환영합니다! <br /> <strong>PSD-Tutorials.de</strong>에 오신 것을 환영합니다!
브라우저에서 결과를 살펴보면 다음 그림과 같습니다:
분명히 두 요소 모두 동일한 디스플레이를 제공합니다. 그런데 왜 두 개의 다른 요소가 있을까요? 사실 웹사이트에는 익숙한 표준 브라우저 외에도 다른 형태의 디스플레이가 있습니다. 예를 들어 시각장애인용 리더나 모바일 디바이스를 생각해 보세요. W3C에서 제공하는 HTML 요소는 시맨틱을 지원하기 위한 것입니다. 예를 들어, b 요소는 더 이상 굵은 글씨로 표시되어야 함을 의미하지 않습니다. 오히려 b는 중요도가 높지 않은 텍스트를 시각적으로 강조하는 것을 의미합니다. 예를 들어 제품 이름이나 문서 내 키워드가 여기에 해당합니다.
반면에 em은 강조된 중요한 텍스트(강조)에 사용되었습니다. 이전 HTML 버전에서 strong은 em을 강화한 것이었습니다. HTML5에서는 두 요소 모두 다른 의미를 갖습니다.
먼저 일반 강조가 있는 텍스트입니다.
<p> 고양이는 귀여운 동물입니다 </p>
이제 다시 같은 텍스트이지만 이번에는 첫 단어에 강조가 적용됩니다.
<p> <em>고양이는 귀여운 동물입니다.</p>
em을 사용하여 고양이라는 단어에 중점을 둡니다. 이는 개와 고양이 중 어느 쪽이 더 귀여운지에 대한 토론에서 생각할 수 있습니다.
이 예에서 em 요소는 are라는 단어에도 적용될 수 있습니다.
<p> 고양이는 <em>귀여운 동물입니다.</em> </p>
이것은 누군가가 고양이는 전혀 귀엽지 않다고 주장하는 토론에서 응답할 수 있습니다.
실제로 em으로 표시된 구절은 브라우저에서 이탤릭체로 표시됩니다. i 요소로도 동일한 시각적 효과를 얻을 수 있습니다.
HTML5 작업 초안에 따르면 i 요소는 더 이상 이탤릭체를 나타내지 않습니다.
<p> <i>PSD-Tutorials.de</i> </p>에 오신 것을 환영합니다.
대신 이 요소는 이제 다른 분위기를 전달하기 위해 사용한다는 것을 의미합니다. 예를 들어 i 요소는 기술적 표현이나 분류학적 명칭을 표시하는 데 유용합니다.
이 모든 것이 지극히 이론적인 이야기라는 것을 알고 있습니다. 원칙적으로 HTML5 사양을 준수해야 합니다. 반면에 b 대신 strong을 사용한다고 해서 아무도 당신의 머리를 찢어버리지 않을 것입니다.
<p> <em>이 있는 줄</em><br /> <i>이 있는 줄</i><br /> <strong>강한 줄</strong><br /> <b>이 있는 줄</b> </p>
궁극적으로 브라우저 제조업체가 조치를 취해야 합니다.
어쨌든 이러한 요소가 포함된 텍스트의 실제 디자인은 궁극적으로 CSS가 책임집니다.
abbr이 포함된 약어
약어에 레이블을 지정하려면 이전에 약어에 사용되었던 것과 동일한 요소, 즉 abbr이 사용됩니다.
W3C의 독일-오스트리아 사무소는 2009년 4월부터 포츠담 응용과학대학에 있습니다.
abbr 요소를 올바르게 해석하는 브라우저는 abbr 요소로 둘러싸인 텍스트를 밑줄로 표시합니다.
또한 abbr에 제목 속성을 할당해야 합니다. 일반적으로 약어에 대한 전체 표현이 여기에 표시됩니다. 방문자가 약어 위로 마우스 포인터를 이동하면 툴팁 창에 해당 표현이 표시됩니다.
주소가 포함된 주소 세부 정보
주소 요소는 주소 정보를 마크업하는 데 사용할 수 있습니다.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
브라우저는 일반적으로 주소 요소의 내용을 이탤릭체로 표시합니다.
코드로 프로그램 코드 마크업
코드 요소는 프로그램 코드를 마크업하는 데 사용됩니다. 이러한 의미에서 이전 HTML 버전과 비교하여 변경된 사항은 없습니다. Jens는 여전히 이 용도로 사용됩니다.
<pre> 이것은 HTML 헤더입니다: <code> <html&t; <head&t; <title&t; </title&t; </head&t; </code> </pre>.
코드는 일반적으로 프로그램 코드에서 사용되는 들여쓰기를 얻기 위해 pre 요소와 결합됩니다.
HTML5 사양에서는 코드 요소와 관련하여 클래스 속성을 사용할 것을 권장합니다. 코드 요소 내에서 사용되는 언어를 이 속성에 할당할 수 있습니다. 다음은 이러한 라벨링의 일반적인 예시입니다:
- HTML
- language-css
- language-javascript
- language-php
- language-pascal
브라우저에서 이러한 지침을 구현할지 여부와 방법은 W3C에서 지정하지 않습니다.
<pre> 이것은 HTML 헤더입니다: <code class="language-html"> <html&t; <head&t; <title&t; </title&t; </head&t; </code> </pre>.
현재 클래스 속성은 브라우저에서 눈에 보이는 효과가 없습니다. 그러나 사람이 페이지의 소스 코드를 살펴보면 프로그램 코드가 어떤 언어를 기반으로 하는지 알아볼 수 있습니다.
소문자 소문자
작은 요소는 원래 텍스트를 일반보다 작게 표시하는 데 사용되었습니다. HTML5에서 작은 글씨는 작은 글씨를 위해 명시적으로 존재합니다. 이 작은 글씨는 예를 들어 다음과 같을 수 있습니다:
- 저작권 정보
- 면책 조항
- 라이선스 약관
- 이용 약관
W3C는 긴 텍스트 구절에 작은 글씨를 사용해서는 안 된다고 명시적으로 지적합니다.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
텍스트 밑줄
u 요소를 사용하여 단어에 밑줄을 그을 수 있습니다. 다음은 예시입니다:
<p>Welcome to <u>PSD-Tutorials.de</u></p>
결과는 브라우저에 다음과 같이 표시됩니다:
결과를 보면 실제로 원하는 효과가 나타납니다. 하지만 한 가지 문제가 있습니다. 인터넷에서 밑줄이 그어진 텍스트는 하이퍼링크를 의미하는 것으로 알려져 있습니다. 텍스트나 단어에 밑줄을 그으면 방문자는 이를 하이퍼링크라고 생각할 수 있습니다. 물론 클릭 시도는 실패할 것입니다. 따라서 밑줄을 사용하지 않는 것이 좋습니다.
