TIL / HTML 기초 : semantic tag, 웹 경로표기법, escape 문자

✓ 2023.02.16 TIL
1. HTML semantic tag
2. 웹 경로표기법
3. escape 문자

1️⃣ HTML semantic tag

semantic tag란 의미가 있는 태그를 말한다.

semantic tag는 div나 span과 같이 단순히 공간을 구분하고 레이아웃을 구성하는 태그와는 달리 내용/의미를 명확하게 나타내고 있다.
역할 자체는 div와 크게 다르지 않지만 태그 이름에서도 알 수 있듯이 어떠한 특정 의미를 지니고 있다는 점에서 차이가 있다.

💡 semantiv tag를 사용하는 이유는?

1. SEO(검색엔진최적화)를 위해 사용한다.

• 검색엔진최적화는 사용자의 검색 의도에 맞게 웹페이지를 최적화하여 검색엔진의 평가를 높이는 과정을 말한다. 검색엔진은 태그를 기반으로 검색 키워드의 우선순위를 판단 및 결정하기 때문에 의미가 없는 div를 사용하는 것보다는 명확한 레이아웃 혹은 정보의 경우에는 기본적인 semantiv tag로 구성하는 것이 좋다.
  2. 컴퓨터의 낭독 소프트웨어인 스크린 리더가 페이지를 읽는 데 도움을 주기 때문이다.
  3. 다른 개발자들이 코드를 읽고 이해하는 데 도움을 주기 때문이다.
• 의미가 없는 div, span을 계속 쓰는 것보다는 중요한 레이아웃에서 semantic tag를 사용해 정확한 의미를 전달하는 것이 개발자들끼리 소통하는 데 도움을 준다.

대표적인 semantic tag

1. header → 웹 페이지의 최상단, 페이지의 제목과 같이 페이지를 대표하는 문구나 내용을 포함한다.
2. nav → 목록, 내비게이션바, 메뉴를 나타낼 때 사용한다.
3. section → 웹 페이지 내에서 콘텐츠의 독립적인 영역을 구분할 때 사용한다.
4. footer → 웹 페이지의 하단, 관련 문서나 저작권 등의 내용을 포함한다.

🔗 참고하면 좋을 사이트
HTML Semantic Elements

2️⃣ 웹 경로 표기법

웹 경로 표기법에는 크게 절대 경로와 상대 경로가 있다.

절대 경로 : 누구나 url로 접속 가능한 경로로, 절대적이기 때문에 변경이 불가능한 경로라고 생각하면 된다.

상대 경로 : 본인의 현재 위치를 기준으로 경로를 지정하는 방법이다.

절대 경로 예시

<a href="https://www.naver.com/">naver로 이동!</a>

→ 누구나 해당 네이버 주소로 접속 가능하다!

상대 경로 예시

<a href="./mypage/main.html">main로 이동!</a>

→ 현재 위치에서 mypage 폴더로 이동한 다음에 mypage 폴더에 있는 main.html 파일로 접속한다는 의미!
→ 상대 경로를 이용할 때는 접속하고자 하는 파일이 어떤 폴더에 속해있는지 파악하는 것이 중요하다!

3️⃣ escape 문자

이스케이프란? : html 파일에서 사용이 불가능한 특정 문자를 html로 변환하는 행위를 말한다.

html에서는 특정 문자들을 코드로 지정했기 때문에 문자로서 특수 기호를 사용하려고 하면 태그로 인식하는 경우가 생긴다. 이럴 경우 특수 기호를 순수한 문자로 사용하기 위해서는 html로 변환하는 과정이 필요한데 이를 이스케이프라고 하며 html로 변환된 문자를 이스케이프 문자라고 한다.

예시

< -> &lt;
> -> &gt;
& -> &amp;

→ 해당 escape 문자들은 모두 외워서 사용하는 것이 아니라 필요할 때마다 검색해 사용한다.

👉🏻 느낀 점 / 다짐
시멘틱 태그의 경우 필수적으로 사용해야 하는 것은 아니지만 좀 더 효율적으로 웹 페이지를 구성하기 위해서는 아주 기본적인 태그들만이라도 사용하는 것이 좋다는 것을 알게 되었고, 의미 없이 영역을 구분하기보다는 알고 있는 기본적인 시멘틱 태그들을 적극적으로 활용해야겠다고 생각했다.