[시멘틱 마크업] HTML 태그 ( + 링크, 하이퍼링크)

HTML 이란?

Hypertext Markup Language로 하이퍼텍스트를 작성하기 위해 만들어진 기본적인 웹 언어다.
- 하이퍼 텍스트 : 단편적인 정보들을 하이퍼링크라는 고리를 이용하여 엮어 다른 문서로 이동하거나 정보를 보내는 등의 다각적으로 정보에 접근할 수 있는 체계를 의미한다.

시멘틱 마크업(semantic markup) 이란?

시멘틱 마크업이란 웹 문서를 구조화하고 내용을 의미론적으로 표현하는데 사용되는 HTML 요소들을 말한다.

시멘틱마크업은 웹 페이지의 요소들이 그들의 의미와 역할을 명확하게 나타내도록 설계되었다. 이는 SEO(검색엔진 최적화)와 접근성을 향상시키는데 도움을 줄 수 있다.

시멘틱 마크업을 사용하면 얻는 이점

검색엔진 최적화 (SEO) : 검색엔진은 문서의 구조와 의미를 파악하여 적절한 검색 결과에 표시할 수 있다.
웹 접근성: 시각, 청각, 운동기능등에 제약이 있는 사람들도 웹페이지의 구조와 내용을 이해하기 쉬워진다.
유지보수 용이성 : 문서 구조와 의미를 명확히 표현하면 코드의 가독성도 증가해 나중에 문서를 업데이트하고 수정할때도 용이하다.
장치호환성 : 다양한 장치와 브라우저에서 웹 페이지가 일관되게 표현될 수 있다.

ul, li

<ul> 태그는 순서가 없는 HTML 리스트를 정의할 때 사용한다. <ul> 요소에 속하는 각 아이템을 <li>로 나타내며 list라는 뜻을 갖고 있다.

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

p

문단 분량의 내용을 작성하는 태그이며, 기본값으로 상하 margin이 있다.

div

block level element (블록 라벨 엘리먼트) - 화면 전체를 쓰는 애들.

content에 해당하는 <div>라는 텍스트가 행 전체를 차지하고 있음

span

inline element (인라인 엘리먼트) - 자기 content 만큼의 테두리를 쓰는 애들.

content에 해당하는 <span>이라는 텍스트가 자기만큼의 공간을 차지하는 것을 볼 수 있음

fieldset

폼요소를 그룹으로 묶어 박스 형태를 만드는 태그. 주로 내부에 <form> 을 사용

legend

<fieldset>태그에 제목을 붙이는 태그

label

폼 요소에 레이블(텍스트)를 붙이는 태그. 라디오 버튼이나 체크박스에서 텍스트 부분을 클릭해도 라디오 버튼과 체크박스 버튼이 선택 됨.

예시코드

<form>
  <fieldset>
    <legend>개인 정보</legend>
    
    <label for="name">이름:</label>
    <input type="text" id="name" name="name"><br>
    
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email"><br>
    
    <label for="birthdate">생년월일:</label>
    <input type="date" id="birthdate" name="birthdate">
  </fieldset>
</form>

main

<main> 태그는 해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의할 때 사용

하나의 문서에는 단 하나의 <main> 요소만이 존재해야 하며, <main> 요소는 <article>, <aside>, <footer>, <header>, <nav> 요소의 자손 요소가 되어서는 안됨

a

anchor 앵커 라고 불리며, 웹페이지에서 하이퍼링크를 생성하는데 사용된다.

다른 웹페이지나 같은 페이지 내의 특정위치로 이동하도록 링크를 설정하거나, 이메일 주소나, 파일 다운등에도 사용된다.

<a href="https://www.example.com" target="_blank" rel="noopener">방문하기</a>

anchor 주요 속성

href - 링크의 목적지 URL을 지정. 외부 웹 페이지, 내부 웹 페이지, 파일경로, 이메일 주소등 목적지 지정가능
target - 링크를 어떠한 방식으로 열지 정함.
- _black : 새창
- _self : 현재창
- _parent : 현재 페이지의 부모프레임 에서 열림
- _top : 현재 모든 프레임을 무시하고, 링크된 페이지를 전체 브라우저 최상위에서 열도록 함
rel - 링크의 관계를 지정함. noopener이나 noreferrer 를 사용하여 보안 및 성능 이슈를 방지하는 용도

링크와 하이퍼링크의 차이점

링크 (Link) 와 하이퍼링크 (hyperLink)는 웹 개발과 웹 페이지에서 사용되는 용어로, 둘 다 다른 웹페이지나 문서로 연결하는 역할을 하지만 미묘한 차이가 있다.

링크 (Link)

일반적으로 문서 내의 다른부분으로 연결하는 것을 말한다.

웹 페이지 내에서 특정부분으로 스크롤하거나 같은 문서 내의 다른 섹션으로 이동하는데 사용된다.

보통 웹 페이지내에서의 내비게이션을 담당하며 나타내는 말이다.

하이퍼링크 (hyperLink)

하이퍼링크는 더 넓은 의미로, 웹페이지나 다른 문서로 연결하는 모든 링크를 포함한다. 하이퍼링크는 보통 다른 웹사이트, 외부 문서, 이미지, 동영상등과 같이 웹 페이지 외부로 나가는 링크를 의미한다.

즉, 하이퍼링크는 모든종류의 링크를 통칭하는 개념으로 사용한다.

'Front-End > HTML-CSS' 카테고리의 다른 글

(HTML/CSS)Flex에 대해 알아보기 (0)	2022.12.17
(HTML/CSS)Grid 에 대해 알아보기 (0)	2022.12.16
(HTML/CSS)22.12.15_반응형 웹 디자인 (0)	2022.12.15
(Front-End)GNB, LNB, SNB, FNB 용어 (0)	2022.12.15
(HTML/CSS)Flex-grow, Flex-shrink, Flex-basis 에 대해 알아보기 (0)	2022.12.15