CSS / HTML : 텍스트를 이탤릭체로 만드는 올바른 방법은 무엇입니까?

CSS / HTML : 텍스트를 이탤릭체로 만드는 올바른 방법은 무엇입니까?

---

텍스트를 기울임 꼴로 만드는 올바른 방법 은 무엇입니까 ? 나는 다음과 같은 네 가지 접근법을 보았다.

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>

<i>

이것이 "구식"입니다. <i>의미 적 의미가 없으며 텍스트를 이탤릭체로 만드는 표현 효과 만 전달합니다. 내가 볼 수있는 한, 이것은 의미가 없기 때문에 분명히 잘못되었습니다.

<em>

이것은 순수한 표현 목적으로 시맨틱 마크 업을 사용합니다. 단지 그 일이 <em>기본적으로 기울임 꼴 텍스트를 렌더링하고이 종종 알고있는 사람들에 의해 사용되도록 <i>피해야하지만 누가되어야 그 의미 론적 의미를 모르고있다. 모든 이탤릭체 텍스트가 강조되어 이탤릭체 인 것은 아닙니다. 때로는 사이드 노트 나 속삭임과 같이 정반대 일 수 있습니다.

<span class="italic">

CSS 클래스를 사용하여 프리젠 테이션을합니다. 이것은 종종 올바른 방법으로 선전되지만 다시 한 번 나에게 잘못된 것 같습니다. 이것은 더 의미적인 의미를 전달하지 않는 것 같습니다 <i>. 그러나 그 지지자들은 울부 짖습니다. 대담하게 말하면 나중에 모든 기울임 꼴 텍스트를 변경하는 것이 훨씬 쉽습니다. 그러나 텍스트가 굵게 표시되는 "italic"이라는 클래스가 남아 있기 때문에 그렇지 않습니다. 또한 왜 내 웹 사이트에서 모든 기울임 꼴 텍스트를 변경하고 싶거나 적어도 이것이 바람직하지 않거나 필요하지 않은 경우를 생각할 수 있는지는 확실하지 않습니다.

<span class="footnote">

시맨틱에 CSS 클래스를 사용합니다. 지금까지 이것이 최선의 방법으로 보이지만 실제로 두 가지 문제가 있습니다.

1. 모든 텍스트가 의미 적 마크 업을 보증하기에 충분한 의미를 갖는 것은 아닙니다. 예를 들어, 페이지 하단의 기울임 꼴 텍스트는 실제로 각주입니까? 아니면 제쳐두고 있습니까? 아니면 완전히 다른 것. 아마도 특별한 의미가 없으며 앞의 텍스트와 표현을 구분하기 위해 기울임 꼴로 렌더링해야합니다.

2. 의미가 충분한 강도로 존재하지 않으면 의미가 변경 될 수 있습니다. 페이지 맨 아래에있는 텍스트 외에는 "각주"를 사용했다고 가정 해 보겠습니다. 몇 개월 후 하단에 더 많은 텍스트를 추가하려고하면 어떻게됩니까? 더 이상 각주가 아닙니다. 우리는 덜 일반적 <em>이지만 이러한 문제를 피하는 의미 론적 클래스를 어떻게 선택할 수 있습니까?

요약

이탤릭체를 만들고자하는 욕구가 의미 론적 의미를 갖기위한 것이 아닌 많은 경우에 의미 론적 요구 사항이 지나치게 부담스러운 것으로 보인다.

또한 스타일과 구조를 분리하려는 의도로 인해 CSS <i>가 실제로 유용하지 않을 때를 대신하여 CSS가 선전되었습니다 . 그래서 이것은 겸손한 <i>태그로 다시 돌아와 HTML5 사양에 남아있는 이유가 무엇인지 궁금합니다.

이 주제에 관한 좋은 블로그 게시물이나 기사가 있습니까? 아마도 <i>태그 를 유지 / 생성하기로 한 결정에 관련된 사람들에 의해 ?

---

사용 사례마다 다른 방법을 사용해야합니다.

1. 문구를 강조하려면을 사용하십시오 <em>.
2. 이 <i>태그는 HTML5 에서 "대체 음성 또는 분위기의 텍스트 범위"를 나타내는 새로운 의미를 갖습니다 . 따라서이 태그를 생각 / 옆으로 또는 관용구와 같은 것에 사용해야합니다. 이 스펙은 또한 선박 이름을 제안합니다 (그러나 더 이상 책 / 노래 / 영화 이름을 제안하지 않습니다; <cite>대신 사용하십시오).
3. 기울임 꼴 텍스트가 큰 문맥의 일부인 경우 (예 : 소개 단락) CSS 스타일을 큰 요소에 연결해야합니다. p.intro { font-style: italic; }

