HTML5의 요소
html5는 html4에 기존 요소에서 표현을 위한 요소를 삭제하고, 쓰임이 명확하지 않았던 요소에 대한 정의를 구체화 하였으며, 기존에 없었던 새로운 요소를 추가했다. 각 요소의 성격과 쓰임에 따른 구분
루트 요소
| Element | 의미 및 용도 | HTML4 | HTML5 |
| <html> | 페이지의 최상위 요소 | 지원 | 지원-속성 추가 |
메타정보 요소
메타정보 요소는 페이지에 대한 정보를 제공하는 요소로, 기존의 html과 크게 변경된 사항은 없다. 화면에 표시 되지 않기 때문에 중요하지 않다고 생각될 수 있는 것 중에는 <title>과 같이 매우 중요한 요소도 있으며, 모바일 기기에서 <meta>나 <link>를 이용하여 고유의 기능을 제공하기도 한다.
| Element | 의미 및 용도 | HTML4 | HTML5 |
| <header> | 페이지의 헤더 영역을 생성 | 지원 | 지원 |
| <title> | 페이지 제목을 작성 | 지원 | 지원 |
| <base> | 페이지의 기준 URL을 지정 | 지원 | 지원 |
| <link> | 외부 자원의 연결 | 지원 | 지원 |
| <meta> | 메타 데이터의 지정 | 지원 | 지원 |
| <style> | 스타일의 지정 | 지원 | 지원-속성 추가 |
스크립팅 요소
| Element | 의미 및 용도 | HTML4 | HTML5 |
| <script> | 스크립트의 작성 및 연결 | 지원 | 지원 |
| <noscript> | 스크립트 불가 시 대체 내용 | 지원 | 지원 |
섹션 요소
html5에서 가장 많은 요소가 새로 추가된 부분, 센션 요소들은 웹페이지의 정보를 구조화하고 아웃라인을 생성해 내는 요소들
| Element | 위미 및 용도 | HTML4 | HTML5 |
| <body> | 페이지의 본문 영역의 생성 | 지원 | 지원 |
| <section> | 콘텐츠 섹션의 구분 | 미지원 | 지원-신규요소 |
| <nav> | 네비게이션의 작성 | 미지원 | 지원-신규요소 |
| <article> | 독립적인 콘텐츠 섹션 | 미지원 | 지원-신규요소 |
| <aside> | 주 내용과 관련이 적은 컨텐츠 섹션 | 미지원 | 지원-신규요소 |
| <h1>~<h6> | 제목 요소 | 지원 | 지원 |
| <hgroup> | 제목 그룹 | 미지원 | 지원-신규요소 |
| <header> | 콘텐츠 섹션의 머리말 | 미지원 | 지원-신규요소 |
| <footer> | 콘텐츠 섹션의 꼬리말 | 미지원 | 지원-신규요소 |
| <address> | 페이지 작성자의 연락처 정보 | 지원 | 지원-신규요소 |
그룹화 요소
컨텐츠 요소를 용도에 따라 구분하는 그룹화 요소는 사용에 대한 정의가 명확해지고 그에 따른 속성이 추가된 요소들이 있다.
| Element | 의미 및 용도 | HTML4 | HTML5 |
| <p> | 문단 영역의 생성 | 지원 | 지원 |
| <hr> | 주제 변경의 시각적 표시 | 지원 | 지원-의미 변경 |
| <br> | 줄 바꿈 | 지원 | 지원 |
| <pre> | 정형화된 텍스트 영역의 생성 | 지원 | 지원 |
| <blockquote> | 인용 문단 영역의 생성 | 지원 | 지원 |
| <ol> | 순서가 있는 목록 영역의 생성 | 지원 | 지원-속성 추가 |
| <ul> | 순서가 없는 목록 영역의 생성 | 지원 | 지원 |
| <li> | 목록의 아이템 | 지원 | 지원 |
| <dl> | 정의형 목록 영역의 생성 | 지원 | 지원 |
| <dt> | 정의형 목록의 정의어 | 지원 | 지원 |
| <dd> | 정의형 목록의 설명부 | 지원 | 지원 |
| <figure> | 도식 요소의 영역의 생성 | 미지원 | 지원-신규 추가 |
| <figcaption> | 도식 요소의 캡션 | 미지원 | 지원-신규 추가 |
| <div> | 일반적인 그룹핑 요소 | 지원 | 지원 |
텍스트 시멘틱(의미론적) 요소
텍스트 콘텐츠에 특정한 의미를 부여하는 텍스트 시멘틱 요소, html5의 다른 요소들과 같이 사용하는 용도가 명확해졌다.
| Element | 의미 및 용도 | HTML4 | HTML5 |
| <a> | 하이퍼링크 | 지원 | 지원-속성 추가 |
| <em> | 강조하는 구문 | 지원 | 지원-의미 변경 |
| <strong> | 중요한 구문 | 지원 | 지원-의미 변경 |
| <small> | 주석문 등 일반적으로 작게 표시하는 요소 | 지원 | 지원-의미 변경 |
| <cite> | 인용문의 출처 | 지원 | 지원 |
| <q> | 인용문 | 지원 | 지원 |
| <dfn> | 정의어 | 지원 | 지원 |
| <abbr> | 약어 | 지원 | 지원 |
| <time> | 날짜 및 시간 | 지원 | 지원-신규 요소 |
| <code> | 컴퓨터 프로그래밍 코드 | 지원 | 지원 |
| <var> | 변수 | 지원 | 지원 |
| <samp> | 출력 샘플 | 지원 | 지원 |
| <kbd> | 키보드 입력 표시 | 지원 | 지원 |
| <sub> | 아랫첨자 | 지원 | 지원 |
| <sup> | 윗첨자 | 지원 | 지원 |
| <i> | 학명 등 일반적으로 이탤릭체로 쓰이는 단어 | 지원 | 지원-의미 변경 |
| <b> | 일반적으로 굵게 표시하는 단어 | 지원 | 지원-의미 변경 |
| <mark> | 임의적인 마커 | 미지원 | 지원-신규 요소 |
| <ruby> | 루비 텍스트 영역의 생성 | 미지원 | 지원-신규 요소 |
| <rt> | 루비 텍스트 | 미지원 | 지원-신규 요소 |
| <rp> | 루비의 괄호 | 미지원 | 지원-신규 요소 |
| <bdo> | 텍스트 흐름 방향 | 지원 | 지원 |
| <bdi> | 기본 텍스트 흐름 방향과 다른 구역의 지정 | 미지원 | 지원-신규 요소 |
| <span> | 일반적인 인라인 그룹핑 요소 | 지원 | 지원 |
편집 표시 요소
| Element | 의미 및 용도 | HTML4 | HTML5 |
| <ins> | 추가된 문장 영역 | 지원 | 지원 |
| <del> | 삭제된 문장 영역 | 지원 | 지원 |
대체되는 요소
대체되는 요소란, <img> 요소와 같이 웹브라우저가 태그를 해석한 후 html 외부의 자원을 불러들여 표시하는 요소, html5에 추가된 <video>, <audio>, <canva> 등이 속한다.
| Element | 의미 및 용도 | HTML4 | HTML5 |
| <img> | 이미지의 삽입 | 지원 | 지원 |
| <iframe> | 외부 문서를 삽입하는 인라인 프레인 | 지원 | 지원-속성 추가 |
| <embed> | 플러그인 요소 등의 삽입 | 미지원 | 지원 |
| <object> | 외부 자원의 삽입 | 지원 | 지원 |
| <param> | 플러그인의 파라미터 설정 | 지원 | 지원 |
| <video> | 동영상 요소 | 미지원 | 지원-신규 요소 |
| <audio> | 오디오 요소 | 미지원 | 지원-신규 요소 |
| <souce> | 동영상, 오디오 요소의 자원 경로 | 미지원 | 지원-신규 요소 |
| <track> | 외부 텍스트(자막)을 위한 요소 | 미지원 | 지원-신규 요소 |
| <canvas> | 동적 그래픽 생성 영역의 생성 | 미지원 | 지원-신규 요소 |
| <map> | 이미지 맵의 생성 | 지원 | 지원 |
| <area> | 이미지 맵의 링크 영역 생성 | 지원 | 지원 |
테이블 요소
| Element | 의미 및 용도 | HTML4 | HTML5 |
| <table> | 표 영역의 생성 | 지원 | 지원 |
| <caption> | 표의 제목 | 지원 | 지원 |
| <colgoup> | 표의 열 그룹 | 지원 | 지원 |
| <col> | 표의 열 | 지원 | 지원 |
| <tbody> | 표의 테이터 행 그룹 | 지원 | 지원 |
| <thead> | 표의 머리 행 그룹 | 지원 | 지원 |
| <tfoot> | 표의 꼬리 행 그룹 | 지원 | 지원 |
| <tr> | 표의 행 | 지원 | 지원 |
| <td> | 표의 테이터 셀 | 지원 | 지원 |
| <th> | 표의 제목 행 | 지원 | 지원 |
폼 요소
사용자로부터 정보를 입력받아 서버로 전송하는 서식을 구성하는 요소들, 서식 자체의 기능을 위한 속성들도 많이 추가되어, 이전에는 자바스크립트를 이용하여 구현했던 기능을 폼 요소 자체로 많은 부분을 구현할 수 있게 되었다.
| Element | 의미 및 용도 | HTML4 | HTML5 |
| <form> | 서식 영역의 생성 | 지원 | 지원-속성 추가 |
| <fieldset> | 폼 요소의 그룹핑 | 지원 | 지원-속성 추가 |
| <legend> | 폼 요소 그룹의 제목 | 지원 | 지원 |
| <label> | 폼 요소의 설명 | 지원 | 지원-속성 추가 |
| <input> | 폼의 입력 요소 | 지원 | 지원-속성 추가 |
| <button> | 버튼 | 지원 | 지원-속성 추가 |
| <select> | 선택 상자 요소 | 지원 | 지원-속성 추가 |
| <datalist> | 입력값 후보 제안 요소 | 미지원 | 지원-신규 추가 |
| <optgroup> | 선택 상자 아이템의 그룹핑 요소 | 지원 | 지원 |
| <option> | 선택 상자 아이템 | 지원 | 지원 |
| <textarea> | 텍스트 입력 영역 | 지원 | 지원-속성 추가 |
| <keygen> | 보안키의 생성 | 미지원 | 지원-신규 추가 |
| <output> | 출력 영역 | 미지원 | 지원-신규 추가 |
| <progress> | 진행 현황 표시 | 미지원 | 지원-신규 추가 |
| <meter> | 게이지의 표시 | 미지원 | 지원-신규 추가 |
인터렉티브 요소
새롭게 추가된 요소들로 웹 애플리케이션을 위한 성격이 강함
| Element | 의미 및 용도 | HTML4 | HTML5 |
| <datalist> | 상세 정보 | 미지원 | 지원-신규요소 |
| <summary> | 상세 정보의 요약 | 미지원 | 지원-신규요소 |
| <command> | 애플리케이션 기능 명령 | 미지원 | 지원-신규요소 |
| <menu> | 애플리케이션 메뉴 영역 | 지원 | 지원-의미변경 |
모니터 패널들의 장단점 알아보기
모니터 패널들의 장단점 알아보기 모니터를 구매할때 여러 기준이 있겠지만 대표적으로 색 표현력, 응답속도, 시야각 등이 가장 많이 보는 내용들인데, 뭐니뭐니해도 패널이 좋아야겠지요!? 우
smarti.tistory.com
[코딩공부] - CSS fixedNavigation2 예제 다운로드
CSS fixedNavigation2 예제 다운로드
FixedNavigation 2 Tutorial 예제보기 다운로드 네비게이션에 필요한 목록 요소는 내부에 링크가 있는 간단한 순서없는 목록이다. 목록은 나중에 javascript에서 참조하기 위해 아이디를 가져온다. jQuery를
smarti.tistory.com
유튜브 자막 다운로드 하는 방법
유튜브 자막 다운로드 하는 법 유튜브 동영상의 한글자막이 있는 영상의 자막을 다운로드 할 수 있도록 도와주는 사이트 첫번째 : 자막을 받고 싶은 유튜브 영상 주소를 복사한다. 두번째 : 다음
smarti.tistory.com
바둑에 담긴 지혜
바둑에 담긴 지혜 위기십결(圍棋十訣) 당나라 현종은 '기대조(棋待詔)'라는 벼슬을 두었는데, 이는 바둑의 최고수에게 헌정되는 자리였다. 당시 기대조였던 당나라의 바둑 고수 왕적신(王積薪)
smarti.tistory.com
[세상살이] - 구글 메시지를 이용, PC에서 문자 보내기
구글 메시지를 이용, PC에서 문자 보내기
Google 메세지 이용, 내 PC에서 문자 보내기 휴대폰에서 문자를 보낼 때 작은 화면으로 문자를 보낼때 타자속도도 느리고 오타도 많이 발생한다. 장문의 문자를 보낼때는 특히 더 할텐데 내 책상에
smarti.tistory.com
'코딩공부' 카테고리의 다른 글
| HTML 기본요소3, list(리스트), table(테이블) (0) | 2020.09.30 |
|---|---|
| HTML 기본요소 2, link(링크), image(이미지) (0) | 2020.09.29 |
| HTML 기본요소 1, meta tag(메타태그), color(색), background(배경) (0) | 2020.09.29 |
| HTML 공간 분할(layout, iframe, block & inline) (0) | 2020.09.28 |
| MySQL 8.0.21 다운로드 및 설치하기, 윈도우10 (0) | 2020.09.08 |
| PHP 7.4 다운로드 및 설치하기, 윈도우10 (0) | 2020.09.08 |
| 아파치(Apache 2.4.46) 웹서버 설치하기, 윈도우10 (0) | 2020.09.08 |
| 진화된 HTML5 이해(1) (0) | 2020.09.06 |
댓글