거의 아무도 사용하지 않는 인라인 HTML
대부분의 개발자는 , , 를 알고 있습니다.
아마도 , , , , , 와 같은 다른 태그들은 무시하고 있을 것입니다. 대신 을 사용하기 때문입니다.
이러한 요소를 사용하면 의미가 더해집니다. 스타일이 적용된 span은 기계에게 아무런 정보도 전달하지 못합니다. 반면, 이러한 요소들은 스크린 리더와 검색 엔진에 데이터를 제공합니다.
알아두면 유용한 요소들은 다음과 같습니다:
• 및 : 변경 사항을 추적합니다. 삭제된 텍스트에는 을, 새로운 텍스트에는 를 사용하세요. 이 둘은 함께 작동하여 수정 사항을 보여줍니다.
• : 더 이상 정확하지 않은 콘텐츠에 사용합니다. 삭제와는 다릅니다. 오래된 가격과 같이 유효하지 않은 정보를 표시합니다.
• 및 : 화학식이나 수학 지수에 사용합니다. 단순히 텍스트를 작게 만들기 위한 용도로 사용하지 마세요.
• : 수학이나 코드의 변수에 사용합니다.
• : 관련성이 있는 텍스트를 강조합니다. 검색 엔진은 이를 사용하여 검색어 일치 항목을 보여줍니다.
• : 툴팁을 통해 약어의 전체 버전을 제공합니다.
• : 용어를 정의하는 특정 지점을 표시하는 데 사용합니다.
• : 책이나 논문과 같은 저작물의 제목에 사용합니다. 사람의 이름에는 사용하지 않습니다.
• : 인라인 인용구를 처리합니다. 브라우저가 자동으로 따옴표를 추가해 줍니다.
브라우저의 기본 스타일은 종종 보기 좋지 않습니다. 는 노란색 형광펜처럼 보이고, 는 무작위로 표시가 붙습니다.
이 태그들을 피할 필요는 없습니다. CSS만 추가하면 됩니다.
에 브랜드 색상을 입히고, 에 점선 밑줄을 적용해 보세요. 이렇게 하면 시맨틱 코드가 깔끔한 타이포그래피로 변합니다.
일 년에 한 번이라도 올바른 태그를 사용하는 것이, 콘텐츠의 실제 의미를 속이는 span을 사용하는 것보다 훨씬 낫습니다.
출처: https://dev.to/dimonb19a/the-inline-html-almost-nobody-uses-205d