98

이 질문은 제 대학 수업 중 하나에서 나왔습니다. 교수는 더 설명했다 대답을했다,하지만 같은 생각 보인다 와 그 의미에 오히려 명시하고보다 입력하기 쉽게 하고 .

이 태그의 폐기에 대한 공식적인 주장은 무엇입니까?

html deprecation

— 랜스 라 폰테인
소스

38

나는 확실히 확신 하고 더 이상 사용되지 않습니다.

— Doval

12

관련 독서 : 와 , 와 의 차이점은 무엇입니까? vs

4

나는 이것을 다음과 같이 추론하는 경향이있다 : 나는 스크린 리더가 이것을 다르게 읽거나 읽길 원합니까? 내가 (맹인이 아닌) 독자가 쉽게 찾을 수있는 단어를 골라 내고자한다면, 나는 b"이것이 강조된다"는 말이 아니라 "이것은 대담하다"를 의미합니다. 더 중단, 당신이해야 할 사용될 때 그냥하지 않는 것이 없다 - 그러나 중요한 점은 의미가 다른 것입니다 b또는 i, 당신은 일반적으로 의미 strong또는 em.

— Luaan

1

@MichaelT LaTeX를 처음 사용하기 시작했을 때 빈 문서를 시작할 때 텍스트가 기울임 꼴로 표시되고 굵게 표시 될 수있는 여러 가지 방법에 대해 혼란 스러웠습니다 (스타일 패키지 없음).

— Cole Johnson

@Luaan :하더라도 와 실제로 사용되지되지 않은 <tt>및 , 그리고 문제는 것과 마찬가지로 적용 할 수있다.

— supercat

135

지난 여름, 나는 완전한 HTML5 사양과 모든 이전 HTML 사양 (폐기 된 것조차 포함), 내가 찾은 모든 CSS 사양 및 많은 XML 사양을 읽었다. 의미 적으로 풍부한 하이퍼 텍스트 문서를 좋아하기 때문에 HTML5의 관련 HTML 의미론 뒤에 아이디어를 제공하겠습니다.

HTML5 이전

HTML5하기 전에, i그리고 b패션에서 참이었다. 그 이유는 그들이 본질적으로 같은 일이었다 em및 strong각각 만에 초점을 맞춘, 프리젠 테이션 및하지의 의미 (나쁜이다).

실제로 i텍스트가 기울임 꼴로 표시되어야한다는 것을 의미했습니다 (텍스트가 화면에서 렌더링되는 방법에 대한 내용을 말함). 반면에 em, 본문은 강조되어야한다는 것을 의미했다 (본문의 의미론에 대해 말 했음).

여기에는 중요한 이론적 차이가 있습니다. 를 사용하는 경우 em사용자 에이전트 (= 브라우저)는 텍스트를 강조해야한다는 것을 알고 있으므로 문서가 화면에 표시되는 경우 기울임 꼴로 표시 될 수 있습니다 (또는 서식을 지정할 수없는 경우 모두 대문자로 표시되거나 굵은 글꼴로 표시 될 수도 있음). 문서를 사용자에게 말하면 다르게 발음 할 수 있습니다.

강조는 실제로 의미론에 관한 것입니다. 예를 들어

고양이는 내 꺼야. (= 개가 아닙니다!)
고양이는 내 . (= 당신이 아닙니다!)

같은 의미가 없습니다.

b(굵은 글꼴)과 strong(강조) 에도 동일한 차이점이 적용됩니다 .

일반적인 디지털 글쓰기 및 특히 하이퍼 텍스트 작성의 일반적인 원칙은 컨텐츠와 스타일을 분리해야한다는 것입니다. 하이퍼 텍스트 작성에서 이는 컨텐츠가 HTML 파일에 있어야하고 스타일이 CSS 파일 (또는 여러 CSS 파일)에 있어야 함을 의미합니다. 다르지만 관련된 원칙은 문서에 의미, 예를 들어 머리글, 바닥 글, 목록, 강조, 주소, 탐색 영역 등이 풍부해야한다는 것입니다. 여기에는 여러 가지 장점이 있습니다.

