• [되짚기] 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")  (14) 2021.05.01
    [되짚기] 웹표준과 웹접근성  (0) 2020.04.04

    댓글 3

    • 프로필사진
      모모 2021.01.08 15:45

      유용한 정보 감사합니다! 공부하고 가요!

    • 프로필사진
      코기코기 2022.08.29 13:55

      안녕하세요 나나님! 의견을 여쭙고 싶은게 있는데요
      i 태그를 꾸며주는 시각적인 요소인 인라인 아이콘으로 사용하는 것이 올바른 태그 사용인지 궁금해서요
      본래의 용도는 의미없이 단순 텍스트의 기울임을 나타내는 태그인데
      태그 하위에 텍스트 노드 없이 background로 아이콘을 표시하는 걸로 사용해도 되는지 고민이 돼서요!

      • 프로필사진
        나나 (nykim) 2022.09.08 19:14 신고

        안녕하세요 코기고기님!
        정답은 없겠지만 저는 i 태그를 사용해도 상관 없다고 생각합니다.

        생각해보면 아이콘(예를 들면 삼각형)은 사실 그 자체에 의미가 없어서요! 그래서 CSS의 :after 속성으로 화면에 보여주곤 하죠.
        결국 단순 꾸밈 요소이기 때문에 i 태그든 div 태그든 큰 상관은 없습니다. 다만 i 가 짧고 왠지 아이콘이나 이미지 느낌을 줘서 종종 쓰이는 것 같네요ㅎㅎ

        하지만 아이콘에 중요한 의미가 있다면(이모지 등) role="img"와 aria-label로 ARIA 속성을 다는 것이 권장됩니다 :)