HTML 문서를 작성할 때, 시맨틱한 태그와 구조를 지키며 작업하는 것은 매우 중요하다고 강조되어 왔다. 시맨틱한 태그를 사용하면 웹 페이지의 구조를 명확하게 표현할 수 있고, 검색 엔진에서도 웹 페이지의 콘텐츠를 더 잘 이해할 수 있기 때문이다. 하지만, 콘텐츠를 작성할 때에도 몇 가지 주의사항이 있다. 해당 내용과 관련한 글을 아래에 작성해 보고자 한다.
1) 예약된 문자와 충돌을 피하며 웹 콘텐츠 작성하기
HTML 특수 문자란?
HTML 문서를 작성하기 위해서는 일부 기호(<, >, ”, ’ 등)를 사용하게 된다. 이 문자들은 일반 문자로 사용할 수 없고, HTML 코드로 인식되어 코드로만 사용할 수 있도록 예약되어 있다.
예를 들어, < 기호는 HTML의 시작 태그로 인식되기 때문에, 기호를 그대로 작성하면 브라우저에서 표시되지 않는다. 이러한 특수 기호를 브라우저에서 그대로 나타내고 싶은 경우에는 '특수 문자' 라고 하는 것으로 변환해서 사용해야 한다.
문법
& + 영문코드 + ; / &영문코드;
예제
HTML 특수 문자 표
HTML 예약어 충돌 방지 문자
| 표시 문자 | 실제 작성 | 역할 |
< | < | HTML 태그의 시작을 나타냄 |
> | > | HTML 태그의 끝을 나타냄 |
& | & | HTML 특수문자의 시작을 나타냄 |
“ | " | HTML 속성 값의 시작과 끝을 나타냄 |
‘ | ' | HTML 속성 값의 시작과 끝을 나타냄 |
(공백) | | HTML 에서 콘텐츠의 공백을 나타냄 |
키보드에 없는 특수 문자
| 표시 문자 | 실제 작성 |
© | © |
· | · |
← | ← |
→ | → |
↔ | ↔ |
↑ | ↑ |
↓ | ↓ |
« | « |
» | » |
♥ | ♥ |
♣ | ♣ |
이 외에도 다양한 특수 문자들이 존재한다. 링크
2) 영어는 소문자로 작성하기
XD나 피그마 등에서 보여지는 디자인 파일을 그대로 코드로 옮기다 보면, 단순 디자인 요소로 꾸밈을 주기 위해 대문자로 작성된 텍스트들이 종종 있을 것이다. 우리가 이를 실제로 작업할 때는 소문자로 작성하는 편이 좋은데, 여러가지 이유가 있지만 주된 이유는 웹접근성 항목 중 스크린리더(TTS)와 관련되어 있다.
먼저 아래의 음성을 들어보자.
한국어 : 구글 크롬
영어 소문자 : google chrome
영어 대소문자 : Google Chrome
영어 대문자 : GOOGLE CHROME
다음 음성도 들어보자.
영어 소문자 : copyright (c) musinsa all rights reserved.
영어 대소문자 : Copyright © Musinsa All Rights Reserved.
영어 대문자 : COPYRIGHT (C) MUSINSA ALL RIGHTS RESERVED.
단어 전체를 대문자로 작성한 경우, 제대로 발음이 되는 경우도 있지만 낱개의 알파벳 단위로도 발음이 되는 경우가 많이 발견됨을 알 수 있다. 예를들어 CSS(Cascading Style Sheets)와 같이 C.S.S 각 알파벳이 따로 발음이 되는 약어의 경우라면 의도한대로 발음이 되지만 그렇지 않다면 소리로 화면을 인지하는 사용자의 경우 많은 혼란을 겪을 수 있다.
무신사 웹 페이지의 footer / 영문 대부분이 대문자로 표기
이를 염두에 두고 약어나 첫글자만 대문자를 혼용하는 형태가 아닌, 단지 디자인을 목적으로만 콘텐츠 전체를 대문자로 사용하는 경우라면 영어 소문자로 작성하는 습관을 들이자. 우리는 HTML 문서 내에 작성한 영어 소문자 요소들을 CSS 속성 하나로 대문자로 변경할 수 있다. 바로 text-transform : uppercase를 사용하는 것이다.
(크롬과 엣지 등에서는 지원하지 않지만, 파이어폭스 브라우저에서는 uppercase 속성을 적용한 텍스트를 복사, 붙여넣기 하면 소문자 원문이 복사된다.)
마무리
마크업 작업을 하는 것은 단순히 눈에 보이는 것만을 그려내는 것에서 그치지 않는다. 우리가 프로그래밍을 할 때 여러 사이드 이펙트를 고려하고 처리하는 것처럼, 마크업 또한 상세한 작업이 필요하다. 사용자가 내가 그린 페이지를 이용할 때 어디 하나에 걸려 불편하지 않도록 항상 상세한 지침들을 공부하고 적용할 수 있도록 노력해야겠다.
참고자료
https://codingeverybody.kr/html-%ED%8A%B9%EC%88%98-%EB%AC%B8%EC%9E%90-%EC%82%AC%EC%9A%A9%EB%B2%95/