# 이제는 피해야 할 낡은 HTML 작성 스타일 7가지
> Clean Markdown view of GeekNews topic #17076. Use the original source for factual precision when an external source URL is present.
## Metadata
- GeekNews HTML: [https://news.hada.io/topic?id=17076](https://news.hada.io/topic?id=17076)
- GeekNews Markdown: [https://news.hada.io/topic/17076.md](https://news.hada.io/topic/17076.md)
- Type: news
- Author: [ragus](https://news.hada.io/@ragus)
- Published: 2024-10-04T14:31:11+09:00
- Updated: 2024-10-04T14:31:11+09:00
- Original source: [dev.to](https://dev.to/bogdanfromkyiv/7-old-school-practices-in-html-should-be-avoided-3o75)
- Points: 29
- Comments: 14
## Summary
HTML5의 발전에 따라 더 이상 필요 없는 속성이나 태그 사용을 지양하고, 최신 표준을 준수하여 웹 페이지를 구성하는 법을 설명합니다. 예를 들어, 스크립트와 스타일 태그에서 타입 속성을 지정하지 않아도 기본값이 적용되며, 자바스크립트 없이도 HTML만으로 아코디언 메뉴를 구현할 수 있습니다. 또한, 인터넷 익스플로러와 같은 오래된 브라우저 지원을 중단하고, 불필요한 속성 값 없이 Boolean 속성만으로도 true 값을 설정하는 방식으로 코드를 간결하게 유지할 수 있습니다.
## Topic Body
#### 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"`을 추가할 필요없음.
## Comments
### Comment 29720
- Author: progdesigner
- Created: 2024-10-05T08:54:33+09:00
- Points: 1
html5 가 나온이유가 그전애 html 을 태그와 상관없이 사용했기 때문이죠. html 은 마크업랭귀지 이기 때문에 데이터를 담는 그릇이라고 보고 다루는 게 중요하다고 생각해요. 그리고 type 은 typescript (ts) 등을 다른 타입을 쓸때는 꼭 명시해야하니 생략을 너무 강조할 필요 없을 듯.
### Comment 29723
- Author: progdesigner
- Created: 2024-10-05T08:59:01+09:00
- Points: 2
- Parent comment: 29720
- Depth: 1
더 중요한 건 요즘 유틸성 class 명을 사용하는 사람들이 많은데, 데이터를 담는 거라느 부분에서 도움이 안 될 수 있습니다.
예를 들어 title 정보를 담았다면
h1, h2, h3 를 쓰더라도 class 는 title 이라고 하면 더 명시적이고 좋습니다.
근데 <div class="ts-12 tc-red"> 이런식으로 class 명을 만드는 건 좋은 방향이 아닙니다. title 이랴고 주고 css 로 해결하는 방향이 앞으로 더 오래 남을 수 있는 웹 페이지가 될 수 있습니다.
### Comment 29746
- Author: savvykang
- Created: 2024-10-06T13:25:50+09:00
- Points: 1
- Parent comment: 29723
- Depth: 2
구조가 비교적 단순한 정보전달 목적의 웹페이지라면 시맨틱 태그와 클래스를 적용하는 것이 자연스럽습니다. 다만 모든 HTML/CSS 사용자가 웹 페이지만을 작성하지는 않습니다. 웹 애플리케이션같이 시각 요소를 위한 마크업 사용이 불가피하고 구조가 복잡한 경우에 일반적인 클래스명을 사용하면 이름이 충돌하게 됩니다. 앵귤러의 [뷰 캡슐화](https://www.angular.kr/guide/view-encapsulation) 같은 기능이 그래서 필요한 거구요
### Comment 29745
- Author: readiz
- Created: 2024-10-06T12:37:25+09:00
- Points: 1
- Parent comment: 29723
- Depth: 2
어차피 react 를 대부분 쓰는데 class 에 목메기보다 컴포넌트화를 잘시키는게 관건이죠.
### Comment 29714
- Author: ndrgrd
- Created: 2024-10-05T00:16:11+09:00
- Points: 1
7번 같은 경우는 취향 문제죠. 개인적으로는 적어 주는 게 더 구분하고 읽기 편하다고 생각합니다.
### Comment 29706
- Author: [hidden]
- Created: 2024-10-04T20:28:12+09:00
- Points: 1
[숨김 처리된 댓글입니다]
### Comment 29795
- Author: tribela
- Created: 2024-10-07T13:25:32+09:00
- Points: 1
- Parent comment: 29706
- Depth: 1
<script type="text/javascript>
//
</script>
추억의 코드들이죠
### Comment 29739
- Author: koxel
- Created: 2024-10-06T09:52:27+09:00
- Points: 1
- Parent comment: 29706
- Depth: 1
과거 script 태그와 style 태그를 제대로 지원하지 못하던 브라우저에서 스타일코드와 js코드를 주석처럼 인식시키기 위해서 html 주석으로 감싸던 시절이 있었죠.
90년대 2000년대일텐데..
아직 그런 코드를 작성하시는 분이 좀 계실듯..
### Comment 29713
- Author: ndrgrd
- Created: 2024-10-05T00:14:45+09:00
- Points: 1
- Parent comment: 29706
- Depth: 1
CSS, JS 말고도 다른 언어도 상정해 뒀던 걸까요.
### Comment 29777
- Author: kayws426
- Created: 2024-10-07T10:33:40+09:00
- Points: 1
- Parent comment: 29713
- Depth: 2
javascript 말고 vbscript 가 되었었습니다. IE 에서요.
### Comment 29711
- Author: ragus
- Created: 2024-10-04T22:31:04+09:00
- Points: 1
- Parent comment: 29706
- Depth: 1
주석 처리가 제대로 되긴하려나???
### Comment 29701
- Author: carnoxen
- Created: 2024-10-04T18:37:49+09:00
- Points: 4
`<script>`의 `type` 속성은 모듈 넣을 때 필요하지 않나요?
```
<script type="module" src="home.js"></script>
```
### Comment 29703
- Author: ragus
- Created: 2024-10-04T18:39:35+09:00
- Points: 1
- Parent comment: 29701
- Depth: 1
`text/css`나 `text/javascript`가 필요 없지 `module`은 말씀대로 필요할 것 같습니다.
### Comment 29696
- Author: roxie
- Created: 2024-10-04T18:19:25+09:00
- Points: 1
h1 태그를 block: none 처리하는 기법도 오래전에 본 것 같은데 여전히 유효할런지.. 갑자기 옛날 생각이 났네요 ㅎㅎ 깔끔한 요약 감사합니다!