[HTML] 첫발 내딛기 <2. 요소와 속성>

HTML 요소와 속성의 관계

HTML의 요소는 요소만 사용할 수도 있지만 속성을 같이 사용하면 요소를 사용할 수 있는 범위가 확 넓어진다.

수많은 요소들 중 속성 없이 사용할 수 있는 요소들도 있지만, 속성이 꼭 있어야 사용할 수 있는 요소들이 있다.

 

요소 타입

HTML에 있는 수많은 요소들은 크게 두 가지 타입으로 나눌 수 있다:

1. 유저 상호작용 요소
2. 그룹화 요소

 

유저 상호작용 요소

이 타입의 요소는 말 그대로 유저와 상호작용하는 요소다.

HTML의 <a>, <button>, <input>등이 유저 상호작용 요소에 속한다.

 

그룹화 요소

그룹화 요소는 여러 요소들을 한 군데에 모아 그룹화 할 수 있는 요소다.

좀 더 쉽게 말하자면 여러 개의 요소들을 하나의 요소 안에 넣고 정리할 수 있는 요소다.

HTML의 <div>, <section>, <article>등이 그룹화 요소에 속한다.

 

시멘틱 요소

시멘틱 요소는 요소에 특정적인 의미가 부여돼 있는 요소를 말한다.

대부분의 HTML 요소들에는 이미 그 요소에 맞는 의미가 부여돼 있다.

예를 들면 <a> 요소에는 링크라는 의미가, <button>에는 버튼이라는 의미가, <nav>에는 내비게이션이라는 의미가.

요소들 중에 의미가 없는 요소들도 있고, <div>가 그 요소들 중 하나다.

시멘틱 요소의 중요성은 페이지의 접근성을 높여서 장애가 있는 유저들도 페이지를 쉽게 이해할 수 있도록 한다.

스크린 리더와 같은 보조 프로그램은 페이지에 있는 시멘틱 요소들을 해석해 유저가 페이지를 이해하는데 도움을 준다.

시멘틱 요소는 페이지의 접근성에도 큰 영향을 주지만, SEO에도 영향을 준다.

SEO가 좋을수록 검색 엔진에서 페이지가 상위 노출될 확률이 높아진다.

 

 

HTML 속성

HTML요소에는 속성이라는 추가 정보가 존재한다.

속성은 요소에 직접적으로 적용되거나, CSS/자바스크립트 와 HTML을 연결을 한다.

또한 요소에 추가 정보를 더해서 페이지 접근성을 높일 수 있다.

 

필수 속성

HTML요소들 중 꼭 필요한 요소들이 있는데, 이렇게 요소가 정상적으로 작동하기 위해 필요한 속성을 필수 속성이라고 한다. HTML의 <img>와 <a> 요소들이 필수 속성을 가진 대표적인 요소이다.

<img> 요소는 src 속성이 필요하고, <a> 요소는 href 속성이 필요하다.

대부분의 속성들은 어떠한 값이 필요하다.

예로 <img>와 <a>를 살펴보자.

<img src="image.jpg" alt="" />
<!-- 
src - 속성 이름
"image.jpg" - 속성 값 (이미지 파일 경로)
-->

<a href="https://www.google.ca">Google</a>
<!--
href - 속성 이름
"https://www.google.ca" - 속성 값 (링크 URL)
-->

 

 

선택 속성

선택 속성은 말 그대로 선택적으로 사용할 수 있는 속성이다.

제일 대표적인 선택 속성으로 id와 class가 있다.

선택 속성 중에서도 모든 요소에 사용할 수 있는 속성이 있는가 하면, 한 요소에만 사용할 수 있는 속성이 있다.

id나 class 같은 속성이 모든 요소에 사용할 수 있는 공유 속성이고, <a>의 href 같은 속성이 전용 속성이다.

 

 

2023.01.26 - [Web Dev/HTML] - [HTML] 첫발 내딛기 <1. 구조와 요소>

[HTML] 첫발 내딛기 <1. 구조 와 요소>