컴퓨터 프로그램이 문서를 해석하는 것이 훨씬 쉽습니다. 이러한 프로그램에는 브라우저, TTS (text-to-speech) 응용 프로그램, 검색 엔진 및 디지털 도우미가 포함됩니다. 예를 들어 브라우저에서 주소를 찾아서 해석 할 수있는 경우 주소록에 주소를 저장할 수 있습니다. 또한 제목을 올바르게 표시하면 Microsoft Word에서 TOC를 작성하고 자동으로 업데이트 할 수 있습니다. .)
나중에 스타일을 변경하는 것이 훨씬 쉽습니다. 860 페이지의 문서에서 모든 3 단계 제목의 색상을 변경하려면 스타일 시트에서 한 줄을 변경할 수 있습니다. 내용과 프리젠 테이션이 혼합 된 경우 전체 문서를 수동으로 수행해야합니다. 그리고 아마도 제목이 하나도 없어서 문서가 전문적이지 않게 보일 수도 있습니다.)
상황에 따라 다른 스타일 시트를 사용할 수 있습니다 (문서가 화면에 표시되거나 용지에 인쇄됩니까?). 최종 사용자가 스타일을 직접 선택하도록 할 수도 있습니다. (내 웹 사이트는 다양한 대체 스타일 시트를 제공합니다. IE 및 FF에서는보기 메뉴를 사용하여이를 변경할 수 있습니다.)

그래서, 짧은에, i그리고 b그들이 있었기 때문에 사용되지 않는 HTML 태그 에 대해 우려 프리젠 테이션 완전히 잘못된 것입니다.

HTML5에서

HTML5에서 i하고 b더 이상 사용되지 않는다. 대신에 의미가 부여됩니다 . 그래서 그들은 실제로 의미론에 관한 것이며 프레젠테이션에 관한 것이 아닙니다.

이전과 마찬가지로 em"고양이 는 내 꺼야 "라고 강조하기 위해 사용 합니다 . 그러나 i인쇄 된 작업에 기울임 꼴 을 사용 하는 거의 모든 다른 경우에 사용합니다. 예를 들어 :

i분류 학적 명칭을 표시하는 데 사용 합니다 : " R. norvegicus ."
당신이 사용하는 i주변 텍스트에 비해 다른 언어로 문구를 표시 : 단품을
i단어 자체에 대해 이야기 할 때 단어를 표시하는 데 사용 합니다. " 음료 는 명사와 동사입니다"

또한 사용하는 것이 좋습니다 class정확한 사용 (또한 구글 "마이크로 포맷"와 "마이크로 데이터")를 지정하는 속성. 물론 두 번째 경우에는 실제로 lang올바른 언어를 지정 하기 위해 속성을 사용해야합니다 . ( 예를 들어 , 텍스트 음성 변환 에이전트가 텍스트를 잘못 발음 할 수 있습니다.)

1 년 전쯤 HTML5 사양에 따르면 cite책, 영화, 오페라, 그림 등의 이름을 표시하는 데 사용해야한다고합니다.

당신은 Nymphomaniac에 대해 어떻게 생각 하십니까?

마지막으로 오래 전부터 dfn텍스트에서 구의 정의 인스턴스 (예 : 수학 정의 또는 용어 정의)를 표시하는 데 사용됩니다.

기는 단일 이진 연산 *되도록 장착 세트 X는 ...

인쇄 된 책의 이탤릭체는 다른 많은 것을 의미 할 수 있습니다. 4 가지 HTML5 태그로 표시됩니다. 이는 앞서 설명했듯이 의미론이 좋기 때문에 의미가 좋습니다. 예를 들어, 브라우저에 텍스트의 모든 정의 목록을 작성하도록 요청할 수 있으므로 시험 전에 모든 내용을 알 수 있습니다.

에 의존 strong하고 b, HTML5의 사양은 있다고 strong경고 또는 문장에서 매우 중요한 - 투 - 캐치 단어처럼, 텍스트의 중요한 부분을 표시하는 데 사용되어야한다. 반면에 b키워드와 같이 텍스트에서 쉽게 찾을 수있는 항목을 표시하는 데 사용해야합니다. 또한 b목록 항목 (LI)에서 제목으로 사용 합니다.

