Archive

HTML5 Sementic Web, meta Tag, Attribute

11 Mar 2021 | HTML/CSS

HTML5 Sementic Web, meta Tag, Attribute

  1. HTML5

    • 2014년 차세대 웹 표준으로 HTML5에 아래와 같은 기능들이 추가되었다

      • Multimedia : 플래시 없이 비디오 및 오디오 기능을 자체적으로 지원
      • Graphics & Effects : SVG, Canvas(2차원), CSS3, WebGL(3차원) 그래픽을 지원
      • Connectivity : 서버와의 소켓 통신 지원으로 양방향 통신이 가능
      • Device Access : 카메라, 동작센서 등의 하드웨어를 직접 제어 가능
      • Offline & Storage : 오프라인 상태에서도 앱을 동작시킬 수 있다
      • Semantics : 시맨틱 태그를 도입
      • CSS3 : HTML5는 CSS3를 완벽하게 지원


  2. Semantic Web

    • 검색엔진에 노출이 되는 것은 아주 중요하다

    • SEO(검색엔진 최적화: Search Engine Optimization) 같은 마케팅 도구를 사용해 검색엔진이 내가 배포한 웹을 검색하기 알맞은 구조로 조정한다

    • 검색엔진은 매일 전 세계의 웹사이트 정보를 수집한다. 이를 크롤링이라 한다

    • 사용자가 검색할 만한 키워드를 예상해 인덱스를 만든다. 이를 인덱싱이라 한다

    • 검색엔진은 시맨틱 태그를 보다 명확하게 해석할 수 있다

    • 시맨틱 태그는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명한다

    • 시맨틱 웹은 웹 페이지에 메타데이터를 부여하여 웹 페이지를 의미와 관련성을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다

    • HTML5에서 추가된 시맨틱 태그

      • header : 헤더
      • nav : 네비게이션
      • aside : 사이드 메뉴, 광고 등
      • section : 본문의 여러 내용 (article을 포함)
      • article : 본문의 주내용
      • footer : 푸터


  3. meta tag

    • description, keywords, author, 기타 메타데이터 정의에 사용된다
    <!-- 브라우저가 사용할 문자셋 -->
<meta charset="utf-8">
   
<!-- SEO를 위해 검색엔진이 사용할 키워드 -->
<meta name="keywords" content="HTML, CSS, JavaScript">
   
<!-- 웹 페이지 설명 -->
<meta name="description" content="value">
   
<!-- 웹 페이지 저자 -->
<meta name="author" content="name"> 
   
<!-- 웹 페이지 새로고침 -->
<meta http-equiv="refresh" content="time">


  4. Attribute

    • HTML 태그의 속성

    • Global Attribute

      • id
      • class
      • hidden : css의 hidden과는 다르게 의미상으로도 브라우저 노출이 안됨
      • lang : 지정된 요소의 언어 지정, 크롤링시 웹 페이지의 언어를 인식하게 한다
      • style : 인라인 스타일링
      • tabindex : 사용자가 키보드로 페이지 이동시 순서 지정
      • title : 요소의 제목 지정

    • href (a 태그)

      • 페이지 내 특정 id를 갖는 요소에 링크가 가능하게 한다
      <div id="top"></div>
     
<a href="#top">TOP</a>
      • mailto:
      <a href="mailto:powerlsh0103@gmail.com">Send Mail</a>
      • script : 자바스크립트
      <a href="javascript:alert('안녕');">push</a>

    • target (a 태그)

      • _blank : 링크 클릭시 새 창에서 오픈
      • _self : 링크 클릭시 현재 창에서 오픈

    • ol 태그

      • type=”1”,”A”,”a”,”ⅰ” : 순서를 나타내는 문자 지정
      • start : 리스트의 시작값 지정
      • reversed 리스트의 순서값을 역으로 표현

    • table 태그

      • rowspan : 병합할 행의 수 지정
      • colspan : 병합할 열의 수 지정

    • input 태그

      • color : 컬러 선택 폼 생성
      • date : 년월일 선택 폼 생성
      • datetime : 년월일 시분초 선택 폼 생성
      • datetime-local : 지역 시간 년월일 시분초 선택 폼 생성
      • time : 시간 선택 폼 생성
      • month : 월 선택 폼 생성
      • week : 주 선택 폼 생성
      • range : 범위 선택 폼 생성
      • search : 검색어 입력 폼 생성
      • tel : 전화번호 입력 폼 생성
      • time : 시간 입력 폼 생성
      • url : url 입력 폼 생성


참고 자료

모던 자바스크립트 deep dive

Related Posts