HTML 1

figure 태그 (요소에 대한 설명이 필요할 경우에 사용)

• 도표, 차트, 이미지, 표 등을 감쌀 때 사용하는 요소

  ** figure 태그 내에 <figcaption> 태그   : 요소에 대한 설명

  ** html의 문서내에 img를 포함시키는 것이 아닌 연결시키는 구조

 

 

entity 코드

• 키보드에 없는 특수 문자들을 HTML 문서에 사용할 때 사용

entitycode.com

&rarr;  등

 

 

ul, ol, li 태그 (순차, 비순차 목록)

• ul, ol 태그 안에는 li 태그만 사용 가능

• ul 안에 ul을 또 사용하려면 ul > li > ul

 

 

dl, dt, dd 태그 (설명 목록)

• description lists   : 설명 목록  /  dt 와 dd를 감싸서 목록을 생성

• definition term   : 용어 제목  /  dl 안에 위치해야 하며 보통 dd 가 뒤따르지만 여러 개의 dt 배치 후 dd 배치 가능   

• definition description   : 용어 설명  /  dl 에서 dt 에 대한 설명, 정의, 또는 값을 제공

 

 

a 태그 / anchor

• img 태그에 alt 속성을 주지 못할 때  -->  a 태그에 title 이나 aria-label 달기

 

• a 태그 target = "_blank"    <- 항상 새 창으로 링크 열기

   ** rel = "noopener noreferer" 같이 작성하기 (보안상 취약점 문제 해결)

 

• a 태그 target = "blan"    <- 새 창에 blan 이라는 이름을 주고 같은 타겟을 가진 링크를 클릭하면 동일한 탭에 교체해서 열기 

 

 

q 태그 / quote

• 인용한 링크 등 참조영역 (결과물에 출력되지 않음)

• cite   : 저작물 출처 표기

 

 

strong 태그, b 태그

•  폰트를 굵게 함

• strong 태그   : 중요성 강조 요소  /  b 태그 : 중요성, 관련성 없이 다른 글자와 구분을 목적으로 사용 되는 요소

 

 

em 태그, i 태그

• 폰트를 기울임

• em  태그   : 강조 요소  /  i 태그   : 다른 글자와 구분되는 기술적 용어, 관용구, 생각 등에 사용

• i 태그는 아이콘에 자주쓰여서 기울임으로는 em을 쓰는게 좋으나 css에서 기울여도 됨

• awsome font 사용 시 i 태그 대신에 span 태그로 사용해도 됨