• Blog/Markup

    [되짚기] HTML5와 태그

    2020. 4. 4.

    by. 나나 (nykim)

    320x100

     

     

    HTML(Hyper Text Markup Language)

     

    HTML이란

    흔히 마크업 언어라고 합니다. 집을 지을 때 쓰는 철골에 비유할 수 있어요. 웹의 구조를 담당하기 때문에 튼튼하게 짓는 게 중요합니다.

    최대한 구조에 맞게, "시멘틱하게" 마크업하는 것이 제일 중요합니다.

     

     

    내가 바로 HTML5

     

    현재 표준화된 HTML은 HTML5입니다. 5라는 건 버전을 말하는데요, 이 최신 버전은 기존의 XHTML이나 HTML4 등과 차이점이 있습니다.

    어떤 새로운 모습을 갖고 있냐면요-

     

    👉DTD(Document Type Definition)가 아주 깔끔해졌습니다. `<!DOCTYPE html>`만 써도, 지금부터 HTML5로 읽어라ㅏㅏ라고 알려줄 수 있어요.

    👉시멘틱 태그가 다수 추가됐습니다. 기존의 테이블 레이아웃은 바이바이~! <header>, <footer> 같은 레이아웃 태그가 추가되고, <strike>, <center>처럼 보여지는 데만 쓰이는 태그는 사라졌습니다.

    👉그래픽 언어로 <svg>를 사용할 수 있습니다.

    👉Video API, Drag and Drop API 등 다수의 API가 추가됐습니다.

     

    HTML5와 브라우저

    안타깝게도 모든 환경에서 HTML5를 쓸 수는 없어요(ㅠ.ㅠ)

    크로스 브라우징의 숙적이자 우리의 원수, 인터넷 익스플로러는 HTML5를 제대로 지원해 주지 않습니다. 최소 10부터 대응하며, 9는 일부만, 그리고 8 이하는 html5shiv.js 라는 별도의 라이브러리 도움을 받아야 합니다. 하지만 모바일과 태블릿 등의 기기가 등장하고, 웹 표준과 접근성이 중요해지면서 IE의 점유율은 열심히 떨어지는 중입니다. (마소도 포기한 그것!) 특히 HTML5는 자바스크립트 API를 통해 액티브엑스 없이도 다양한 기능을 제공할 수 있기에 더욱 중요해지고 있습니다. 그러니까 팍팍 쓰자구요!

     

    현재 HTML5를 제일 잘 지원하는 건 크롬입니다. HTML5 TEST에 들어가면 각 브라우저가 지원을 얼마나 잘 하는지 점수로 확인해 볼 수 있어요. 크롬 외 다른 브라우저들도 버전을 업데이트할 때마다 점수가 점점 오르고 있습니다. 그러니까 팍팍 쓰자구요! (2)

     

     

     

    태그 살펴보기

     

    여기서는 일부 태그 만을 살펴봅니다. 더 자세한 내용은 MDN의 HTML 요소 참고서를 참고하세요 :)

     

     

    <main>

    문서의 주요 콘텐츠를 나타냅니다. 이 요소의 콘텐츠는 유일한 내용이어야 하므로, 한 문서에는 하나의 <main>만 들어가야 합니다. 사이드바, 저작권 정보, 검색 폼 등은 이 태그 안에 들어가면 안 되겠죠. 안타깝게도(?) IE는 지원하지 않습니다.

     

     

    <article>

    독립적으로 구분되거나 재사용 가능한 영역을 설정합니다. 일반적으로 <h1>~<h6> 태그를 넣으며, 작성일자를 <time> 태그를 써서 나타낼 수 있습니다. (단, IE에섯 time 태그는 지원되지 않습니다)

    <article>
  <p>
  Posted on <time datetime="2020-04-06 19:00">April 6</time> by Nana.
  </p>
</article>

     

     

    <nav>

    현재 페이지 내, 또는 다른 페이지로의 링크를 보여줄 때 사용합니다. 하나의 문서에 여러 개의 <nav> 태그를 쓸 수도 있습니다. 

    <nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

     

    <mark>

    현재 맥락에서 중요한 부분을 강조해서 표시합니다. (형광펜 쫙!)

     

     

    <em>

    의미 강조를 표시합니다. 보조기기에서 강조로 발음됩니다.

     

     

    <a>

    다른 페이지, 같은 페이지 위치, 파일, 메일 주소 등 다른 URL로 연결할 수 있게 합니다.

    속성으로 download를 쓰면 이 요소가 다운로드하는 요소로 사용됨을 나타낼 수 있습니다.

    <a href="./download/file.pdf" download>다운로드</a>

     

     

    <img>

    이미지를 삽입하는 태그입니다. src, alt 값은 필수입니다. srcset과 sizes 속성을 이용하면 반응형에 유연하게 대응할 수 있습니다.

    <img src="/files/16864/clock-demo-200px.png" 
     alt="Clock" 
     srcset="/files/16864/clock-demo-200px.png 200w,
             /files/16797/clock-demo-400px.png 400w"
     sizes="(max-width: 600px) 200px, 50vw">

     

     

    728x90
    저작자표시

    'Blog > Markup' 카테고리의 다른 글

    버튼에 타입을 쓰는 이유 (button type="button")  (22) 2021.05.01
    [되짚기] 웹표준과 웹접근성  (0) 2020.04.04

    댓글

    관련글

    맨 위로
전체 글 보기

티스토리툴바