1. 의미 + 기술

Semantic HTML : html 엘리먼트와 속성, 속성값은 특정한 의미를 지니도록 정의되었다.
내가 쓰는 태그가 어떤 의미를 담고 있는지 아는 것 중요하다.

나쁜사례 : 청와대 웹사이트 -> 메뉴, 푸터 등이 죄다 div로 되어 있음

모범사례 : 레진코믹스 -> header, main, aside, template, footer

2. HTML 5

마이크로 데이터

업무에 당장 필요하지 않다면 어떻게 사용하는지 굳이 배워둘 필요는 없음. 그냥 지금은 itemscope, itemprop, itemtype 등과 같은 추가 속성을 통해 엘리먼트가 표현하는 데이터가 어떤 의미인지 알려주는 것이라고만 알고 있으면 됨.

비주얼 요소를 의미하는 태그는 의미가 변경되거나 사라지는 추세.

• <img> 태그에서는 마진과 보더를 설정하는 속성이 사라짐.
• <b> 태그는 HTML4에서는 bold 굵은 텍스트였지만, HTML5 명세에서는 reader의 주의를 끌기 위한 용도(HTML5에선 안 그랬는데 MDN 문서에서는 굳이 라임을 맞추려고 Bring Attention to element라고 씀). 중요한 내용 표시엔 사용하지 않음. 중요한 내용을 담은
  텍스트는 <strong>을 사용.
• <i> 태그는 HTML4에서는 italic text style. HTML5에서는 Idiomatic Text(관용구)에 사용하라고 정해둠.
• 강조는 <em> emphasis으로 표현.
• <s> 태그는 <strike>와 같은 의미였음. Deprecated 되었다가 <s>만 살아남았는데 비주얼 요소에 대한 의미는 없고, "더 이상 정확하지 않은 정보", "이제는 적절하지 않은 정보"를 표시하도록 되어있음.
• 문서에서 삭제된 텍스트를 표기할 때는 <del>을 사용하라고 권고
• <small>은 부가적인 코멘트 표시. 예) small print (계약서 등의 작은 글씨. VAT 포함이러거나 라이센스 고지라거나). HTML4에서는 <big>과 대조되는 한쌍이었는데 <big>은 사라지고 의미를 더해 살아남음.
• <u> 태그는 HTML4에서 underline. HTML4에서 deprecated 되었다가 HTML5에서 부활함. unarticulated(articulate 분명히 표현하다/또렷이 말하다), non-textual annotation 중국어 고유 명사 표기 또는 오타 표기(아래 링크 참고) MDN에서는 상황에 따라 적절하게 <em>, <mark>, <cite> 등으로 대체하는 게 좋다고 권장.
• 텍스츄얼한 정보는 <ruby>로 표시한다.
• U 엘리먼트 정의

HTML4에선 보기 힘들었던 풍부하고 다양한 기능이 추가되었음

<video>와 <canvas>로 시대를 호령했던 플래시가 사라지는 계기가 되었음.
기능이 계속 추가되거나 변하고 있고 HTML 외의 별도 명세로도 많이 존재함.
예) Notification API(데스크탑 알림), XMLHttpRequest(ajax), Fullscreen API, Fetch, Console 등.

HTML을 잘 사용하자

실제로 대부분은 HTML 명세에서 정의되어 있고, 다른 기능도 별도 명세로 존재함. 순수하게 자바스크립트라는 언어만 따지면 생각보다 훨씬 적은 영역만 담당함. 프론트엔드 개발의 대부분은 자바스크립트를 사용해서 이러한 API를 호출하고 사용하는 걸로 이루어짐.
HTML에 추가된 기능이 많아서 HTML만 잘 알고 있어도 할 수 있는 게 많음.
JS 코드를 줄일 수 있는 여지도 많고, 성능 면에서도 더 이득인 경우가 많다.

3. 점진적 향상 vs 우아한 성능 저하

모든 브라우저에서 동일한 기능을 완벽하게 제공하려고 애쓸 필요는 없다.
중요한 건 사용자가 꼭 필요한 정보를 얻는데 있어 불편함이 없으면 되는 것.

점진적 향상

먼저 성능이 부족한 환경을 기준으로 작성한 다음, 최신 기능을 지원하는 환경에서만 해당 기능을 제공한다.
블로그 게시물을 프린트 하는 버튼을 생각해보자. 프린트가 되지 않는 환경에서 해당 버튼이 보
인다면 사용자에게 혼란을 줄 것이다. 따라서 이 버튼은 아예 없거나 보이지 않게 숨겨둔 채로 개발한다. 이후 해당 환경에 프린트 기능이 지원되는지 JS로 확인한 다음 버튼을 보이게 하거나 새롭게 추가한다.

우아한 성능 저하

<video> 태그를 지원하지 않는 브라우저가 있다고 생각해보자. 일단 웹 사이트는 지원하는 브라우저를 기준으로 작성하되 <video> 태그 안에 이미지 태그를 넣어두면 적어도 이미지를 보여줄 수 있다. 혹은 동영상 파일의 링크를 추가하여 클릭해서 보도록 할 수도 있다. 이렇게 기능을 제공하되 지원하지 않는 환경에 대해 대비책 혹은 폴백을 만들어두는 것을 우아한 성능 저하라고 부른다.

두 가지 방법은 한 페이지에서도 보완적으로 사용되곤 한다. 사용자가 필수 정보를 접근할 때 필요하다면 호환성을 중시해 점진적 향상을 사용하고 동영상이나 아이콘처럼 반드시 필요한 게 아니라면 우아한 성능 저하를 사용하기도 한다.
브라우저 점유율이나 기능 지원 여부를 기준으로 삼아서 방법을 결정하는 경우도 있다. 점유율이 높은 브라우저를 기준으로 작성하고 낮은 브라우저를 추가 지원하는 방식으로 진행할 수 있다.

브라우저의 기능 지원은 MDN에서 봐도 되지만 caniuse.com 추천

4. 알아두면 좋은 속성

1. <input type="file" accept="">
   

2. <img loading="lazy"> https://5kcsx.csb.app/

3. <img srcset="img_small.jpg 400w, img_medium.jpg 700w, img_large.jpg 1000w" src="img_small.jpg"> 400w는 이미지의 원래 크기
   sizes="(max-width: 600px) 480px" 뷰포트 크기에 따라 이미지 크기 조절