HTML 미세팁 모음

짚고 넘어가야할 HTML 내용이나, 미세팁 등을 정리해 본다.
(내가 알아낼수록 내용 더욱더 추가됨 😎)

엘리먼트 관련

<img> 엘리먼트에는 src뿐 아니라 alt도 필수 속성이다!
<h1> 과 같은 제목 엘리먼트를 이용해 텍스트를 크거나 굵게 만들면 안된다! 제목에만 사용하자.
<picture> 엘리먼트는 장치별 적합한 이미지를 사용해 적절한 대역폭을 사용하고 싶은 경우, 여러 확장자를 추가해 여러 브라우저에 대응하려는 경우 사용한다.
많은 <meta> 기능들이 더이상 사용되지 않는다. 대표적으로 <meta name="keywords" content="fill, in, your, keywords, here"> 같은 다른 검색 용어에 대해 해당 페이지의 관련성을 부여하기 위해 검색 엔진에 키워드를 제공하는 기능이였는데, 스팸 발송자들이 키워드 목록에 수백 개의 키워드를 채워버리는 악용 사례가 생겨 버렸기 때문에 이것들은 검색 엔진들이 아예 무시를 해버리게 되었다.
속도를 향상하기 위해 메인 콘텐츠가 완전히 로딩된 이후에 JavaScript로 <iframe>의 src 속성을 설정하는 편이 좋다. 웹 페이지를 더 빠르게 이용할 수 있고 SEO 측정 시 중요한 지표인 웹 페이지 로딩 시간을 단축할 수 있다.

페이지 관련

Favicon은 작은 이미지이므로 대비가 높은 단순한 이미지여야 한다.
URL을 링크 텍스트의 일부로 반복하지 않는다. URL이 보기 흉하며, 화면을 보는 사람들이 글자로 URL을 볼 때 이상하게 보인다. 링크 텍스트에 “링크”나 “링크로 이동”이라고 쓰지 않는다. 링크는 일반적으로 다른 색상으로 스타일링되고 밑줄이 그어져 있기 때문에 시각적으로 브라우저를 보는 사용자들도 링크가 있다는 것을 경험적으로 안다. (사용자들이 익숙하기 때문에 일반적으로 이 규칙을 어기면 안 된다.)
링크 텍스트를 가능한 짧게 작성한다. 화면 판독기는 전체 링크 텍스트를 해석해야 하므로 유용하다.
동일한 텍스트의 여러 복사본이 서로 다른 장소에 연결되는 경우를 최소화 한다. “여기 클릭”, “여기 클릭”, “여기 클릭”이라는 라벨이 붙어 있는 링크 목록이 있는 경우, 화면 판독기 사용자에게 문제가 발생할 수 있다
검색 엔진은 이미지 파일 이름을 읽고 SEO에 포함한다. 따라서 그 내용을 설명하는 파일 이름을 사용하자. img835.png 보다는 flower.jpg가 낫다.

Block Level Element vs Inline Element

Block Level Element (블록 수준 엘리먼트)

블록 수준 엘리먼트는 항상 새 줄에서 시작하며, 브라우저는 엘리먼트 앞뒤에 약간의 공백을 자동으로 추가한다.
블록 수준 엘리먼트는 항상 사용 가능한 전체 너비를 차지한다. (가능한 왼쪽과 오른쪽으로 뻗는다.)

대표적인 블록 수준 엘리먼트
address, article, aside, blockquote, canvas, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1-h6, header, hr, li, main, nav, noscript, ol, p, pre, section, table, tfoot, ul, video

Inline Level Element (인라인 수준 엘리먼트)

인라인 엘리먼트는 새 줄에서 시작하지 않는다. 인라인 엘리먼트는 필요한 만큼만 너비를 차지한다.

대표적인 인라인 수준 엘리먼트
a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, output, q, samp, script, select, small, span, strong, sub, sup, textarea, time, tt, var

인라인 엘리먼트는 블록 수준 엘리먼트를 포함할 수 없다!!!!

<button>
  <div>잘못된 엘리먼트 포함</div>
  <p>이렇게 하면 안돼요~</p>
</button>

HTML 작성가이드

1. 문서 맨 첫줄에 항상 DOCTYPE 선언

<!DOCTYPE html>

2. 소문자 엘리먼트 이름 사용

HTML은 엘리먼트의 대소문자를 구분하지 않지만 소문자를 사용하는 것이 좋다.

대문자와 소문자를 섞는 것은 좋지 않다.
개발자는 일반적으로 소문자 이름을 사용한다.
소문자가 더 깔끔해 보인다.
소문자는 쓰기가 더 쉽다.

<p>이건 좋지 않다.</p>
<p>이건 좋다.</p>

3. 모든 HTML 엘리먼트 닫기

<br />
<br />
<p>위의 경우는 자유지만 XHTML의 경우 닫아야 한다.</p>

4. 속성은 소문자로 작성하기

HTML에서는 속성 이름에 대문자와 소문자를 혼합할 수 있다.
그러나 2번과 같은 이유로 소문자로 작성하는 것이 좋다.

<img src="이건 별로다." />
<img src="이것도 별로다." />
<img src="이건 좋다." />

5. 속성값은 따옴표로 감싸자