---

<i>의미가 없기 때문에 잘못되지 않습니다. 프레젠테이션이기 때문에 (보통) 잘못되었습니다. 우려의 분리는 프리젠 테이션 정보가 CSS와 함께 전달되어야 함을 의미합니다.

일반적으로 이름을 지정하는 것은 까다로울 수 있으며 클래스 이름도 예외는 아니지만 그럼에도 불구하고해야 할 일입니다. 이탤릭체를 사용하여 본문에서 블록을 돋보이게하는 경우 클래스 이름이 "flow-distinctive"일 수 있습니다. 재사용에 대해 생각해보십시오. 클래스 이름은 분류를위한 것입니다. 다른 곳에서 같은 일을 하시겠습니까? 적절한 이름을 식별하는 데 도움이됩니다.

<i>HTML5에 포함되어 있지만 특정 의미론이 제공됩니다. 이탤릭체로 표시하는 이유가 사양에서 식별 된 의미 중 하나를 충족하는 경우을 사용하는 것이 좋습니다 <i>. 그렇지 않으면 아닙니다.

---

나는 전문가가 아니지만 실제로 의미를 원한다면 어휘 (RDFa)를 사용해야한다고 말하고 싶습니다.

결과는 다음과 같습니다.

<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

em프리젠 테이션에 사용되며 (인간은 기울임 꼴로 표시됨) property및 href속성은 기울임 꼴 (기계 용)의 정의에 연결됩니다.

그런 종류의 어휘가 있는지 확인해야합니다. 속성이 이미있을 수 있습니다.

RDFa에 대한 자세한 정보는 여기 : http://www.alistapart.com/articles/introduction-to-rdfa/

---

TLDR

텍스트를 기울임 꼴로 만드는 올바른 방법은 CSS에 도달 할 때까지 문제를 무시한 다음 프리젠 테이션 시맨틱에 따라 스타일을 지정하는 것입니다. 제공 한 처음 두 옵션은 상황에 따라 맞을 수 있습니다. 마지막 두가 잘못되었습니다.

더 긴 설명

Don't worry about presentation when writing the markup. Don't think in terms of italics. Think in terms of semantics. If it requires stress emphasis, then it's an em. If it's tangential to the main content, then it's an aside. Maybe it'll be bold, maybe it'll be italic, maybe it'll be fluorescent green. It doesn't matter when you're writing markup.

When you do get to the CSS, you might already have a semantic element that makes sense to put italics for all its occurrences in your site. em is a good example. But maybe you want all aside > ul > li on your site in italics. You have to separate thinking about the markup from thinking about the presentation.

As mentioned by DisgruntledGoat, i is semantic in HTML5. The semantics seem kind of narrow to me, though. Use will probably be rare.

The semantics of em have changed in HTML5 to stress emphasis. strong can be used to show importance as well. strong can be italic rather than bold if that's how you want to style it. Don't let the browser's stylesheet limit you. You can even use a reset stylesheet to help you stop thinking within the defaults. (Though there are some caveats.)

class="italic" is bad. Don't use it. It is not semantic and is not flexible at all. Presentation still has semantics, just a different kind from markup.

class="footnote" is emulating markup semantics and is incorrect as well. Your CSS for the footnote should not be completely unique to your footnote. Your site will look too messy if every part is styled differently. You should have some visual patterns scattered through your pages that you can turn into CSS classes. If your style for your footnotes and your blockquotes are very similar, then you should put the similarities into one class rather than repeat yourself over and over again. You might consider adopting the practices of OOCSS (links below).

Separation of concerns and semantics are big in HTML5. People often don't realize that the markup isn't the only place where semantics is important. There is content semantics (HTML), but there is also presentational semantics (CSS) and behavioral semantics (JavaScript) as well. They all have their own separate semantics that are important to pay attention to for maintainability and staying DRY.

OOCSS Resources

• Object Oriented CSS
• An Introduction To Object Oriented CSS (OOCSS)
• How to Write Object Oriented CSS
• Getting started with Object-Orientated CSS (OOCSS)
• Object-Oriented CSS: What, How, and Why
• Diving into Object Oriented CSS

---

Perhaps it has no special meaning and only needs to be rendered in italics to separate it presentationally from the text preceding it.

If it has no special meaning, why does it need to be separated presentationally from the text preceding it? This run of text looks a bit weird, because I’ve italicised it for no reason.

I do take your point though. It’s not uncommon for designers to produce designs that vary visually, without varying meaningfully. I’ve seen this most often with boxes: designers will give us designs including boxes with various combinations of colours, corners, gradients and drop-shadows, with no relation between the styles, and the meaning of the content.

