HTML 요소(Element)에 대해서 알아보자
<html> / <head> / <body> / <meta> 등의 요소들은 HTML 문서를 만들 경우 가장 기본이 되는 요소들이다.
특히 <link>는 뼈대인 html 파일과의 외부파일을 연동 시켜주기 위한 중요한 태그라고 볼 수 도 있다.
옛날의 경우 html파일안에 <style>, <script> 같은 태그등을 사용하여서 자주 사용하였지만 요즘에는 많이 외부에서 연결을 하고 있다. 물론 필요한 경우에는 html내부에서 작성을 해주기도 한다.
Sections
<body> 태그
- 실제 사용자에게 보여지는 태그등이 존재하는 가장 상위의 태그
<header> 태그
- 특정한 컨텐츠의 시작 부분을 나타내는 태그
- 일반적으로 웹 사이트의 제일 상단에서 구역의 제목을 나타낸다.
- <h1>를 header안에 자주 사용 (웹 사이트에서 <h1>은 되도록이면 한개를 사용하는 것을 권장)
<article> 태그
- 독립적으로 구분하거나 재사용할 수 있는 태그
- 개발자들이 보았을 때 이거는 다른 웹사이트에서도 그냥 단독으로 사용해도 되겠는 것을 묶어주는 태그
- 보통 위젯, 로그인 등을 article로 태그로 감싸준다.
<section> 태그
- 일반적으로 연관성 있는 문서의 구획을 나누고자 할 경우 사용 되는 태그
- article요소는 다른 웹 사이트에서 사용해도 이상하지 않지만 section요소 다른 웹 사이트에서 사용하면 이상해 보일 수 있다.
articler과 section요소들은 적어도 한개의 heading 함께 사용하는 것을 권장한다.
heading태그 만약 UI적으로 보이지 않게 하더라도 h1으로 꼭 전체적인 페이지가 무엇을 의미하는지 명시해줄 필요가 있다.
article,section에서도 동일하다
<div> VS (<section> vs <article>) 정리
세개의 요소들은 보는 사람(User)입장에서는 별다른 차이가 없다
하지만 HTML5의 세대로 넘어가면서 HTML에서의 sematic한 의미를 전달 해주는 것이 중요해 졌고 브라우저입장에서 <div>는 정말 아무런 의미가 없는 태그이지만 <section>, <article> 같은 태그는 브라우저에게 의미를 전달해준다.
예외적으로 네이버나 다음같은 웹사이트를 보면 <div>를 사용하는 경우를 많이 보았을 것이다.
많은 사람들이 사용하는 웹사이트의 경우 section, article 과 같은 태그는 브라우저의 호환성과 같은 문제에 직면 할 수 있기에 div태그를 사용하는 것이라고 볼 수 있다.
Heading요소(<h1> ... <h6>)
- 제목을 지정하기 위해 사용되는 태그
- 웹사이트는 제작하는 과정에서 계층적으로 heading을 설정해주는 것이 key point
- ex) 제일 상단 header - <h1> (<h1>은 웹 사이트에 제목관련해서 사용하며 한개만 존재하는 것을 권장)
- section - <h2>
- article - <h3>
- section - <h2>
- ex) 제일 상단 header - <h1> (<h1>은 웹 사이트에 제목관련해서 사용하며 한개만 존재하는 것을 권장)
<nav> 태그
- 현재 페이지 내 또 다른 웹 페이지 링크들을 모여져 있는 태그
- 화면 스크롤을 위한 태그들을 묶거나 / 다른 웹사이트의 링크들의 묶은 경우 사용
<aside> 태그
- 문서의 주요 흐름을 따라가지 않고 동 떨어진 느낌이 있는 경우 별개의 구획을 만들 때 사용하는 태그
- 광고 각주에서 사용
<footer> 태그
- 가장 마지막에 사용하는 태그이며 구획의 작성자 정보 저작권, 관련된 링크등의 내용을 담는 태그
- footer안에는 <address> - 주소 , <small> - 저작권 정보 등의 태그들이 자주 쓰인다.
'Programming > MarkUp' 카테고리의 다른 글
| HTML Embedded content (0) | 2022.09.07 |
|---|---|
| HTML 태그 Text-level 요소 (0) | 2022.09.06 |
| HTML Grouping content (0) | 2022.09.01 |
| HTML 기초 (0) | 2022.08.30 |