HTML 일반적인 태그 모음

a

    - a(Anchor) 태그는 현재 페이지에서 다른 페이지로 이동할 수 있는 링크를 만들기 위해 사용한다.
    - 자동으로 닫는 태그 x
    - 시멘틱 O      <!-- 검색엔진이 이 태그를 봤을 때 의미가 있다는 뜻-->
    - 속성
        href    : 이동할 주소 및 경로
        target  : 이동할 방식
            _blank  : 새로운 탭에서 이동
            _self   : 현재 탭에서 바로 이동

<a href="https://naver.com" target="_blank">네이버</a>

 

 

b

    - b(Bold) 태그는 텍스트를 굵게 만든다.
    - 자동으로 닫는 태그 x
    - 시멘틱 x
    - 단순히 텍스트를 굵게 만들기 위해서는 <b>태그가 아닌 css의 font-weight 속성을 사용해야 함

strong

    - 텍스트를 굵게 만든다
    - 자동으로 닫는 태그 x
    - 시멘틱 o
        - 검색 엔진 최적화(SEO, Search Engine Optimization)가 이루어져, 검색 엔진으로 하여금 해당 태그가 가지고 있는 내용이 문서에서 중요한 내용임을 알림
        - 스크린 리더(Screen Reader)로 하여금 해당 태그의 내용을 강한 어조로 읽게 하여 웹 접근성(Web Accessibility)을 향상시킨다.

<b>이거는 b태그의 내용</b>
<strong>이거는 strong의 내용</strong>

 

br

    - br(Break)태그는 개행을 위해 사용한다.
    - 자동으로 닫는 태그 o
    - 시멘틱 x
    - 문서 레이아웃(디자인)을 목적으로 사용하면 안됨

<br>

 

h1, h2, h3, h4, h5, h6

    - h1, h2, h3, h4, h5, h6(Heading)태그는 이를 포함하는 태그의 제목이나 간략한 주제를 나타내기 위해 사용
    - 자동으로 닫는 태그 x
    - 시멘틱 o
    - 숫자가 작을수록(1에 가까울수록) 의미가 크다.
    - <h1> 주로 문서의 제목과 동일하게 지정, 문서에 하나만 존재하는 편
    - 동일한 단계 안에 동일한 등급의 헤딩 태그를 두지 않는 것이 좋다.

<h1>이거는 h1 내용</h1>
    <h2>이거는 h1 내용</h2>
            <h3>이거는 h1 내용</h3>
                    <h4>이거는 h1 내용</h4>
                            <h5>이거는 h1 내용</h5>
                                    <h6>이거는 h1 내용</h6>

 

cite

    - 텍스트를 기울이기 위해 사용
    - 자동으로 닫는 태그 x
    - 시멘틱 o
    - 단순히 텍스트를 기울이기 위해선 css의 font-style 속성을 사용해야 함
    - 출판물, 영화 등 저작물의 출처나 제목 등 표시

em

     - em(Emphasize), 텍스트를 기울이기 위해 사용
    - 자동으로 닫는 태그 x
    - 시멘틱 o
    - 단순히 텍스트를 기울이기 위해선 css의 font-style 속성을 사용해야 함
    - 문장, 문장의 일부를 강조

i

    - i(Italic), 텍스트를 기울이기 위해 사용
    - 자동으로 닫는 태그 x
    - 시멘틱 o
    - 단순히 텍스트를 기울이기 위해선 css의 font-style 속성을 사용해야 함
    - 본문의 주된 언어와 다른 언어를 담음

<cite>cite 내용</cite>
<em>em 내용</em>
<i>i 내용</i>

 

img

    - Image 태그는 이미지를 삽입
    - 자동으로 닫는 태그 o
    - 시멘틱 o
    - 속성
        alt : src 속성에 명시된 이미지를 표시할 수 없을 때 대신(Alternative)하여 표시할 텍스트 문자열, 해당 속성을 명시하지 않는 것은 html5 표준 위반
        src : 표시할 이미지의 주소, 경로 혹은 64진법(Base64) 데이터 문자열이다.

<img alt="라면" src="https://i.namu.wiki/i/8s7OaNPsZ8KC1e8RQ6QZEwgfFUoIVVOIm0jA72-UO6Imw0OgI1aEK_DulMeXWbg4tstts3IQFMJS0jmYKD9rzQ.webp"> <!--사진의 사이트가 막히면 못불러옴-->

 

li

    - List Item, 목록의 항목 하나를 가지기 위한 태그
    - 자동으로 닫는 태그 x
    - 시멘틱 o
    - 부모로 <ol>, <ul> 태그만 가짐

ol

    - Ordered List, 순서와 유관한 항목을 가지기 위한 목록 태그
    - 자동으로 닫는 태그 x
    - 시멘틱 o
    - 자식으로 <li> 태그만 가짐

ul

    - Unordered List, 순서와 무관한 항목을 가지기 위한 목록 태그
    - 자동으로 닫는 태그 x
    - 시멘틱 o
    - 자식으로 <li> 태그만 가짐

<ol>
    <li>
        <h2>프론트</h2>
        <ol>
            <li>HTML</li>
            <li>css</li>
            <li>javascript</li>
        </ol>
    </li>
</ol>
<ul>
    <li>메일</li>
    <li>카페</li>
    <li>블로그</li>
</ul>

 

u

    - Underline, 오자를 강조하기 위함, 시각적 효과로 밑줄이 그임
    - 자동으로 닫는 태그 x
    - 시멘틱 o
    - 단순히 밑줄을 긋기 위해선 css의 text-decoration 속성을 사용해야 함

<u>외</u> <u>않됀데</u>?

 

sub

    - Subscript, 아래 첨자를 위해 사용
    - 자동으로 닫는 태그 x
    - 시멘틱 x

sup

    - Superscript, 위 첮마를 위해 사용
    - 자동으로 닫는 태그 x
    - 시멘틱 x

3의 3승은 3<sup>3</sup>으로 표시
물의 원소 표시는 H<sub>2</sub>O와 같이 한다.

 

p

    - 문단을 만들 때 사용

<p>1234</p>
<p>5678</p>