— 안드레아스 레이 브란트
소스

1

수정 : 정의 태그가 <dfn>아닌 <def>입니다. 그렇지 않으면 모든 문제에 대한 포괄적 인 요약이 제공됩니다. 목록 항목에서 제목 으로 사용하려는 제안 은 흥미 롭습니다. 의미 론적 접근 방식은 정의 목록 을 사용하는 것이지만 현재 지원하는 브라우저가 없으므로 display:run-in인라인 키워드 마크 업 또는 을 사용하는 것이 가장 좋습니다.

— AmeliaBR

@AmeliaBR. 오타 (def)를 관찰 해 주셔서 감사합니다. 정의 목록 정보 : 정의 목록은 이름-값 쌍에 사용해야하며 항상이를 위해 사용합니다 ( 예 : 방명록 참조 ). 나도 좋아 display:run-in했지만 지원이 감소하고 있기 때문에 float또는 content:트릭 을 사용해야합니다 ( rejbrand.se/rejbrand/news.asp?ItemIndex=169 참조) . b목록에서 '제목'을 표시하는 데 사용 하는 것에 대해 말할 때 이름-값 쌍을 의미하는 것이 아니라 각 항목에서 '제목'을 사용하려는 단순한 목록을 의미합니다.

— Andreas Rejbrand

1

@SarahofGaia 대담한 텍스트 를 보장 하는 추론과 함께 적어도 두 가지 결함이 있습니다. 1) 화면 판독기, 점자 디스플레이 및 두꺼운 글리프가 의미가없는 텍스트를 소비하는 기타 수단. 2) b { font-weight: normal }, 표시 스타일이 고정되어 있지 않음을 의미합니다 .

— 비트 트리

1

마지막으로 브라우저를 신뢰할 수없는 경우 언제든지 CSS를 자유롭게 제공 할 수 있습니다 b, strong { font-weight:bold; }. 그렇게하면 가능한 한 확실하게 할 수 있습니다. CSS는 시각적 형식을 지정하는 방법입니다. HTML은 시각적 내용에 대한 의미 (콘텐츠), CSS에 관한 것입니다.

— Andreas Rejbrand

1

이 답변을 통해 글꼴 태그를 CSS로 변경해야하는 이유를 이해할 수있었습니다. 나는 항상 굵은 글꼴 태그를 좋아했으며 이제는 사용하지 않아야하는 이유를 이해합니다. 감사합니다

— Andreas

58

Doval이 말했듯이 더 이상 사용되지 않습니다. 그것들은 여전히 존재 하지만 HTML5 이전의 많은 사람들과는 다르게 사용해야합니다.

'시맨틱 한'HTML에 관한 것입니다. 어떻게 보이는지 대신 '무엇'인지 설명해야합니다. 브라우저 또는 이론적으로 다른 디스플레이 매체 (맹인을위한 판독 앱)는 정확히 어떻게 해석해야하는지 결정할 수 있어야합니다.

이것은 "red"와 같은 CSS 클래스 이름을 사용하지 말고 여기에서 다른 색상을 사용하는 기능적 아이디어를 설명하는 더 설명적인 클래스를 사용해야하는 이유와 유사합니다. 나중에 녹색이 더 좋다고 결정할 수도 있습니다 (굵은 글씨 대신 빨간색을 사용하여 "강한"항목을 표시해야 할 수도 있습니다). 또는 색맹 사용자는 색이 다른 방법으로 대체되는 특별한 브라우저 설정이있을 수 있습니다.

— 토르스텐 ül 러
소스

1

대신 를 사용하는 것이 바람직한 상황이 있습니까? 아니면 항상 "더 의미적인"태그입니까?

— 랜스 라 폰테인

4

텍스트의 키워드와 같이 "강조 표시"해야하지만 "강조 표시"하지 않아야하는 항목에는 를 사용할 수 있습니다. 기술 문서에는 프로그래밍 서적 코드 샘플 또는 기술 용어와 같이 특정 속성을 표시하는 데 사용되는 다양한 텍스트 스타일이 있습니다. 이러한 경우에는 기술 용어 또는 가 사용될 수 있습니다.

