공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다.
이전 글에서 설명한 태그들을 제외하고
html의 태그들 중 통계적으로 가장 많이 사용되는 태그들을 정리해보았다.
통계는 생활코딩 html 수업에 제시되어 있는 아래의 웹사이트를 참고하였다.
https://www.advancedwebranking.com/html/
The average web page from top twenty Google results
Apparently, an average web page uses twenty-eight different element types: The twenty-eight elements used on most pages, ordered by appearance frequency:
www.advancedwebranking.com
- <html> : 문서의 기본 요소로 하나의 문서에 하나만 존재하고 그 안에 head와 body가 포함된다.
- <head> : 문서의 머리부분으로 문서에 사용되는 메타데이터의 집합이다. 내용이 아닌 그 문서를 설명해주는 데이터가 들어간다.
- <body> : 문서의 내용이 들어가는 몸통부분, 메인컨텐츠 부분이다. 하나의 문서에 하나의 바디가 존재하는것이 정석이다.
- <title> : html 문서의 제목을 지정해주는 태그, 브라우저의 타이틀 바에 표시된다. head 요소 안에 꼭 한번만 존재해야 하며 문맥이 없이 독립적으로 있더라도 그 의미가 잘 유지되어 브라우저상의 히스토리나 검색결과에서 잘 식별 될 수 있게 지정해주는것이 좋다.
- <div> : 다른 태그들과 다르게 특별한 의미를 가지고 있지 않으며, css를 적용할 때 디자인을 위해 사용되는 구역을 나누는 태그이다. 하지만 만약 nav 처럼 의미를 가지고 있는 구획 나눔이라면 가급적 사용하지 않고 특별하게 의미를 가지고 있지 않을 때만 사용하는것이 좋다.
- <a> : 텍스트에 링크를 걸어주는 태그, 텍스트 뿐만아니라 문단, 목록, 테이블 혹은 섹션 전체까지 감싸줄 수 있다. 다만 a 안에는 버튼이나 링크 등 인터렉티브한 요소는 포함하면 안된다.아래는링크의 상태 목록이다.
- link: 아직 방문하지 않았거나 아무런 행동을 하기 전 상태.
- visited: 방문한 적이 있는 상태.
- hover: 마우스커서가 링크위에 올려져있는 상태.
- focus: 링크위에 키보드 등을 이용해 포커스가 위치해 있는상태( ex) tab키 )
- active: 마우스를 눌렀다가 놓는 동안의 상태.
- <script> : 동적 스크립트와 데이터 블록을 문서에 포함시킨다. 이 부분에 자바스크립트 등 다른 언어가 들어간다.
- <link>: 다른 리소스와 연결을 위해 사용한다. css를 연결해 줄때도 이 태그를 통해 헤더에 연결한다.
- <img> : 이미지 삽입 태그, 주요 속성은 "alt - 이미지가 표시되지 않는 동안 보여지는 대체 텍스트를 지정할 수 있다. ", "src - 이미지 주소를 입력한다" 가 있다.
- <span> : 다른 요소들의 인라인 요소로 이거 하나만으로 의미를 가지지는 않는다. 다른 전역속성 요소들과 쓰면 유용하다.
- <p> : 문단을 나타내는 태그로 문단을 나눠줄 때 사용된다.
- <li> : 목록 아이템을 나타내는 요소, ul과 ol의 자식 태그로 아이템 목록의 순번을 지정하는 value라는 속성을 가지고 있다.
- <ul> : li의 부모태그로 순서가 중요하지 않다는 unordered list 라는 의미이다. 반대의 의미로 ol은 ordered list 라는 의미이다. 둘다 li요소를 포함하고 있다.
- <style> : 스타일 문서를 포함시키는 태그이다. 보통 여기서 css를 사용하여 html문서를 꾸며준다.
- <br> : 줄바꿈 태그로 단락에서 강제로 줄바꿈을 시킬 수 있다. 하지만 br을 표현적 요소를 쓰기 보다는 p로 문단을 나눠주는 것이 좋다.
- <h1~h6> : 섹션의 제목을 나타내는 태그로 숫자가 작을 수록 중요도와 크기가 커지고 6까지의 요소만 있다. h1 요소는 문서 하나당 하나만 써주는 것이 좋다. 잘 사용해야 검색엔진의 정보 인식성을 높힐 수 있다.
- <nav> : 다른 페이지나 같은 페이지 안의 다른 섹션으로 연결해주는 네비게이션 링크로 구성된 섹션을 표현하는 태그이다. 하지만 페이지 안의 모든 링크그룹들이 nav요소로 지정해 줄 필요는 없다.
- <iframe> : 문서내에 다른 문서를 내포할 수 있게 해주는 태그, scr속성으로 다른 문서의 주소를 지정해줄수 있고 name 속성으로 ㅁ프레임안에 표시될 페이지의 이름을 지정해 줄 수도 있고 width랑 heigt를 통해 크기를 지정해줄 수도 있다.
- <strong> : 해당 내용이 중요함을 표시해주는 태그, 대부분의 웹브라우저에서 굵은 글씨체로 표현된다.
- <button> : 버튼을 생성해주는 태그, 의미가 있는 태그는 아니기 때문에 보통 동적스크립트와 함께 사용된다.
- <i> : 텍스트를 이탤릭체로 만들어주는 스타일적 태그이다. 스타일적 태그는 가급적이면 사용하지 않고 css와 다른 의미가 있는 태그로 대체할 수 있는지 고려해주는 것이 좋다.
뭔가 굉장히 길어졌는데 정리하다 보니 정말 많은 태그중 정말 익숙한 태그들인건 확실했다. ㅎㅎㅎ
그러나 정확히 알지 못한것도 많았고 특히 각 태그들의 자잘한 속성들을 공부 할 수 있어서 좋았다.
생활코딩의 동영상 강의와 html 사전을 참고하며 하다보니 누군가 이렇게 정리해주고 그것을 무료로 배포를 해준다는 것이 얼마나 감사한 일인가 하는 생각이 들었다.
나는 아마 생활코딩과 같은 오픈 튜토리얼이 없었다면 결코 코딩을 시작하고자 하려는 엄두도 못냈을 것이다.
생활코딩이 이렇게 나를 포함해 얼마나 많은 사람들에게 코딩이라는 신세계를 선물해 주었는지 감도 잡히지 않는다.
생활코딩을 만드신 이고잉님에게 정말 존경을 표하고 싶다.
감사합니다. ;)
'웹개발 > html' 카테고리의 다른 글
| 웹 접근성을 고려한 구성 (0) | 2021.08.05 |
|---|---|
| [HTML] 정보의 html, 의미론적인 태그 (0) | 2020.07.14 |
| [HTML] tag - form (0) | 2020.07.13 |