Semantic vs Non-Semantic
태그 | 역할 (시멘틱 의미 없음) | 대체 방법 |
<i> | 기울임꼴 텍스트 | <em> 또는 CSS |
<b> | 굵은 텍스트 | <strong> 또는 CSS |
<u> | 밑줄 텍스트 | <ins> (삽입된 것을 의미) |
<s> | 취소선 텍스트 | <del> 또는 CSS |
em, strong, ins, del은 단순 스타일링을 넘어 문맥상 의미가 있다. (시맨틱)
스크린 리더와 같은 보조 기술에서는 <strong> 태그를 의미적 강조로 인식하여, 더 강한 어조로 읽어줍니다.strong vs b
b는 단순히 스타일링을 굵게 표시하는 것이고,
strong은 문맥상 중요한 부분이라는 의미까지 포함한다.
em, strong
텍스트를 이탤릭체로 표현한다. / 텍스트를 굵게 처리한다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>night-ohl title test</title> </head> <body> <em>italic</em> <strong>bold</strong> </body> </html>
1. <em>의 본래 의미
<em>태그는 강조(emphasis)를 나타내는 시멘틱 태그입니다.
- 문장에서 특정 단어나 구절을 중요하게 표현하고 싶을 때 사용합니다.
- 예: 대화를 강조하거나 뉘앙스를 전달하기 위해.
<p>I really <em>need</em> your help!</p>
브라우저는
<em> 태그의 기본 스타일로 이탤릭체를 적용합니다.이탤릭체는 오래전부터 강조를 표현하는 시각적 방법으로 사용되어 왔기 때문입니다.
ins
- 의미: 문서에 삽입된 콘텐츠를 나타냅니다.
- 렌더링: 기본적으로 텍스트 아래에 밑줄이 표시됩니다.
- 사용 시나리오:
- 문서 편집 기록을 보여줄 때.
- 변경된 내용을 명확히 하고자 할 때.
- 법적 문서, 계약서 등에서 추가된 내용을 강조할 때.
ins, del (github)
ins, del은 단순히 밑줄과 취소선이 아니다. 기본 스타일링이 이럴 뿐이다.
삽입 삭제의 의미를 가진 시맨틱 태그다.따라서 스타일링은 자유롭게 다시 하면 된다.
예시로 깃헙과 같이 code change를 보여줄 때
ins, del 태그를 쓴다.