HTML에서는 따옴표 없이 속성 값을 사용할 수 있다.
그러나 다음과 같은 이유로 속성 값을 따옴표로 감싸는 것이 좋습니다.

개발자는 일반적으로 속성 값을 따옴표로 감싼다.
따옴표로 묶인 값은 읽기가 더 쉽다.
값에 공백이 포함된 경우 반드시 따옴표를 사용해 한다.

<!-- 좋다. -->
<table class="striped"></table>
<!-- 별로다. -->
<table class=striped"></table>

6. <img> 에는 항상 alt, width, height 속성을 지정하자.

<img> 에 항상 alt, width, height 속성을 지정한다.
이미지가 어떤한 이유로든 표시되지 않을때 alt 속성의 값을 표시 할 수 있다. (이미지가 단순히 페이지를 꾸미는 용도라면 빈 문자열을 넣어도 무방)

width, height를 지정하면 브라우저가 해당 값만큼 공간을 예약할 수 있기 때문에 페이지 로드시의 깜박임이 줄어든다.

7. 등호 주변에 공백을 사용하지 말자

등호 주변에 공백을 허용하지만 사용하지 않는것이 좋다.

<!-- 좋다. -->
<link rel="stylesheet" href="styles.css" />
<!-- 별로다. -->
<link rel="stylesheet" href="styles.css" />

8. 한 페이지에 너무 많은 HTML 코드를 사용하지 작성하지 않기

가로로 스크롤 되지 않도록 주의하자. (보통 Linter나 Prettier의 도움을 받아 해결한다.)

9. 빈 줄과 들여쓰기

이유 없이 빈 줄, 공백 또는 들여쓰기를 추가하지 않는다.
가독성을 높이려면 빈 줄을 추가하여 큰 코드 블록이나 논리 코드 블록을 구분한다.
가독성을 위해 들여쓰기로 공백 두 개를 추가한다. 탭 키를 사용하지 않는다.

10. <title>은 중요하다!

페이지 제목의 내용은 검색 엔진 최적화에 매우 중요하다(SEO)! 페이지 제목은 검색 엔진 알고리즘에서 검색 결과 에 페이지를 나열할 순서를 결정하는 데 사용된다.

브라우저 도구 모음에서 제목을 정의한다.
페이지가 즐겨찾기에 추가될 때 페이지의 제목을 제공한다.
검색 엔진 결과에 페이지의 제목을 표시한다.

따라서 제목을 가능한 한 정확하고 의미 있게 작성해야 한다!

11. <html> 및 <body> 생략하지 않기

생략하면 오래된 브라우저에서 오류가 발생할 수 있다.
생략하면 DOM 및 XML 소프트웨어와 충돌 할 수도 있다.

12. <head>를 생략해도 될까?

페이지에 <head>가 생략된 경우 브라우저는 알아서 <head>를 추가하지만 명시적으로 작성해 주는것이 좋다.

13. 항상 lang 속성 추가

항상 lang속성을 <html>엘리먼트 내에 포함하자. 이는 검색 엔진과 브라우저를 지원하기 위한 것이다.

<html lang="ko"></html>

14. 메타데이터

문서의 적절한 해석과 올바른 검색 엔진 인덱싱을 보장하기 위해 문자 인코딩은 HTML 문서 내에 가능한 한 빨리 정의해야 한다.

<html>
  <head>
    <!-- 최신에는 UTF-8 외에는 아무것도 신경쓸 필요 없다. -->
    <meta charset="UTF-8" />
  </head>
</html>

15. 뷰포트 설정

모든 웹페이지에 다음 요소를 포함해야 한다. (반응형 웹사이트를 만들기 위해서도 필수)

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

width: device-width: 페이지의 너비를 장치의 너비로 설정
initial-sacle: 1.0: 페이지 초기 확대/축소 수준 (1.0은 확대/축소가 없다는 의미)

모바일이나 태블릿에서 아래 2개를 비교해보면 바로 이해가 된다.

뷰포트 설정 없음
뷰포트 설정 있음

관례

가급적이면 페이지당 하나의 <h1>만 사용한다.
<h2> ~ <h6> 은 계층적으로 나타나야 한다.
꼭 필요한게 아니라면 <h1> ~ <h6>을 한 페이지에 3개 이상 사용하지 않는다. 많은 목차 레벨을 가진 문서(예를 들어 너무 깊은 heading 계층)는 다루기 힘들고 탐색하기 어렵다.
밑줄에 대한 위험성 - 사람들은 밑줄을 하이퍼링크와 강하게 연관시킨다. 따라서 웹에서는 링크에만 밑줄을 긋는 것이 가장 좋다. 의미론적으로 적합한 경우 <u> 요소를 사용하되, CSS를 사용하여 기본 밑줄을 웹에서 더 적합하게 변경할 수 있는지 고려한다.

진짜 맨날쓰는 HTML Entity

일부 기호는 HTML 예약되어 있으므로 Entity Number를 사용하여 문자를 표시해야 한다.
매우 자주쓰는건 아래와 같고 나머지는 필요할때 찾아 쓰면 된다.

공백 (두칸 이상의 공백이 필요한경우) -  
< - <
> - >
& - &
" - "
' - '

ARQHIVE

Contact