드림코딩 by 엘리_Confusing tags in HTML
Confusing tags in HTML(Semantic tags, important tag)
HTML을 사용할 때 필수로 알아야 되는 semantic tags와 헷갈리는 tags 를 알아보자 :)
Semantic tags(Semantic Markup)
여기서 Semantic은 의미의, 의미가 있는 이라는 의미이다.
우리 주변의 모든 사물과 sign들이 각각 저마다의 의미를 가지고 있는 것처럼 HTML tag도 저마다의 의미가 있다.
브라우저도 의미있게 이해가능하고,
개발자도 의미있게 이해가능한 HTML에서 의미가 있는 semantin tag를 적절한 곳에 사용하는 것이 중요하다.
* 예를 들어 제목을 표기할 때는 <h1>Top level Heading</h1> 즉 Heading tag 사용
- 별도의 styling을 하지않아도 제목 이구나 하고 인식하고 브라우저에서도 자동으로 styling 해준다.
Semantic tags를 잘 사용하는 것이 중요한 3가지 이유
1. SEO(Search Engine Optimization)
- 검색을 최적화하기 위해서 semantic tags를 잘 활용한다.
2. Accessibility
- 웹 접근성
- 웹 페이지를 시각적인게 아니라 음성으로 읽어주는 스크린리더를 이용하거나 또는 키보드만을 이용해서 웹사이트를 이용하는 경우 적절한 semantic tag들로 만들어진 웹사이트 라면 스크린리더든 키보드만을 사용하든 문제없이 잘 동작가능하다.
3. For us, Maintainability
- 개발자가 HTML 코드를 바라봤을 때, 한 눈에 구조적으로 볼 수 있다.
- 유지보수성도 높일 수 있다.
<header>
- 웹사이트의 브랜드를 나타내는 logo
- 사용자들을 위한 중요 menu items
<nav>
- <header> 안에 여러가지 menu들이 모여있다면 nav를 사용한다.
<footer>
- 필수는 아니지만 웹사이트의 제일 아래에 부가적인 정보나 링크들이 들어있는 경우
<main>
- 현재 웹사이트 page에서 중요한 content를 가지고 있는 부분
<aside>
- <main> 안에서도 page의 content와 직접적으로 상관은 없는 부가적인 내용이 담겨있는 곳이 필요시
- 광고나 현 page와 연관된 다른 링크들을 나타내거나 그런 정보들을 담아놓으면 좋다.
<article>, <section>
- <main> 안에서도 필요에 따라서 <article>과 <section> 을 이용한다면 조금 더 구조적으로 웹 사이트를 구성 가능하다.
<article> vs <section>
article의 경우 블로그 포스트에서 포스트 하나
그리고 신문기사로 예를 들면 신문기사 중 하나를
하나 그자체를 묶어줄때 사용한다.
현 위이미지 에서 총6개의 블로그 포스트가 있는데 4번째 포스트를 보여주고 3번째 포스트를 보여주고
이렇게 할때 article을 사용한다.
그래서 article은 이 자체만으로 독립적으로 다른 페이지에 보여졌을 때 전혀 문제가 없을 때 경우에 사용 가능하다.
즉 main 안에있는 다른 내용들과 전혀 상관없이 독립적으로 그 고유한 정보를 나타낼때 사용가능하다.
그리고 article안에 많은 내용들이 들어있는데,
이 중 서로 연관있는 내용들을 묶어주고 싶다면 section을 이용한다.
section은 article안, main안 에서도 연관있는 내용들을 하나로 묶어줄때 사용한다.
즉 한 페이지안에서 여러가지 내용을 보여준다면,
이렇게 section 별로 나누고 하나의 section 안에서 또 다른 블로그 포스트를 보여준다면 article을 사용할 수 있다.
<i> vs <em>
화면에서는 똑같은 italic체로 표시된다.
그러나 이것을 스크린리더로 읽게 된다면 em tag가 강조된다.
즉 i tag는 시각적으로만 italic체로 변환되며 별다른 의미가 없다.
하지만 em tag는 강조하는 italic체 이다.
그래서 문장에서 내가 강조하고 싶은 italic체가 있다면 em을 사용하고
책의 제목이나 인용구나 그냥 시각적으로만 italic체로 나타내고 싶을때는 i tag를 사용한다.
<b> vs <strong>
b tag는 시각적으로만 bold체,
strong tag는 정말 중요한 bold체
정말 비슷하고 차이는 미묘하지만 이 차이점을 알고 적절히 사용해야 한다.
<ol> vs <ul> vs <dl>
HTML tag에서 list를 나타낼 수 있는 tag들의 차이점을 알아보자.
ul tag
- 순서가 없는 목록을 나타낼때, 단순히 목록으로만 나타낼때 사용한다.
- ul>li>ul 중첩사용도 가능하다.
ol tag
- 목록 중에서 순서가 정말 중요하다면 ol tag를 사용해서 순서를 표기해서 만들 수 있다.
- ol>li>ol 중첩사용도 가능하다.
dl>dt+dd (정의, 설명 목록)
- 어떤 한 단어의 대해서 설명이 묶여있을 때 그 목록을 나타낼 때 사용가능 하다.
- 한 문장 또는 단어에 정의와 그에대한 설명에 대한 리스트를 만들고 싶을 때 사용
- dt : 내가 원하는 단어
- dd : 그에 해당하는 설명
<img> vs background-image of CSS properties
img가 웹페이지안에서 하나의 중요한 요소로 자리를 잡고 있을 때,
이런 경우 img tag를 이용해서 HTML 문서안에서 자체적으로 포함이 되도록 만드는것이 좋다.
하지만 img tag가 문서의 내용과는 별개로 styling 목적을 위해서 배경이미지로 사용되는 경우
문서의 일부분이 아닌 경우 라면 CSS의 속성인 background-image 를 이용해서 이미지를 표기하는게 좋다.
이미지가 문서의 일부분이 아니고 이미가 없어도 문서를 읽고 이해하는데 전혀 지장이 없기 때문에 background-image 를 사용하는것이 적절하다.
<button> vs <a>
사용자의 특정한 action을 위해서 이 button을 클릭시,
어떤 특정한 행동이 발생하는 경우에는button을 사용하는 것이 더 적절하고
사용자가 클릭을 했을때 다른 페이지로 또는 페이지에서 어딘가로 이동하는 경우에는
즉 링크가 걸려져있는 경우에는 a tag를 사용하는 것이 더 적절하다.
<table> vs CSS
많은 데이터의 양을 (행 + 열)을 이용해서 정말 table이 필요해서 데이터를 나타내는 경우에는 table tag를 이용하면 되지만
단순히 item을 table형식으로 gird형식으로 표현하기 위해서 table tag를 사용하는 것은 좋지않다.
요즘에서 CSS의 flexbox, grid 를 사용해서 유연하게 디자인 가능하다.
문서안에서 자체적으로 의미있는 tag가 필요한건지,
아니면 내가 CSS로 styling을 위해서 tag를 사용하는 건지 점검해볼 필요가 있다.
HTML semantic tags는 따로 정답이 존재하지 않기 때문에
내가 나타내고자 하는 이 content를 좀 더 의미있는 tag를 사용할 수 는 없는지 한번 챙겨보고 확인해보는 것이 좋다.