만능 HTML 😎

웹사이트, 웹 어플리케이션, 모바일 앱까지 만들 수 있는 HTML

다른 프로그래밍 언어보다 진입장벽이 훨씬 낮은 마크업 언어이지만,

만만하게 보고 실전에 적용하려니 어디에서 어떤 태그를 써야하는지 헷갈린다.

프론트엔드 개발자라고 말할 수 있으려면,

기본 중의 기본인 HTML에 대해서 확실히 알아보고 사용해야하지 않을까해서 정리해보았다.

HTML을 사용할 때 필수, Semantic Tags! 🏷

What is Semantic Tags(Semantic Markup)?

문에 달린 손잡이는 문을 여는 사용하는 도구로, 컵에는 물을 담아 마시는 도구로, 문서 작성할 때 제목은 크게 쓴다.

이처럼 우리 주변의 모든 사물과 사인들은 각각 저마다의 의미를 가지고 있다.

따라서 HTML 태그에도 각각 저마다의 의미가 있다.

웹페이지에도 제목이 있다.

물론 <span> 태그를 사용해서 글자 크기를 키워 제목처럼 보이게 할 수는 있지만,

이건 마치 컵이 있는데도 후라이팬에 물을 부어서 마시는 꼴이다.

제목을 표현할 때는 <h1> 태그를 사용해서 스타일링을 따로 하지 않아도 브라우저가 인식하고 제목 표시를 해준다.

HTML에서 <div> 태그만을 사용해서 모든 웹사이트를 만들 수도 있다.

하지만! 브라우저도 의미있게 이해하고, 개발자도 의미있게 이해하기 위해서는

HTML에서 의미있는 Semantic Tags를 적절하게 잘 사용하는 것이 중요하다.

Semantic Tag를 잘~ 사용해야 하는 중요한 이유 3가지?

1. 💡 SEO (Search Engine Optimization)

검색을 최적화하기 위해서 적절한 제목과 부제목, 시맨틱 태그들을 잘 활용한다면 특정 키워드를 검색했을 때, 해당 웹사이트가 노출될 수 있다. 다시 말해, 검색 엔진이 어떤 검색 결과에 해당 정보를 띄워줘야 할 지 알 수 있다.

2. 🕶 웹 접근성 (Accessibility)

웹페이지를 시각적인 것이 아니라 음성으로 읽어주는 스크린 리더를 이용하거나 키보드만을 이용해서 웹사이트를 사용하는 경우, 적절하게 시맨틱 태그를 이용해 잘 만들어진 사이트라면 스크린 리더든 키보드만을 사용하든 문제없이 잘 동작할 수 있어야 한다.

3. 👩‍💻 개발자들을 위해서, 유지보수성 (For us, Maintainability)

개발자들이 HTML 코드를 바라봤을 때, 이 웹사이트는 어떻게 구조가 짜여져 있는지 한 눈에 알아볼 수 있고 유지보수성을 더 높여 개발할 수 있다.

Semantic Tag로 웹사이트 구조를 어떻게 효율적으로 나타낼 수 있을까?

🚨 웹사이트를 만들 때 (특히 JS 프레임워크를 이용할 때) <div> 태그를 남발하는 경우가 많다. 하지만, 위에서 말했듯 Semantic Tag를 잘 사용해야 SEO, Accessibility, Maintainability가 아름다운 웹사이트를 만들 수 있다.

• <header> : 웹사이트를 나타내줄 수 있는 브랜드 로고 또는 사용자 메뉴 아이템을 담고 있을 때
• <nav> : header 태그 안에 여러가지 메뉴들이 모여있을 때
• <footer> : 웹사이트 제일 하단에 부가적인 정보나 링크를 담고 있을 때
• <main> : 웹사이트의 페이지에서 중요한 컨텐츠를 가지고 있을 때
• <aside> : main 태그 안에 컨텐츠와 직접적으로 상관없는, 부가적인 내용이 담겨있을 때 (광고 또는 연관된 다른 링크들)
• 필요에 따라서 <article>, <section> 을 이용해 더 구조적인 웹사이트를 구성해볼 수 있다.

자주 헷갈리는 Semantic Tag 확실히 잡기 👊

1. <article> vs <section>

article