Because these are reasonably complex styles (with associated Internet Explorer issues) re-used in different places, we create classes like box-1, box-2, so that we can re-use the styles.

The specific example of making some text italic is too trivial to worry about though. Best leave minutiae like that for the Semantic Nutters to argue about.

---

The i element is non-semantic, so for the screen readers, Googlebot, etc., it should be some kind of transparent (just like span or div elements). But it's not a good choice for the developer, because it joins the presentation layer with the structure layer - and that's a bad practice.

em element (strong as well) should be always used in a semantic context, not a presentation one. It has to be used whenever some word or sentence is important. Just for an example in the previous sentence, I should use em to put more emphasis on the 'should be always used' part. Browsers provides some default CSS properties for these elements, but you can and you're supposed to override the default values if your design requires this to keep the correct semantic meaning of these elements.

<span class="italic">Italic Text</span> is the most wrong way. First of all, it's inconvenient in use. Secondly, it suggest that the text should be italic. And the structure layer (HTML, XML, etc.) shouldn't ever do it. Presentation should be always kept separated from the structure.

<span class="footnote">Italic Text</span> seems to be the best way for a footnote. It doesn't suggest any presentation and just describes the markup. You can't predict what will happen in the feature. If a footnote will grow up in the feature, you might be forced to change its class name (to keep some logic in your code).

So whenever you've some important text, use em or strong to emphasis it. But remember that these elements are inline elements and shouldn't be used to emphasis large blocks of text.

Use CSS if you care only about how something looks like and always try to avoid any extra markup.

---

HTML italic text displays the text in italic format.

<i>HTML italic text example</i>

The emphasis and strong elements can both be used to increase the importance of certain words or sentences.

<p>This is <em>emphasized </em> text format <em>example</em></p>

The emphasis tag should be used when you want to emphasize a point in your text and not necessarily when you want to italicize that text.

See this guide for more: HTML Text Formatting

---

I think the answer is to use <em> when you intend emphasis.

If when reading the text to yourself, you find that you use a slightly different voice to emphasise a point, then it should use <em> because you would want a screen reader to do the same thing.

If it is purely a style thing, such as your designer has decided that all your <h2> headings would look better in italic Garamond, then there is no semantic reason to include it in the HTML and you should just alter the CSS for the appropriate elements.

I can't see any reason to use <i>, unless you specifically need to support some legacy browser with no CSS.

---

I'd say use <em> to emphasize inline elements. Use a class for block elements like blocks of text. CSS or not, the text still has to be tagged. Whether its for semantics or for visual aid, I'm assuming you'd be using it for something meaningful...

If you're emphasizing text for ANY reason, you could use <em>, or a class that italicizes your text.

It's OK to break the rules sometimes!

---

OK, the first thing to note is that <i> has been deprecated, and shouldn't be used <i> has not been deprecated, but I still do not recommend using it—see the comments for details. This is because it goes entirely against keeping presentation in the presentation layer, which you've pointed out. Similarly, <span class="italic"> seems to break the mold too.

So now we have two real ways of doing things: <em> and <span class="footnote">. Remember that em stands for emphasis. When you wish to apply emphasis to a word, phrase or sentence, stick it in <em> tags regardless of whether you want italics or not. If you want to change the styling in some other way, use CSS: em { font-weight: bold; font-style: normal; }. Of course, you can also apply a class to the <em> tag: if you decide you want certain emphasised phrases to show up in red, give them a class and add it to the CSS:

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

If you're applying italics for some other reason, go with the other method and give the section a class. That way, you can change its styling whenever you want without adjusting the HTML. In your example, footnotes should not be emphasised—in fact, they should be de-emphasised, as the point of a footnote is to show unimportant but interesting or useful information. In this case, you're much better off applying a class to the footnote and making it look like one in the presentation layer—the CSS.

---

Use <em> if you need some words/characters in italic in content without other styles. It also helps make content semantic.

text-style is better suited for multiple styles and no semantic need.

---

DO

1. Give the class attribute a value indicating the nature of the data (i.e. class="footnote" is good)

2. Create a CSS style sheet for the page

3. Define a CSS style that is attached to the class that you assign to the element

   .footnote { font-style:italic; }

DO NOT

1. Don't use <i> or <em> elements - they're unsupported and ties the data and presentation too close.
2. Don't give the class a value that indicates the presentation rules (i.e. don't use class="italic").

참고URL : https://stackoverflow.com/questions/2108318/css-html-what-is-the-correct-way-to-make-text-italic