웹 표준 및 HTML 마크업 시 유의사항

HTML logo

웹 표준 및 HTML 마크업 시 유의사항

웹 표준을 기반으로 헷갈리거나 쉽게 놓치는 부분들을 설명하는 것이기 때문에
프론트엔드 개발을 한다면 반드시 숙지해야하는 내용이다.

순서

  1. DOCTYPE 써주기
  2. 모든 페이지에는 h1 태그가 한개씩만 존재해야 한다
  3. img 태그에는 반드시 alt 속성을 써줘야 한다
  4. 문단을 나눌 때 br 태그 쓰지 않기
  5. 인라인 태그안에 블록 태그 쓰지 않기 (a 태그 예외)
  6. 인라인 스타일 작성 금지

DOCTYPE 써주기

현재 상용되는 HTML5을 기준으로 html파일 최상단에 <!DOCTYPE html>을 필수로 작성해야 함.

HTML5 이전 버전에서는 문서 형식 선언문이 꽤 길었기 때문에
외우기도 애매해 아마 빼먹는 사람들도 있었을 것 같은데
HTML5로 넘어오면서 선언문이 짧아짐.

만약 문서 형식 선언을 하지 않는다면
구형 브라우저에서는 쿼크 모드(Quirks mode) 라고 불리는 표준 모드로 웹사이트를 구동해
의도한바와 다르게 화면에 출력될 수 있음.

모든 페이지에는 h1 태그가 한개씩만 존재해야 한다

h1 ~ h6 태그는 단순히 폰트에 스타일링 된것 이상의 의미가 있다.
hheading의 약자로 글의 중요도에 따라
가장 중요한건 1부터 덜 중요한 순서로 숫자가 작아진다.

p태그나 span으로 작성해야 하는 내용임에도 불구하고
CSS 몇 줄 입력하기 귀찮다고 스타일링 되어있는 h태그를 사용하는것은 좋지 않은 방법이다.

특히 h1은 페이지에서 가장 중요한 문구인 타이틀이나, 슬로건 등
해당 페이지를 대표하는 가장 중요한 부분에 단 한개만 사용하는것이 표준이다.

img 태그에는 반드시 alt 속성을 써줘야 한다

img 태그의 alt 속성은 어떠한 이유로 이미지가 로딩이 느려지거나, 아예 로딩이 안될 때
이미지의 자리에 대체 텍스트를 입력할 수 있게 해주는 속성이다.

예를 들어, 사과모양 이미지를 넣기 위해 아래와 같이 코드를 썼다고 하자.

1
<img src="이미지주소" alt="사과 이미지" />

만약, 이미지가 로딩이 늦거나, 로딩이 되지 않아 빈 화면이 나오게 되면
그 자리에는 사과 이미지라는 대체 텍스트가 들어가
사용자가 빈공간을 보게되는 상황은 생기지 않을 것이다.

위의 이유와 더불어 더 중요한 이유가 있다.

웹 개발자라면 웹 접근성에 대해서도 고려를 할텐데
앞을 못보는 사용자가 웹사이트를 이용한다고 가정했을 때
그 사용자는 이미지 뿐만아니라 텍스트도 볼 수 없다.

그렇기 때문에 스크린리더를 통해 웹 페이지를 읽어주는 것을 듣고 사이트를 이용할텐데
이미지에 alt 속성을 적어준다면 해당 텍스트를 읽어주고
적어주지 않는다면 파일명을 그대로 읽어버린다.

위와 같은이유로 alt 속성은 img 태그를 사용할 때 반드시 적어줘야하고
진짜진짜 쓸말이 안떠오른다 하면 공백으로라도 만들어 놓아야 한다.

문단을 나눌 때 br 태그 쓰지 않기

HTML은 이름 그대로 마크업 언어이고, 스타일은 CSS가 담당한다.
줄바꿈은 스타일링 요소인데 마크업 언어에 들어갈 이유가 없다.

스타일링 하다가 꼬여버린 부분을 나몰라라식으로 br 태그로 돌려막다간 나중에 수습하기 매우 힘들것이다.
아마 HTML을 완벽히 이해했다면 br 태그는 필요하지 않을 것이다.

인라인 태그안에 블록태그 작성 금지(a 태그 예외)

상식적으로 본인 사이즈만큼 너비만을 갖는 인라인 태그 안에
width: 100%의 블록태그를 넣는건 말이 안된다.
일반적인 경우에는 금지되지만 유일하게 a 태그는 허용된다.
그냥 생각없이 코드 치다보면 인라인, 블록 신경안쓰다가
CSS로 하나하나 디스플레이 잡아줘야하는 상황이 발생할 수 있음.

인라인 스타일 작성 금지

인라인 스타일(<p style="border: 1px solid red">)은 올바르지 않은 방법이다.
위에서 언급한것처럼 HTML에는 스타일 요소가 포함되면 안된다.

마무리

추가적인 사항이 있다면 댓글 부탁드립니다!

개인적으로 공부한 내용을 정리한 것이기 때문에 반말을 사용한 점 양해 부탁드립니다.
잘못된 부분이나 피드백이 있으시다면, 댓글에 남겨주시면 감사하겠습니다!

공유하기