HTML Tags 정리

Semantic Tags(Semantic Markup)

의미가 있는이라는 뜻으로, 중요한 점으로는

 

첫번째 SEO(Search Engine Optimization) 검색을 최적화 하기 위해서 제목과 부제목, semantic tags들을 잘 활용한다면 제목과 부제목 같은 특징들을 잘 파악할 수가 있다.

 

두번째 Accessibility 웹 접근성으로 음성으로 읽어주는 스크린 리더를 이용하거나 또는 키보드만을 이용해서 웹사이트만을 이용하는 경우 적절한 시멘틱 태그로 잘 만들어진 웹사이트이면 스크린 리더등 키보드든 잘 동작하게 된다.

 

마지막으로는 개발자들의 유지보수성 측면인데, 개발자가 HTML 코드를 바라봤을 때 한 눈에 이런식으로 구조가 짜져있구나라고 판단할 수 있고 이게 유지보수성과 연관이 있다.(Maintainability)

 

개발자들이 div tag를 남발해서 사용하는 경우보다는 의미있는 태그들로 구성된 웹페이지를 작성하는 것이 좋다.

div 태그로만 구성

웹사이트의 브랜드를 나타내는 로고나, 사용자들을 위한 중요한 메뉴 아이템들이 들어있으면 div대신에 header를 사용하는 것이 좋고 header안에 여러가지 메뉴들이 모여있으면 nav를 사용하는 것이 좋다. 필수는 아니지만 웹사이트 제일 아래에 마지막으로 부가적인 정보나 링크들이 들어있으면 footer를 사용하면 좋고 현재 웹사이트 페이지에서 중요한 컨텐츠를 가지고 있는 부분은 main을 사용하는 것이 좋다.

 

main안에서도 페이지의 컨텐츠와 직접적으로 상관은 없는 부가적인 담겨있는 곳이 필요하다면 aside태그를 이용해서 광고나 페이지와 연관된 다른 링크들을 나타내는 정보들을 담아놓으면 좋다.

 

main안에서도 div로만 구성되게 하는거 보다는 필요에 따라서 article과 section을 이용한다면 조금더 구조적으로 웹사이트를 구성해볼 수가 있다.

header nav main section aside footer 태그들로 구성

article과 section 둘 중 무엇을 사용해야 하냐 article같은 경우는 블로그 포스트에서 포스트 하나 , 신문기사에서의 기사 하나 자체를 묶어줄 때 사용한다. 즉 article은 자체만으로(독립적으로) 다른페이지에 보여졌을 때 전혀 문제가 없을 때 사용할 수 있다. main안에 있는 다른 내용들과 전혀 상관없이 독립적으로 고유한 정보를 나타낼 때 사용할 수 있다.

그리고 article안에 많은 내용들이 있는데 서로 연관이 있는 내용들을 묶어주고 싶을 때 section을 쓴다. article안이나 main안이나 아무곳에서나 연관있는 것들을 하나로 묶어줄 때 section을 사용할 수 있다.

그래서 한 페이지안에 여러가지 내용을 보여준다면 section별로 나누고 하나의 section안에서 또 다른 블로그 포스트를 보여준다면 article을 사용할 수 있다.

 i와 em태그를 보면 간단하다. i 태그는 시각적으로만 이탤릭체이고 em태그는 강조하는 이탤릭체이다. 

즉 스크린 리더기로 아래를 읽어보면 HTML만 소리높여 읽히게 되고 CSS는 그냥 이탤릭체만 되어있고 평서문으로 읽히게 된다.

<p>나는 <em>HTML을</em> 마스터 할것이다.<i>CSS도</i>마찬가지이다.</p>

<b>와 <strong> 태그도 마찬가지이다. b는 시각적으로만 볼드체이고 strong는 정말 중요한 볼드체이다.

 

<ul> <ol> <dl>

ul태그는 순서가 없는 목록을 나타낼 때 단순히 목록으로만 나타낼 때 사용할 수 있다.

그래서 ul가 li을 각각 묶어서 표기할 수 있다.

<ul>
	<li>html</li>
	<li>css</li>
	<li>javascript</li>
</ul>

중첩해서 사용할 수도 있다.

<ul>
	<li>html
		<ul>
                    <li>semantic</li>
                    <li>tags</li>
		</ul>
	</li>
	<li>css</li>
	<li>javascript</li>
</ul>

목록중에서 순서가 중요하다면 ol을 이용한다. 중첩된 ol 또한 만들 수 있다.

<ol>
	<li>html
		<ol>
                    <li>semantic</li>
                    <li>tags</li>
		</ol>
	</li>
	<li>css</li>
	<li>javascript</li>
</ol>

dl은 description요소로 한 단어에 대해서 설명이 묶여있을 때 그 목록을 나타낼 때 사용할 수 있다.

dt description을 나타내어 원하는 단어 dd detail을 나타내어 해당하는 설명을 적는다.

<dl>
    <dt>HTML</dt>
    <dd>웹페이지의 골격, 문서를 만들때 사용함</dd>
    
    <dt>CSS</dt>
    <dd>HTML로 작성한 웹 문서를 이쁘게 스타일링</dd>
    
    <dt>JavaScript</dt>
    <dd></dd>
</dl>

dl dt dd를 이용해 작성

즉 ol태그는 순서가 중요할 때 사용하고 ul은 순서가 없는 경우 단순히 목록화해서 보여주고 싶을 때 사용할 수 있고

dl은 한 문장과 단어의 정의와 문장 단어에 대한 설명을 list로 나타낸다.

 

<img>와 CSS의 background-image를 보면 img가 웹페이지에서 하나의 중요한 요소로 자리잡고 있으면 <img>를 이용해서 html문서안에서 자체적으로 포함되게 하고 image가 문서의 내용과는 별개로 스타일링 목적을 위해서 배경이미지로 사용되는 경우 즉 문서의 일부분이 아닌 경우에는 CSS의 background-image를 쓴다. 즉 이미지가 없어도 문서를 읽고 이해하는 데 지장이 없는 경우에 background-image를 쓴다.

 

<button>과 <a>를 보면 둘다 버튼처럼 보인다.

home은 <a>를 쓴다.

login은 <button>을 쓴다.

이렇게 review login take quiz같은 사용자의 특정한 액션을 위해서 버튼을 클릭했을 때 어떠한 행동이 발생한 경우에는 button 태그를 쓴다.

사용자가 클릭을 했을 때  다른 페이지로 어디론가 이동하는 경우에는 즉 링크가 걸린 경우에는 a 태그를 쓴다.

 

table과 CSS를 보면

특정한 item들을 테이블을처럼 grid형식으로 표현하기 위해서 table을 이용하는데 정말 많은 데이터의 양을 행과 열을 이용해서 테이블이 필요해서 데이터를 나타내는 경우에는 table 태그를 이용하면 되지만 

단순히 item을 테이블 형식으로 grid로 표현하기 위해서 table 태그를 이용하는 것은 좋지 않다.

그래서 CSS flex나 grid를 이용해서 유연하게 스타일링 할 수 있다.

즉 문서안에서 자체적으로 의미있는 태그가 필요한건지 아니면 CSS로 스타일링을 위해서 태그를 사용하는 건지 고려해서 사용하면 된다.

HTML을 파일을 직접적으로 수정하든 React Framework를 이용하든 Semantic tag를 이용해서 웹페이지를 구성하는 방법을 숙지하고 있자.

 

 

 

 

 

 

 

참고: https://www.youtube.com/watch?v=T7h8O7dpJIg 

https://developer.mozilla.org/ko/docs/Web/HTML/Element

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN