Semantic elements = elements with a meaning

What are Semantic Elements?

Semantic element는 이것의 의미를 브라우저와 개발자 모두에게 명확히 설명한다.

non-semantic elements에는 <div>와 <span> 가 있고 내용에 대해 아무것도 짐작할 수 없다.

semantic element에는 <form>, <table>, 그리고 <article>가 있다. 이름만 보아도 어떤 내용이 들어갈지 명확히 보여준다.

Semantic Elements in HTML

많은 웹사이트에서 <div id="nav">, <div class="header">, <div id="footer">와 같은 HTML 코드를 볼 수 있다. 이 코드들은 navigation, header, footer를 나타낸다.

HTML에서는 이 다른 부분들을 정의하기 위한 semantic elements가 있다.

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>
  
  여기에서 위의 나머지 요소들의 설명을 볼 수 있다.

면접 질문 예시

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

우선 가장 큰 차이점은 <img> 태그는 inline 요소이고 <div> 태그는 block 요소이다.

<img> 태그를 쓰면 좋은 경우:

• content에 연관이 되있는 경우 - 디자인적 요소가 아닌 경우
• 검색엔진에 의해 인덱스되어야 하는 경우. 구글은 자동으로 background images를 인덱스하지 않는다. <img> 태그가 아닌 경우 이미지 검색결과는 이미지 스프라이트로 채워지게 될 것이다.
• <img> 태그는 alt와 타이틀 속성을 더할 수 있어서 스크린리더와 검색 엔진에 반응할 수 있다.
• 큰 사이즈의 백그라운드 이미지를 많이 로드하게 되면 브라우저는 CSS를 파싱하고 이미지를 불러오는데에 더 많은 시간을 들이게 된다. 이는 전체 페이지의 로딩을 지연시킨다. <img>태그를 사용하면, HTML이 파스되면서 requests가 되기 때문에, 태그 전에 오는 어떤 내용이든 사용자가 읽을 수 있는 정보가 되므로 성능면에서 좋은점이다.
• Inline images(img or picture) 는 pictrefill이나 lazy loading같은 더욱 나은 성능을 낼 수 있는 도구들의 이점을 취할수 있다.
• 사용자가 페이지를 인쇄할 때, 해당 이미지가 default로 포함되길 원할 경우
• 브라우저 배율을 사용하여 텍스트 크기에 비례하여 이미지를 렌더링하는 경우

CSS background-image를 쓰면 좋은 경우:

• 디자인적으로만 사용될 경우
• 해당 이미지가 내용(content)의 일부가 아닌 경우
• 작은 이미지들의 경우, 다운로드 시간을 개선해야할 경우 (CSS sprites)
• 사용자가 페이지를 인쇄할 때, 해당 이미지가 default로 포함되지 않기를 원할 경우