HTML 수업

의미론적 태그

목적

문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 합니다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있습니다. 그 목록은 아래와 같습니다. 

article 본문
aside 광고와 같이 페이지의 내용과는 관계가 적은 내용들
details 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
figure 삽화나 다이어그램과 같은 부가적인 요소를 정의
footer 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
header 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
main 문서에서 가장 중심이 되는 컨텐츠를 정의
mark 참조나 하이라이트 표시를 필요로 하는 문자를 정의
nav 문서의 네비게이션 항목을 정의
section 문서의 구획들을 정의 (참고)
time 시간을 정의

등장시기

HTML 5

댓글

댓글 본문
작성자
비밀번호
  1. DONE!
  2. Lee Hyungbum
    강의 감사합니다!
  3. 심외무별법
    감사합니다.
  4. egoing
    시간이 좀 지난 동영상이라 그런데 어떤 부분에서 문제가 있는지 시간도 알려주시면 더 좋을 것 같아요~
    대화보기
    • Eshilluna
      기본적으로 <strong>표시되지</strong> 화면에 표시되지 않는 정보들을 정의
      강조시킨부분 오타인거 같은데요.. 수정 요청합니다.
    • Wj Kim
      훌륭한 강의 감사합니다.
    • Mike Kang
      표안에 details 설명에 '기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의' 라고 써있는데 기본적으로 다음에 표시되지가 오타 인것 같아요~
    • 감사합니다.
    • 김종엽
      2016.08.23 완료!
    • 감사합니다!
    • wonhee lee
      잘봤습니다!!!
    • 댓글은 힘이됩니다 화이팅
    • cicada
      댓글을 잘 안달았었는데 댓글이 힘이 된다고하셔서.... ㅋㅋㅋ

      항상 도움받고 있습니다
      좋은 강의 계속 부탁드릴게요!
    • Ian Si Mong Seong
      수강완료
      2016.08.01
    • 오미풍
      그럼 쓰는 사람 마음인건가요?
      '나는 article라고 생각하는데 너는 head라고 생각하네?' 같이요..
      '제목은 몇 줄이어야 한다' 라는 규칙이 없다면...
    • 김윤아
      수강완료~
    • 복기
      책보면서 공부하다가 필요한것만 골라서 보다가 책 다보고 복기하는겸 정주행 하는중입니다!
      많은도움이 되네요
    • JustStudy
      2016.07.20 수
      고맙습니다 1.
    • 소망
      details 부분에 "표시되지"라는 단어가 중복해서 적혔네요!
      감사히 잘 봤습니다 ㅎㅎ
    • 이승민
      감사히 잘봤습니다!
    • 별다
      많은 도움이 되고 있어요~감사합니다,
    • Subin Ha
      첫 댓글입니다. 늘 강의 잘 보고있습니다.^^
    • egoing
      감사합니다!
      대화보기
      • 이승민
        좋은강의 감사합니다 ㅎ
        정보로서의 html, 의미론적인 html, 반복해서 이야기 해주시는데 아직은 왜 그렇게 정보로서의 가치에 중점을 두는지 와닿지 않네요. 차차 알게 되겠지요.
      • 링고쥬스
        늘 감사해요 ~ ^^
      • ho7371
        감사합니다~!
      • 내는아빠다
        잘보았습니다. 감사합니다.
      • 감사합니다~
      • 지구정
        details : 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
        여기에 '표시되지'가 두번 들어가네요!!ㅎㅎ
      • 근욱`
        감샤감샤
      • 좋은 강의 잘 들었습니다.
        감사합니다.
      • 감사합니다
        너무나 쉽고 재미있게 가르쳐 주셔서 보는내내 재미있어요! 감사합니다 :D
      • 주성완
        감사합니다 항상 잘 보고있어요~~~
      • 정동건
        ㄹㅇ 명작블로그
      • 최태산
        egoing님께 항상 감사드리며 살고 있습니다 ~ ㅋ-ㅋ 어케 보면 제 스승님 이시네요 !
      • hoonnn
        이런 강의를 해주셔서 항상 감사하게 보고있습니다.
        준비중이신 강의들도 기다리겠습니다.^^
      • yskioi
        계속 동영상 보다가 댓글 다는걸 까먹 었네요 ^^
        이제 부터 동영상 열심히 보면서 달게요
        설명이 너무 심플해서 좋아요
      • Harry S. Hur
        가장 사이다 같은 내용을 설명해주셨네요. 이제 소스코드들이 이해가 가기 시작합니다 ㅋㅋㅋㅋ
      • egoing
        ^^ 아닙니다. 아주 반갑게 도장쾅을 보고 있었어요 ^^
        대화보기
        • SK Kim
          으헛 죄송합니다, 봤어요는 꼭 하고 있습니다.
          90년 후반부터 게임개발 기획자로 활동하면서 항상 프로그래밍을 배우고 싶었습니다.
          퇴직하고 창업후 애로 사항이 많았는데 생활코딩 덕분에 순조롭게 직무 변경중입니다.
          감사합니다!
          대화보기
          • egoing
            굉장히 열심히 달리고 계시군요 ^^
            그런데 한가지 부탁 드릴것이 도장 꽝도 좋지만 봤어요를 하시면 어떨까해요. 저에게 댓글을 달 때마다 이메일이 오고 있어서 ㅎㅎ
            대화보기
            • SK Kim
              도장 쾅!
            • 정석현
              감사합니다~!
            • 김선호
              늘 감사하는 마음 뿐입니다!!!
            • 감사합니다.~~
            • 안녕하세요, 독일에서 스타트업 취업을 위해 애쓰는 중입니다. HTML, Javascript나 SEO에 대한 사전 지식을 요구하는 회사가 많아서 너무 난감했는데, 생활코딩에서 도움 많이 받고 있어요. 이러다가 저 좋은 곳에 취업될 듯!!
              헤헤, 좋은 크리스마스 되세요!
            • Koh Jung Hoon
              의미론적 태그가 다 여기에 나타나 있는것 같지는 않은데...
              어딜 가야 다른 태그들을 볼 수 있나요?
            • 바지락
              감사합니다.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기