블로그 포스트 하나, 신문 기사 하나 자체를 묶어줄 때 사용하다.
이 자체만으로 독립적으로 다른 페이지에 보여졌을 때 전혀 문제가 없을 때 사용할 수 있다.
즉, main 태그 안의 다른 내용들과 전혀 상관없는, 독립적으로 고유한 정보를 나타낼 때 사용할 수 있다. 애플 watchOS의 읽기 모드는 이 태그를 통해서 페이지의 본문을 파악한다고 한다.
만약 이 article 안의 많은 내용들 중에 서로 연관 있는 내용들을 묶어주고 싶다면 section 태그를 이용해 또 다른 영역으로 묶어줄 수 있다.

section

article 태그 안이나 main 태그 안이나, 아무 곳에서나 연관있는 내용들을 하나로 묶어줄 때 section 태그를 사용한다. 한 페이지 안에 여러가지 내용을 보여준다면 section별로 나누고, 하나의 section 안에서 또 다른 블로그 포스트를 보여준다면 article 태그를 사용할 수 있다. 하지만 section 안에 article이 여러 개 들어가는 것은 조금 부자연스러울 수 있다. 서로 관련 있는 내용을 모아 놓아야 할 section안에 각각이 독립된 article이 들어가서 서로 다른 내용의 독립 article이 배치되기 때문이다.

2. <em> vs <i>

화면에 그려졌을 때 차이점은 없는데, 스크린 리더로 읽힐 때 em은 강조로 읽히고 i는 자연스럽게 이어져 읽히는 차이가 있다.

em

강조하는 이탤릭체로, 문장에서 정말 강조하고 싶은 이탤릭체가 있다면 이걸 사용해야한다.

i

시각적으로만 이탤릭체로 변환되고 별다른 의미가 없다.

3. <b> vs <strong>

화면에 그려졌을 때 차이점은 없는데, 스크린 리더로 읽힐 때 차이점 strong은 강조로 읽히고 b는 자연스럽게 이어져 읽히는 차이가 있다.

b

시각적으로만 볼드체로 나타냄

strong

정말 중요한! 강조하는 볼드체

⇒ 2번과 3번에서 정리한 태그들은 기능적으로 정말 비슷하고 차이는 너무 미묘하지만
그 차이점을 알고 적절한 곳에서 사용한다면 시맨틱 태그에 대해서 잘 아는 멋진 개발자가 될 수 있다는 점

4. <ul> vs <ol> vs <dl>

ul

UnorderList + list → 순서가 없는 목록을 나타낼 때, 단순한 목록으로만 나타낼 때 사용한다. ul 태그 + li 태그 안에 또 다른 ul 태그와 li 태그를 사용해서 중첩된 목록을 보여줄 수도 있다.

ol

OrderList + list → 순서를 표기한 목록을 나타낼 때, 순서가 중요할 때 사용한다.

dl

Description List 요소로 어떤 한 단어에 대한 정의와 설명 목록을 표현할 때 사용한다.

• dt : Description Term 원하는 단어
• dd : Description Detail 단어에 해당하는 설명

5. <img> vs css : background-image

img

이미지가 웹페이지 안에서 하나의 중요한 요소로 자리잡고 있을 때, img 태그를 이용해서 HTML 문서 안에서 자체적으로 포함되도록 만드는 것이 좋다.

background-image

이미지가 스타일링 목적으로 배경 이미지로 사용되는 경우, 즉 문서의 일부분이 아닌 경우(이미지가 없어도 문서를 읽는데 지장이 없을 때)는 CSS의 background-image 사용한다.

6. <button> vs <a>

button

사용자의 특정한 액션을 위해서 버튼을 클릭했을 때 어떤 행동이 발생하는 경우에 사용한다.

a

사용자가 클릭했을 때 어딘가로 이동해야하는 경우, 링크가 걸려져 있는 경우에 사용한다.

7. <table> vs css

table

행과 열 데이터가 필요한 경우에 사용한다.

css

단순한 그리드 스타일링 형식을 보여주기 위해서 사용한다. flex나 grid를 이용해 유연하고 아름답게 스타일링이 가능하다.

✨ 정리

• 화면을 구성할 때 항상 사용하는 태그, 익숙한 태그만 썼었는데(div, span, img 등) HTML의 Semantic Tag에 대해서 공부해보니 전체 구조를 탄탄하게 짜야 확실히 나중에 코드를 보고 파악할 때도 좋을 것 같다는 생각이 든다. 🙂
  시맨틱 태그에 정답은 없다. 다만, 내가 나타내고자 하는 컨텐츠를 더 의미있는 태그로 나타낼 순 없을지 한 번 더 확인해보고 사용해보자!

---

참고 내용

드림코딩 by 엘리

HTML 요소 참고서