• 이 태그를 너무 많이 사용하면 판독성이 떨어지는 문제가 있지만, 지금 여기서는 다루지 않는 내용입니다.
• 이 태그에 대해 좀 더 자세히 알아보기

• 요소에 마우스를 올리거나 누르고 있을 경우, 커서 모양과 색상이 바뀝니다.
• 색상이 일반 텍스트와 다르며, 밑줄이 있습니다.
• 해당 URL에 방문하기 전, 후의 색상이 다릅니다.

• target="_blank"일 경우, 웹 브라우저의 새 창이나 새 탭을 사용해서 이동합니다. target="_top"일 경우, 현재 보고 있는 창에서 그대로 이동합니다.
• <a> 태그의 기본 CSS 속성을 조정하려면 다음의 CSS를 참조합니다.

a:link {
    text-decoration: none;     /*밑줄을 없앰*/
    color: #000                /*방문하기 전 색상*/
}

a:visited {
    color: #000                /*방문 후 색상*/
}

a:hover {
    color: #000                /*마우스 올렸을 때 색상*/
}

a:active {
    color: #000                /*마우스 키가 눌렸을 때 색상*/
}

이 태그에 대해 좀 더 자세히 알아보기

<p>내용</p>

Paragraph. 문단 혹은, 단락을 나타냅니다. 문맥상 하나의 소주제를 중심으로 이를 뒷받침하는 문장들을 그룹화 한 개념입니다. 이 태그는 본문이나 기사 같은 길이가 긴 글에서 주로 사용하지만, 웹 디자인의 특성에 맞게 사용해도 됩니다.

p 태그는 이보다 더 의미가 적합한 태그가 없을 경우에만 사용하는 것이 좋습니다. 예를들어 다음과 같은 경우, 기술적으로는 문제가 없습니다.

<section>
 <p>최종 수정일: 2001-04-23</p>
 <p>저자: fred@example.com</p>
</section>

하지만 더 적합한 의미의 태그들이 HTML5 문법에 존재하므로 다음과 같이 바꿔 쓰는 것이 올바른 표현입니다.

<section>
 <footer>최종 수정일: 2001-04-23</footer>
 <address>저자: fred@example.com</address>
</section>

<ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Contact</li>
</ul>

Image. 이미지를 삽입합니다.

• src : 출력하고 하는 이미지 파일의 경로(파일명 포함)를 선언합니다.
• alt : 부득이한 이유로 이미지가 웹 브라우저에서 출력되지 못할 경우 대체 할 텍스트를 적어줍니다.
• width와 height : 이미지의 너비와 높이 값입니다. 단위는, 보이지는 않지만 pixel입니다. 만일 %, em, rem 처럼 다른 단위를 사용하고자 한다면, width와 height 속성을 태그에서 지워버리고, CSS에서 따로 정의하세요.

<header>
    <ul>
        <li>Home</li>
        <li>Portfolio</li>
        <li>Blog</li>
    </ul>
</header>

Header. 머릿글에 해당하는 요소에 대해 사용하면 좋습니다. 문서 정보, 네비게이션, 로고 등, 페이지마다 공통으로 삽입되는 내용들을 감싸기 좋습니다. 기존의 div 태그를 사용했던 곳에서 이 태그가 어울릴만한 곳을 찾아보세요.

<footer>
    <ul>
        <li>Privacy Policy</li>
        <li>Terms and Use</li>
        <li>Contact</li>
    </ul>
</footer>

Footer. 바닥글에 해당하는 요소에 대해 사용하면 좋습니다. 헤더와 비슷하지만, 페이지 전체 내용과는 조금 거리를 둔 공통 내용을 포장하기 좋습니다. 예를들어, 판권 및 저작권 표기, 파트너쉽 사이트로의 링크 따위. 기존의 div 태그를 사용했던 곳에서 이 태그가 어울릴만한 곳을 찾아보세요.

<main>
    <p>한 페이지에 단 한번만 사용하는 주된 컨텐츠용 포장 태그입니다.</p>
</main

이 태그는 현재 많은 웹 브라우저가 지원하지 못하고 있습니다. 당장은 사용하지 마시고, 의미만 알아두도록 하세요.

<hgroup> 태그가 W3C의 명세에서 퇴출 된 이후에 새롭게 추가 된 태그입니다. <header>, <footer>, <article>, <aside>, <nav>의 하위 요소로는 사용할 수 없습니다.

한 페이지에서 단 한번만 사용하며, 페이지의 주요 컨텐츠를 담는 포장 태그입니다. 보통 <div class=”content”>내용</div> 처럼 사용하던 부분을 대체합니다.

Article. 페이지에서 본문 혹은 주요 내용에 해당하는 부분에 사용하면 좋습니다. 기존의 div 태그를 사용했던 곳에서 이 태그가 어울릴만한 곳을 찾아보세요.

• 이 태그를 사용하면 문서 내부적인 구조에 자동으로 목차가 생성되므로, 될 수 있으면 <h1>과 같은 헤딩 태그를 함께 써 주면 좋습니다.
• 이 태그에 대해 좀 더 자세히 알아보기

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Portfolio
      <a href="#">Apple</a>
      <a href="#">Dell</a>
  </a>
</nav>

Navigation. 2개 이상의 링크가 메뉴를 이루고 있는 네비게이션 요소에 사용합니다. 보통 리스트 태그인 ul 태그를 대체하면 좋습니다. 기존의 ul class="mainMenu" 태그를 사용했던 곳에서 이 태그가 어울릴만한 곳을 찾아보세요.

스크립트의 작동 상 제한으로 인해 메뉴에 a 태그를 사용하지 못하고 ul 태그를 사용해야 한다면, 그 외부에 nav 태그로 한번 포장을 해 주는 것이 좋습니다.

• 외부여백(margin)이 있습니다.
• 글자가 두꺼운 볼드체 속성이 있습니다.
• <h1>부터 <h6>까지 각각의 글자 크기가 다릅니다.

• 웹 사이트의 로고도 어떤 측면에서 보면 문서의 대제목으로 생각할 수 있습니다. 그래서 <h1><a href=”index.html”>로고</a></h1>처럼 로고를 h 태그에 넣어 사용하는 것도 매우 바람직한 방법입니다.
• h 태그를 CSS에서 조정하는 방법은 다음을 참조하세요.

h1 {
    margin: 0;          /*외부 여백을 삭제*/
    font-size: 12px;    /*폰트 크기를 12px로 변경*/
    font-style: normal  /*볼드체를 일반체로 변경*/
}