웹 표준 및 HTML 마크업 시 유의사항
- DOCTYPE 써주기
- 모든 페이지에는 h1 태그가 한개씩만 존재해야 한다
- img 태그에는 반드시 alt 속성을 써줘야 한다
- 문단을 나눌 때 br 태그 쓰지 않기
- 인라인 태그안에 블록 태그 쓰지 않기 (a 태그 예외)
- 인라인 스타일 작성 금지
DOCTYPE 써주기
현재 상용되는 HTML5을 기준으로 html파일 최상단에 필수로 작성해야 함.
<!DOCTYPE html>HTML5 이전 버전에서는 문서 형식 선언문이 길었지만, HTML5로 넘어오면서 선언문이 짧아짐.
만약 문서 형식 선언을 하지 않는다면 구형 브라우저에서는 쿼크 모드(Quirks mode) 라고 불리는 표준 모드로 웹사이트를 구동해
의도한바와 다르게 화면에 출력될 수 있음.
모든 페이지에는 h1 태그가 한개씩만 존재해야 한다
h1 ~ h6 태그는 단순히 폰트에 스타일링 된것 이상의 의미가 있다.
h는 heading의 약자로 글의 중요도에 따라 가장 중요한건 1부터 덜 중요한 순서로 숫자가 작아지는데,
CSS 몇 줄 입력하기 귀찮다고 h태그를 남발하는 행동은 매우 안좋다.
특히나 h1은 현재 페이지에서 가장 중요한 페이지의 타이틀이나, 슬로건 등 본인이 판단했을 때 가장 중요한 곳에 단 한개만 넣는것이 표준이다.
img 태그에는 반드시 alt 속성을 써줘야 한다
img 태그의 alt 속성은 어떠한 이유로 이미지가 로딩이 느려지거나, 아예 로딩이 안될 때 대체 텍스트를 입력할 수 있게 해주는 속성이다.
예를 들어, 사과모양 이미지를 넣기 위해 아래와 같이 코드를 썼다고 하자.
<img src="이미지주소" alt="사과 이미지" />만약, 이미지가 로딩이 늦거나, 로딩이 되지 않아 빈 화면이 나오게 되면 그 자리에는 "사과 이미지"라는 대체 텍스트가 들어감.
웹 접근성에 대해서도 고려를 한다면, 앞을 못보는 사용자가 웹사이트를 이용할 때 해당 사용자는 이미지 뿐만아니라 텍스트도 볼 수 없다.
이미지에 alt 속성을 적어준다면 스크린리더는 해당 텍스트를 읽어주고 적어주지 않는다면 파일명을 그대로 읽어버린다.
위와 같은이유로 alt 속성은 img 태그를 사용할 때 반드시 적어줘야하고, 진짜진짜 쓸말이 없다 하면 공백으로라도 만들어 놓아야 한다.
문단을 나눌 때 br 태그 쓰지 않기
HTML은 이름 그대로 마크업 언어이고, 스타일은 CSS가 담당한다.
줄바꿈은 스타일링 요소인데 마크업 언어로 이를 대체해 사용할 이유가 없다.
HTML을 이해하고 사용한다면 애초에 br 태그는 필요하지 않음
비슷한 의미로, b 태그 대신 em을 사용하는 등의 예시가 있다.
인라인 태그안에 블록태그 작성 금지(a 태그 예외)
본인 사이즈만큼 너비만을 갖는 인라인 태그 안에 width: 100%의 블록태그를 상식적으로 이해가 되지 않는 구조이다.
이러한 방식으로 코드를 작성하는 것은 일반적인 경우에는 금지되지만, 유일하게 a 태그는 허용된다.
인라인 스타일 작성 금지
위에서 언급한것처럼 HTML에는 스타일 요소가 포함되면 안된다.
이모션이 본능적으로 거부감을 일으킨게 이런 내용이 머리에 박혀있어서였던것 같음..