— thorsten müller

3

@LanceLafontaine 공식 표준을 살펴보십시오 .

— Rufflewind

4

@ thorstenmüller 나는 그것이 나쁜 예라고 생각합니다 ... 관리자는 나중에 대담 대신 타자기 글꼴의 속성을 원하고 굵게 표시되지는 않지만 밑줄이 아니라고 결정하는 교과서 사례입니다.이 경우 ...처음부터 사용하면 절약됩니다 많은 문제.

— CompuChip

2

@LanceLafontaine 은 엣지 케이스이지만 부적합한 경우 에 사용 하기위한 확실한 예가 있습니다 . 종의 과학적 이름 또는 영어로 채택 된 라틴어 단어 ( 언어 속성과 함께 스팬을 사용할 수 있지만 모든 종류의 다른 의미가 있음- -스크린 리더가 다른 언어의 음성을 전환 할 수 있습니다). 의미 론적으로 올바른 접근 방법을 사용하지만 다른 작품의 제목을 이탤릭체로 사용할 수도 있습니다 <cite>.

— 아멜리아

41

진정한 이야기는이다 b와 i첫째, 더 이상 사용되지 않는, 저주, 그리고 (광범위하게 말하기) 다양한 HTML5 초안에서 "표상"으로 anatematized, 그러나 그들은 이러한 태그가 널리 사용되는 많은 제작 프로그램에 의해 생성되는 것을 알게되었다. 그들은 단순히 그것들을 허용하는 대신, 요소들을 허용 할 수는 있지만 여전히“프레젠테이션”마크 업에 대해 엄격한 척을하기 위해 새로운“의미 적”정의를 개발했다. 새로운 정의는 초안마다 다르고 모호합니다. 같은 방식으로 이해하고 해석하는 두 사람을 거의 찾을 수 없습니다.

죄송합니다. 참조가 없습니다. 위의 설명은 변경 사항을 따르고 종종 줄 사이에서 초안과 토론을 읽은 결과입니다. 그들은 분명히 원인을 말하지 않습니다. 나는 아직도 그것이 사실이라고 생각합니다.

결론은 다음과 같습니다. 여기서 유용한 것은 없습니다. 그만큼b과 i그들이 항상이 같은 요소는 같은 일을 : 그들은 일반적인주의 사항으로, 각각 글꼴을 굵게 또는 기울임 꼴합니다. 이는 브라우저, 검색 엔진 또는 기타 소프트웨어에 영향을 미치지 않는 준 콜라 스틱 "의미"가 아니라 고려해야 할 현실입니다.

— Jukka K. Korpela
소스

3

즉, 단지 처리함으로써 quasischolastic 의미를 따를 수 말했다 의 재미 일종으로 그 기본적으로 굵은 글씨로 렌더링합니다. 그런 다음 귀찮게 할 수있는 경우 class속성을 사용하여 속성을 제공하면 필요한 경우 공통 의미가 있기 때문에 한 번에 여러 가지 스타일을 다시 스타일 지정할 수 있습니다. b.productname {font-weight: normal; font-style: italic; }프레젠테이션에 대해 마음이 바뀌고 의미있는 마크 업 선택을 활용 한 후에 사람들이 당신이 머리를 숙이고 있다고 생각한다는 점에서 유사성 이 있습니다. ;-)

— Steve Jessop

1

@SteveJessop : 여전히 파일 크기에 관심이있는 일부 세계 사람들에게는 말하기가 this훨씬 합리적 이라고 생각 this합니다 (이전의 8 바이트 오버 헤드는 충분하지 않으며 후자의 23 바이트 오버 헤드는 미친 것 같습니다). HTML이 왜 짧은 형식 표현을 다음과 같은 <@quack>this</@>것으로 정의하지 않았는지 궁금 합니다 this.

— supercat

4

@ supercat : 그것이 전송 인코딩 : gzip의 목적입니다. 또는 "quack"에 대해보다 간결한 표기법을 도입하려는 위치와 방법에 따라 XML + XSLT가있을 수 있습니다.

— Steve Jessop

7

