참고문서
10 HTML best practices for beginners
- 적절한 문서 구조를 갖춰라. HTML은
<html><head><body>태그 없이도 작동가능하다.
하지만, 해당 태그들이 없을 경우 특정 브라우저에서는 정상적으로 작동하지 않을 수 있다.
따라서 적절한 HTML 구조를 유지해야한다.
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>This is a website.</h1>
</body>
</html>-
올바른 doctype 을 선언하라.
-
close tag를 잊지마라.
-
inline styles를 사용하지마라.
inline styles를 사용하면 처음에는 편해보일 수 있으나, 이것이 많아질 경우 유지/보수하기에 어렵다.
그 대신 style sheets를 분리하여 관리하자.
<!--Bad Case-->
<p style="color: #393; font-size: 24px;">Thank you!</p>
<!--Good Case-->
<p class="alert-success">Thank you!</p>
-
image는 항상 alt 속성과 함께 사용하라.
image를 잘 설명해둔 alt는 사용자의 이해를 도와준다.
-
자주 유효성 검사를 해라.
HTML document가 완성된 이후보다, HTML 작업을 하면서 여러번 코드를 검사하자.
이것은 보다 에러를 빠르게 확인할 수 있도록 하며, 특히 문서가 길 경우 더욱 효과적이다.
-
외부 style sheets는
head태그 안에 선언하라.외부 style sheets는 어디에 위치해도 상관은 없지만,
head태그안에 두는 것이 페이지를 더 빠르게 불러온다. -
의미있는 태그명을 사용하라.
div와 같은 일반적으로 통용되는 태그를 사용하는 것을 줄이고,section,article과 같이 해당 태그를 설명할 수 있는 태그명을 사용하자.
<!--Bad Case-->
<div class="container">
<div class="article">
<div class="headline">Headlines Across the World</div>
</div>
</div>
<!--Good Case-->
<div class="container">
<article>
<h1>Headlines Across the World</h1>
</article>
</div>-
lowercase markup 을 사용하라.
HTML은 lowercase 나 uppercase 모두 사용가능하다.
하지만, 태그명을 lowercase로 유지하는 것이 가독성과 유지보수에 도움을 준다.
-
한 페이지의 element의 수를 줄여라.
한 페이지에 많은 컨텐츠를 담을 수록 HTML document는 더욱 복잡해진다.
따라서 페이지의 크기를 줄이기 위해, 일단 markup이 끝난 이후 최대한 간결하게 수정해보자.
(물론, 작업을 하면서도 꾸준히 최적화 작업을 하면 좋다.)
More information
