HTML 기본 개념 및 태그 / Semantic Markup이 필요한 이유

📍 HTML이란?

HTML은 Hyper Text Markup Language, 웹 페이지를 만들기위한 표준 마크업 언어이다.

📍 HTML 기본 태그

header : 페이지의 상단에 있는 간판

<header>
...
</header>

main : 문서 안에서 가장 중요한 내용을 가지고 있는 영역

<main>
...
</main>

footer : 페이지의 맨 하단에 입력할 내용. 보통 회사의 주소, copyright가 들어간다.

<footer>
...
</footer>

nav : 웹페이지의 네비게이션 부분

<nav>
	<ul>
		<li>메뉴 1</li>
	</ul>
</nav>

aside : 주요 콘텐츠와는 관련이 적은 부가 정보나 사이드바, 광고 등.

<aside>
...
</aside>

section : 웹페이지의 섹션을 구분할때 사용

<section>
	<h2>섹션 주제</h2>
	<p>섹션 내용</p>
</section>

ul : 순서가 없는 목록을 표현할 때 사용

<ul>
	<li></li>
</ul>

ol : 순서가 있는 목록을 표현할 때 사용

<ol>
	<li></li>
</ol>

form : 로그인, 회원 가입 등과 같은 양식을 구현할 때 사용하며, fieldset 태그와 legend 태그를 자식 요소로 가진다.

<form>
	<fieldset>
		<legend>양식의 제목</legend>
		...
	</fieldset>
</form>

label : 웹 양식(form) 요소의 콘텐츠에 레이블(label)을 추가하는 데 사용

// label 태그 사용법 1: wrap
<label>
	<input />
</label>

// label 태그 사용법 2: for
<label for="test">input 제목</label>
<input id="test" />

input : 사용자로부터 데이터를 입력받을 수 있는 입력 요소를 생성하는 데 사용

<input type="text" placeholder="아이디를 입력해주세요" required />
<input type="password" />
...

select : 사용자가 옵션을 선택할 수 있는 드롭다운 목록을 생성하는 데 사용

<label for="filter">필터의 제목</label>
<select id="filter" required>
	<option value="a" selected>바나나</option>
	<option value="b">딸기</option>
	<option value="c">포도</option>
</select>

button : 버튼 태그(submit : 제출 / reset : 내용삭제 / button : 일반버튼)

<button type="submit">버튼 A</button>
<button type="reset">버튼 B</button>
<button type="button">버튼 C</button>

hn : 제목 태그(숫자가 작을수록 폰트 크기가 커지며, 중요도가 높음)

<h1>제목 A</h1>
<h2>제목 B</h2>
<h3>제목 C</h3>
<h4>제목 D</h4>
<h5>제목 E</h5>
<h6>제목 F</h6>

p : 문단 작성 태그

<p>안녕하세요 반갑습니다.</p>

a : 하이퍼링크 삽입 태그

<a href="url" target="_blank">링크</a>

img : 이미지 삽입 태그

<img src="이미지 경로" alt="이미지 오류시 보여지는 text" />

📍 Semantic markup이 필요한 이유

Semantic markup은 말그대로 의미에 맞는 적절한 태그를 사용하여 마크업 하는 것을 말한다.

하지만 꼭 Semantic markup을 하지 않더라도, 출력은 되는데 왜 Semantic markup을 해야할까?

이렇게 시맨틱 마크업을 하는 이유는 웹 페이지의 구조와 의미를 명확하게 정의하여 웹 접근성을 향상시키고, SEO를 지원하며, 코드의 가독성과 유지보수성을 개선할 수 있기 때문이다.

• 의미 부여: HTML 시맨틱 요소(semantic elements)를 사용하면 각 요소가 그 자체로 의미를 가지며, 콘텐츠의 의도나 역할을 명확하게 표현할 수 있다. 이렇게 하면 웹 개발자, 웹 브라우저, 스크린 리더와 같은 보조 기술, 검색 엔진 등이 콘텐츠를 이해하고 해석하기 쉬워진다.

• 웹 접근성 향상: 시맨틱 마크업을 사용하면 웹 사이트를 이용하는 사람들 중 시각적 또는 기타 장애가 있는 사람들이 더 쉽게 웹 콘텐츠를 이해하고 상호 작용할 수 있다. 시맨틱 마크업을 사용하면 스크린 리더, 음성 브라우저 및 기타 보조 기술이 웹 콘텐츠를 더 잘 해석할 수 있다.

• 검색 엔진 최적화 (SEO): 검색 엔진은 웹 페이지의 내용을 이해하고 검색 결과 페이지에 표시하기 위해 시맨틱 마크업을 활용한다. 의미 있는 HTML 태그를 사용하면 검색 엔진이 페이지의 주요 내용을 식별하기가 더 쉬워진다. 따라서 검색 결과에서 상위 순위에 노출될 가능성이 높아진다.

• 코드 유지보수: 시맨틱 마크업은 코드의 가독성을 높이고 유지보수를 쉽게 만든다. 의미 있는 태그와 요소를 사용하면 개발자들은 웹 페이지의 구조를 이해하고 수정하기가 더 쉬워지며, 다른 개발자들과의 협업이나 코드 업데이트 작업에서도 혼란을 줄여준다.

• 크로스 플랫폼 호환성: 시맨틱 마크업을 사용하면 다양한 웹 브라우저와 기기에서 일관된 방식으로 웹 페이지가 표시된다. 이는 다양한 플랫폼과 브라우저에서 호환성을 높이고 사용자 경험을 향상시킨다.

📍 느낀 점

직접 마크업을 하다보면 어디서 어떤 시맨틱 태그를 써야할지가 애매할 때가 있다.
HTML에는 100여개의 시맨틱 태그가 존재한다고 하는데, 어떤 부분에 어떤 태그를 사용해야하는지 잘 만들어진 웹페이지를 많이 보고 익히는 것이 필요할 것 같다.