@ 슈퍼 캣 class='bold'? 코드리스 코드의 스쿠 (Suku) 마스터 는 그러한 빈약 한 클래스 이름의 사용에 대해 당신과 함께 할 것 입니다. 이것을 마지막 boldRedText 고려하십시오 .

2

14.4 모뎀 시대에 CSS는 아직 모든 사용자 에이전트에서 구현되거나 구현되지 않은 아이디어 였습니다 . 이 HTML 요소는 우리가 영원히 고집 할 고대 유산입니다.

— Michael Hampton

11

그만큼 및 태그 "대담"과 "기울임 꼴"의 개념과 유래. 문제는 일부 사용자 에이전트에게는 이것이 의미가 없을 수 있다는 것입니다. 예를 들어, 시각 장애인을위한 스크린 리더에서 "이탈리아어"는 어떤 소리를 내나요?

로 교체 및 인쇄상의 개념에 대한 직접 링크를 제거했습니다. 대신, 사용자 에이전트가이를 적절하게 렌더링 할 수 있습니다.

— 시몬 B
소스

2

엄밀히 말하면, 사용자 에이전트가 렌더링 할 수있는 말하기 와 도 그것을보고 그러나 맞습니다.

— Jonathan Eunice

8

과 말 그대로 '대담한'또는 '기울임 꼴'의 텍스트를 필요로 할 때 태그가 필수적이다.

기울임 꼴 ' I '가 기울임 꼴이 아닌 ' I '와 다른 의미를 갖는 HTML로 방정식을 작성하는 경우 해당 구분을 할 수 있어야합니다.

내가 생각하는 것과 같은 방식으로 생각 하거나 태그 합니다-당신은 그런 '모양'태그를 사용하지 않고 방정식의 의미를 올바르게 표현할 수 없습니다.

순수한 접근 방식은 MathML 또는 TeX를 사용하는 것이지만 브라우저 지원은 아직 없습니다 ...

— 남자 이름
소스

14

"의미"마크 업을 추진하는 사람들이 어떤 경우에는 이전 태그가 다른 어떤 태그보다 의미 적으로 정확 하다는 것을 인식하기를 바랍니다 . 문서의 텍스트가 밑줄이 그어진 특정 단어를 참조하면 밑줄이 아닌 다른 방식으로 해당 단어를 표시하는 것은 의미 상 잘못입니다. 시스템에서 텍스트를 가져 와서 일부를 in a monospaced typeface넣지 만 그 이유를 구분하지 않는 경우 "대체"중 하나를 사용 <tt>하면 가져 오기를 수행하는 코드가 목적에 대한 것보다 더 많은 것을 알았 음을 암시합니다.

— supercat

나는 수학적 (및 물리적) 맥락 의 적합성 b과 i수학적 내용에 동의 하지만 HTML5 초안 에는 그러한 사용법이 언급되어 있지 않습니다 . 이 질문을 제기했을 때 유니 코드 특수 문자 (수학적 굵은 체 문자 및 수학 이탤릭체 문자)가 대신 사용된다는 진지한 반응이있었습니다!

— Jukka K. Korpela

1

@ supercat : 일반적인 주장 (항상 적용 할 수있는 것은 아닙니다)은 사용자 에이전트가 현금을 사용할 수 없다는 수표를 작성해서는 안된다는 것입니다. 특히 누군가의 화면 판독기가 고정 폭 글꼴로 말할 것이라고 주장하는 페이지를 작성해서는 안됩니다 (로봇 음성이 적절할 것입니다. 실제로 스크린 리더를 사용한 적이 없습니다). 물론 이것은 대부분의 사람들의 페이지가 최소한 스크린 리더에서 작동하지 않는다는 것을 무시하므로 그들이 신경 쓰지 않는 가상의 접근성에 대해 가격을 지불하는 것은 아무 의미가 없습니다. 그러나 W3C 는이 사실을 원칙적 으로 무시합니다.

— Steve Jessop

코드 가져 오기의 경우, 정식 (만족스럽지 않은 경우) 대답이이라고 가정하여 다른 소스가 알 수없는 이유로 단 공간이어야한다고 주장 class="source-X-asserts-it-should-be-monospace"한다는 의미에서 의미가 다른 텍스트와 구별합니다 . 실제로 이것은 단순히 나쁜 점을 HTML로 번역하는 대신 HTML이 나쁜 것으로 간주하는 것을 감사하는 것입니다.

