HTML

1. HTML Tags

<!-- -->	HTML 주석
<a>	하이퍼링크를 정의
<blockquote>	다른 출처로부터 인용된 영역을 정의
<body>	해당 문서의 콘텐츠 영역을 정의
<br>	행바꿈(\n)을 정의
<button>	클릭할 수 있는 버튼을 정의
<canvas>	스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용
<code>	컴퓨터 코드의 일부분을 나타낼 때 사용
<data>	특정 컨텐츠에 기계가 읽을 수 있는 형태의 값을 덧붙어 나타낼 때 사용
<div>	HTML 문서에서 특정 영역이나 구획을 정의
<footer>	문서나 특정 섹션의 푸터를 정의
<form>	사용자로부터 입력받을 수 있는 HTML 입력 폼을 정의
<h1> ~ <h6>	HTML 문서에서 제목을 정의
<head>	해당 문서에 대한 정보인 metadata의 집합을 정의
<header>	문서나 특정 섹션의 헤더를 정의
<hr>	컨텐츠 내용에서 주제가 바뀔 때 사용되는 수평가로선을 정의
<html>	HTML 문서의 루트 요소를 정의
<img>	이미지요소를 정의
<input>	사용자로부터 입력받을 수 있는 입력필드를 정의
<label>	사용자 인터페이스 요소의 라벨을 정의
<li>	HTML 리스트에 포함되는 item을 정의
<meta>	해당 문서의 metadata를 정의
<nav>	다른 페이지 or 현제 페이지의 다른 부분과 연결되는 네이게이션 링크들의 집합을 정의
<option>	드롭다운 리스트에서 사용되는 하나의 옵션을 정의
<pre>	미리 정해진 형식의 텍스트를 정의
<script>	클라이언트 사이드의 스크립트를 정의
<section>	HTML 문서에 포함된 독립적인 섹션을 정의
<select>	옵션 메뉴를 제공하는 드롭다운 리스트를 정의
<span>	HTML 문서에서 인라인 요소를 묶을때 사용
<style>	해당 문서의 스타일 정보를 정의
<table>	행과 열로 구성된 2차열 테이블을 정의 (관련된 tag로 tr, td, thead, tbody, 등이 있다.)
<textarea>	사용자가 여러줄의 데이터를 입력할 수 있는 텍스트 입력 영역을 정의
<title>	해당 문서의 제목을 정의
<ul>	순서가 없는 HTML 리스트를 정의
<video>	무비스트립이나 비디오 스트림과 같은 비디오를 정의

http://www.tcpschool.com/html-tags/intro 참고

2. Page Structure

<html>
  <header>
    <title>Title</title>
    <sub-title>sub title</sub-title>
  </header>
  <body>
    <nav>Menu Area</nav>
    <aside>Sidebar Area</aside>
    <article>
      <section>
        <img src="" alt="이미지"/>
        Section 1 Area
      </section>
      <section>
        Section 2 Area
      </section>
    </article>
  </body>
  <footer>
    Footer Area
  </footer>
</html>

3. Semantic Tags

시맨틱 태그란?

시맨틱 태그란 의미가 있는 태그를 말한다. block 요소로 div, inline 요소로 span만 사용하는 것이 아닌 태그 그 자체에 의미가 있는 태그들로 header, footer, nav,등이 있다.

시맨틱 태그를 쓰는 이유?

검색엔진최적화(SEO) : 시맨틱 태그를 사용하면 검색엔진이 해당 페이지를 좀 더 정확한 구조로 파악하도록 도울 수 있다.
코드 가독성이 좋아지고 이로 인해 유지보수에 도움을 준다.
소스 구조를 파악하기 용이하고 이로 인해 페이지를 분석하는 서비스를 사용하기 용이하다.

시맨틱 태그의 종류

header: 사이트의 헤더영역
footer: 사이트의 푸터영역
nav: 네비게이션 바 영역
aside: 사이드 바 영역
article: 재배포가 가능한 독립적인 개별 컨텐츠 영역
section: 재배포가 불가능한 컨텐츠 영역

728x90

저작자표시 (새창열림)