이제는 피해야 할 낡은 HTML 작성 스타일 7가지

1. <script> 및 <style> 태그에서 type 속성 사용하기

예전에는 type="text/css" 또는 type="text/javascript"와 같이 사용했지만, 이제는 단순히 <script> 또는 <style>만 사용해도 충분함.

2. Javascript 사용해서 아코디언 메뉴 만들기

<details>와 <summary>를 사용하여 HTML만으로도 간단히 구현할 수 있음.

3. <header>와 <footer>는 페이지당 한 번만 사용하기

일부 사용자는 <header>와 <footer>가 페이지 전체의 머리글과 바닥글을 나타낸다고 생각할 수 있지만, 실제로 이 요소들은 가장 가까운 섹션과 관련이 있음. 즉, <article>, <aside>, <nav>, <section> 요소의 자식으로 사용할 수 있으며, 새로운 섹션을 만들 때 <header>와 <footer>를 사용하는 것이 좋음.

4. <iframe>의 테두리를 제거를 위해 frameborder="0"을 사용하기

frameborder="0"을 사용하던 것은 HTML5에서 더 이상 권장되지 않음. 대신, CSS를 사용하여 iframe { border: none; } 과 같이 설정하는 것이 좋음.

5. IE8 지원하기

Internet Explorer 8뿐만 아니라 모든 버전의 Explorer 지원을 멈춰야 함. Microsoft는 2022년 6월에 IE 11에 대한 지원도 중단했으므로, 우리도 더 이상 IE 지원을 고려할 필요가 없음.

6. 헤딩 태그 무작위로 사용하기

페이지 구조에 따라 헤딩 태그를 사용하고, 내림차순으로 작성해야 함. 마지막 태그가 <h2>였다면, 다음은 <h2> 또는 <h3>를 사용해야됨.

7. HTML 태그의 Boolean 속성을 위해 ="1" 추가하기

HTML 태그의 Boolean 속성은 단순히 속성 자체만 작성해도 값이 true로 설정됨. 예를 들어, <input type="text" value="This input is disabled" disabled />와 같이 disabled 속성이 있으면, 그 자체로 true임을 의미하기 때문에 ="1"을 추가할 필요없음.

[progdesigner]

html5 가 나온이유가 그전애 html 을 태그와 상관없이 사용했기 때문이죠. html 은 마크업랭귀지 이기 때문에 데이터를 담는 그릇이라고 보고 다루는 게 중요하다고 생각해요. 그리고 type 은 typescript (ts) 등을 다른 타입을 쓸때는 꼭 명시해야하니 생략을 너무 강조할 필요 없을 듯.

[progdesigner]

더 중요한 건 요즘 유틸성 class 명을 사용하는 사람들이 많은데, 데이터를 담는 거라느 부분에서 도움이 안 될 수 있습니다.

예를 들어 title 정보를 담았다면
h1, h2, h3 를 쓰더라도 class 는 title 이라고 하면 더 명시적이고 좋습니다.

근데 <div class="ts-12 tc-red"> 이런식으로 class 명을 만드는 건 좋은 방향이 아닙니다. title 이랴고 주고 css 로 해결하는 방향이 앞으로 더 오래 남을 수 있는 웹 페이지가 될 수 있습니다.

[savvykang]

구조가 비교적 단순한 정보전달 목적의 웹페이지라면 시맨틱 태그와 클래스를 적용하는 것이 자연스럽습니다. 다만 모든 HTML/CSS 사용자가 웹 페이지만을 작성하지는 않습니다. 웹 애플리케이션같이 시각 요소를 위한 마크업 사용이 불가피하고 구조가 복잡한 경우에 일반적인 클래스명을 사용하면 이름이 충돌하게 됩니다. 앵귤러의 뷰 캡슐화 같은 기능이 그래서 필요한 거구요

[readiz]

어차피 react 를 대부분 쓰는데 class 에 목메기보다 컴포넌트화를 잘시키는게 관건이죠.

[ndrgrd]

7번 같은 경우는 취향 문제죠. 개인적으로는 적어 주는 게 더 구분하고 읽기 편하다고 생각합니다.

[tribela]

<script type="text/javascript> //<![CDATA[ js codes... //]]> </script>

추억의 코드들이죠

[koxel]

과거 script 태그와 style 태그를 제대로 지원하지 못하던 브라우저에서 스타일코드와 js코드를 주석처럼 인식시키기 위해서 html 주석으로 감싸던 시절이 있었죠.
90년대 2000년대일텐데..
아직 그런 코드를 작성하시는 분이 좀 계실듯..

[ndrgrd]

CSS, JS 말고도 다른 언어도 상정해 뒀던 걸까요.

[kayws426]

javascript 말고 vbscript 가 되었었습니다. IE 에서요.

[ragus]

주석 처리가 제대로 되긴하려나???

[carnoxen]

<script>의 type 속성은 모듈 넣을 때 필요하지 않나요?

<script type="module" src="home.js"></script>  

[ragus]

text/css나 text/javascript가 필요 없지 module은 말씀대로 필요할 것 같습니다.

[roxie]

h1 태그를 block: none 처리하는 기법도 오래전에 본 것 같은데 여전히 유효할런지.. 갑자기 옛날 생각이 났네요 ㅎㅎ 깔끔한 요약 감사합니다!