— Steve Jessop

1

@SteveJessop : 즉, <TT>텍스트를 대조되는 모노 스페이스 글꼴로 설정해야한다는 점을 직접 개선해야한다고 제안했습니다. 마크 업을 사용하면 몇 개의 간접 레이어 후에 텍스트가 특정 글꼴로 표시되어야 함을 나타냅니다. 단일 공간이어야합니다. 나는 모든 스크린 리더가 유용 뭔가를 기대하지 않을 것이다 동안 <tt>, 나는 그들이에 훨씬 쉽게 시간이있을 거라고 기대 <tt>이상을 .

— supercat

0

HTML 태그의 기초가되는 디자인 원칙은 "의미 론적"이어야한다는 것입니다. 즉, 저수준 교육보다는 의미와 의도를 나타내야합니다.

고전적인 테스트는 "맹인용 브라우저에서 태그를 의미있게 사용할 수 있는가"입니다.

따라서 오디오 기반 브라우저의 경우 기울임 꼴 "i"는 기울임 꼴 음성을 사용할 수 없으므로 쓸모가 없습니다. 그러나 "em"태그는 오디오 장치가 여러 가지 방식으로 문구를 강조 할 수 있기 때문에 의미가 있습니다. 음높이를 높이거나 음량을 높이거나 악센트를 변경합니다. 점자 렌더러는 점의 간격을 변경하거나 크기를 변경하거나 진동을 추가하여 강조 할 수 있습니다.

— 제임스 앤더슨
소스

당신이 말하는 것처럼 당신은 이탤릭 말을 할 수 없습니다 – 그러나 이탤릭이라는 사실이 의미 상 의미를 가지는 이탤릭 텍스트를 가질 수 있습니다

— SAL

2

'오디오 기반 브라우저의 경우 기울임 꼴 "i"는 기울임 꼴 음성을 사용할 수 없으므로 쓸모가 없습니다.' ... 그렇습니다 <img>. 이미지를 말할 수없고 사운드 하드웨어가없는 시스템 이 없기 때문 <audio>입니다. 때때로 표현은 요소의 목적이며, 보편적으로 지원 될 필요는 없습니다 (그리고 잠재적으로 지원되지 않는 다른 요소와 달리 이탤릭체라는 것이 유일하게 유실 된 정보이기 때문에 대체 텍스트가 필요하지 않습니다). 진짜 문제는 사람들이 의미i 할 때 말할 때 입니다. em

— nmclean

@SAL : 왜 "이탈리아어 연설"을 할 수 없습니까? 정상적인 음성이 "피치"값 100으로 말되고, 태그 사용 피치 120의 텍스트와 태그 사용 80 <tt>의 텍스트가 있고, 텍스트를 생성하는 합성 된 타자기와 텍스트를 동기화하는 텍스트를 갖는 경우 청취자는 이러한 형태의 마크 업을 쉽게 구별 할 수 있습니다. 태그를 사용하는 대신 텍스트를 사용 하여 텍스트의 일부를 "Waldorf Sans"대신 "Acme SemiScript"를 사용하여 표시 하면 작업이 훨씬 어려워 질 것입니다 .

— supercat

... 좋은 이탤릭체 폰트는 없지만, 다른 폰트 패밀리를 사용하여 작성된 텍스트 내에 설정할 때 이탤릭체 폰트 만 좋아 보일 수도 있습니다].

— supercat

@supercat 기울임 꼴이 아닌 강조된 연설을 설명하고 있습니다. 다른 톤을 원한다면 nmclean과 같이 em을 사용해야합니다. 기울임 꼴로 표시하려면 i를 사용하십시오. 스크린 리더가해야 할 일이 없기 때문에 무엇을해야할지 모릅니다. 책 제목은 종종 이탤릭체로 표시되지만 다르게 발음하지는 않습니다.

— DCShannon

<b> 및 <i> 태그가 더 이상 사용되지 않는 이유는 무엇입니까?

HTML5 이전

HTML5에서