HTML 태그 정리

HTML은 뼈대가 되는 마크업 언어

 

링크 추가( <a></a>)

<a href="https://codingmarmot.tistory.com/" target="_blank">블로그 이동</a>

 

<a></a>, anchor 

 

href="링크 위치" : 어느 링크로 이동할지 설정

target="_blank" : 새창에서 열기

target="_self" : 현재창에서 열기

 

 

목록(<ol></ol>, <ul></ul>)

<ol></ol> : ordered list, 순서가 있는 목록

 

<ul></ul> : unordered list, 순서가 없는 목록

<ol>
    <li>marmot</li>
    <li>leon</li>
    <li>chris</li>
    <li>ada</li>
</ol>

 

결과 : 

1. marmot

2. leon

3. chris

4. ada

 

<ul>
    <li>marmot</li>
    <li>leon</li>
    <li>chris</li>
    <li>ada</li>
</ul>

 

결과 : 

• marmot

• leon

• chris

• ada

 

이미지 삽입(<img>)

<img src="경로">

 

이미지를 삽입하는 태그, width 로 크기 설정 가능

 

<div></div>, <span></span>

두 태그 모두 의미는 없지만 다른 태그들을 묶는 부모의 역할을 하는 태그

차이점 : 

<div></div> : 행 전체를 사용, 줄바꿈이 됨

 

<span></span> : 줄단위 사용, 줄 바꿈 적용 x

 

<header></header>

웹페이지 상단 헤더를 뜻하는 의미론적 태그

 

<article></article>

본문을 뜻하는 의미론적 태그

 

<nav></nav>

목차, 메뉴 등에 사용하는 의미론적 태그

 

<footer></footer>

웹사이트 하단에 주로 사용하는 의미론적 태그, 저작권 표시, 웹사이트 정보 등을 기입

 

<p></p>

문단 나누는 태그

 

<script></script>

이 태그 안에 있는 내용은 JavaScript 언어라는 태그