HTML(2) - 요소(Element)

 

이전 글과 내용이 이어집니다!

HTML(1) - 기본 구조

 

요소(Element)

• 시작 태그와 종료 태그 그리고 태그 사이에 위치한 내용으로 구성
  • 컨텐츠(내용)를 감싸는 것으로 그 정보의 성격과 의미를 정의
• 내용이 없는 없는 태그
  
  • 닫는 태그 없이 사용

태그(요소)	용도
<br>	줄 바꿈
<hr>	구분선
<img>	이미지 삽입, scr 속성을 활용하여 이미지 표현
<input>	입력창
<link>	head 태그에 나타내며 외부 리소스 연결
<meta>	검색 엔진을 위한 키워드, 웹페이지 설명, 저자 정의 등 메타데이터를 정의할 때 사용

• 중첩(nested) 가능
  • 요소의 중첩을 통해 하나의 문서를 구조화
  • 여는 태그와 닫는 태그의 쌍 확인 필수
    • 오류를 반환하지 않고, 레이아웃이 깨진 형태로 출력되기 때문에 디버깅이 힘듦

사용 예시

• 종류
  • 종류가 워낙 다양해 추천 요소를 달았습니다.
  • (참고출처: https://www.snugarchive.com/blog/html-tags-vs-elements/)

요소	추천 내용
nav	페이지 네비게이션
article	블로그 포스트를 위한 요소
section	독립적 구획을 위한 요소(div와 비슷하지만 div만 사용시엔 구분하기 힘듦)
span	인라인 콘텐츠를 구획할 때 사용, 줄바꿈 없이 내용을 묶기 좋음 예시 - 특정 글씨 색 바꿈
blockquote	긴 인용문
q	짧은 인용문
cite	저작무릐 제목을 나타낼 때 사용
dl, dd, dt	설명 목록 또는 정의 리스트
sup	지수(exponent) 등 위 첨자
sub	원소 기호 등 아래첨자
fieldset	폼(form)제어
텍스트 사용 시 추천
a	하이퍼 링크 생성, href 속성 활용
b, strong	굵은 글씨 요소, 강조하고자 하는 요소
i, em	기울림 글씨 요소
Grouping 시 추천
p	하나의 문단(paragraph)
hr	주제 분리 시 분리 선
div	의미없는 블록 레벨 컨테이너(box형태로 묶어 요소들의 범위를 구분하기 좋음)

 

 

이 글은 요소의 특징에 대해 다룬 것이며, 다양한 요소를 모두 다루기엔 힘들다고 생각하여 참고 링크를 달아두겠습니다!

<참고 링크> W3School, MDN

W3Schools Free Online Web Tutorials

MDN Web Docs

---

TAG와 요소의 차이

비슷하게 쓰이는 Tag와 요소(element)의 차이는 무엇일까?

 

요소(Element)가 태그(Tag)를 포함하고 있다.

다음 요소의 구성을 봐보자!

요소는 위와 같이 여는태그, 속성, 내용, 닫는 태그으로 이루어져 있는데 이 중 우리가 말하는 태그는 여는 태그와 닫는 태그를 말한다.