메뉴

HTML 대 HTML5 : HTML5와 HTML의 차이점은 무엇입니까?

  • 메인
  • 다른
  • HTML 대 HTML5 : HTML5와 HTML의 차이점은 무엇입니까?

html vs html5 what is difference between html5

문제를 제거하기 위해 도구를 사용해보십시오

이 HTML5 대 HTML 자습서는 HTML과 HTML5의 주요 차이점을 설명합니다. HTML5의 장단점에 대해서도 알아볼 수 있습니다.

기본 게이트웨이를 사용할 수 없음 Windows 10 WiFi

HTML5와 HTML의 차이점을 배우기 전에 먼저 이러한 용어에 대한 기본적인 이해와 이러한 하이퍼 텍스트 마크 업 언어를 사용하여 웹 사이트를 디자인하는 방법을 살펴 보겠습니다.

HTML 대 HTML5

이 튜토리얼에서는 최신 버전 인 HTML5가 HTML과 어떻게 다른지 살펴 봅니다.

학습 내용 :

마크 업 언어 란?

에 마크 업 언어 웹 브라우저에서 정보를 교환하는 데 사용되는 매체입니다. 웹 페이지는 다음과 같아야합니다. . 그것은 다룹니다 텍스트 발표 코드의 도움으로. 코드는 스타일 과 형세 웹 페이지의.

다양한 유형의 마크 업 언어

몇 가지 중요한 마크 업 언어는 다음과 같습니다.

  1. 표준 일반화 마크 업 언어.
  2. 하이퍼 텍스트 마크 업 언어.
  3. 확장 가능한 마크 업 언어.
  4. 확장 가능한 하이퍼 텍스트 마크 업 언어.

다양한 버전의 HTML

  • HTML 1.0 : 이것은 Tim Berners에 의해 1991 년에 발표되었습니다. 웹 페이지 디자인을 수행 할 수있는 기능이 많지 않았습니다.
  • HTML 2.0 : 이것은 1995 년에 등장했습니다. 이전 버전의 모든 기능과 자체 기능이 포함되었습니다.
  • HTML 3.2 : 이것은 1997 년에 출시되었습니다.이 버전은 캐스 케이 딩 스타일 시트 (CSS) 지원.
  • HTML 4.01 : 이것은 1999 년에 출시되었습니다. 버전 3.2에서는 HTML 자체에 CSS를 통합해야합니다. HTML 4.01에서는 외부 스타일 시트 소개되었습니다. 여기서 HTML 내부에 통합해야하는 외부 CSS 파일을 만들어야합니다. 이 버전은 또한 새로운 태그를 추가했습니다.
  • XHTML : 이것은 2000 년에 출시되었습니다.
  • HTML 5 : 이 버전은 2014 년에 출시되었습니다.이 버전에는 멀티미디어 지원, 외부 플러그인 사용 최소화, 새 태그 추가 등 많은 새로운 기능이 있습니다.

HTML이란?

HTML 로 알려져 있습니다 H yper 티 내선 미디엄 Arkup 엘 웹 페이지의 구조와 내용을 만드는 anguage.

더 자세히 이해하기 위해 예를 들어 보겠습니다.

새로운 언어를 공부하는 동안에도 마찬가지로 중요한 규칙, 문법 및 사용법을 염두에 두어야합니다. HTML을 배우면서 확실하게 배워야합니다. 집단 그리고 그 중요성.

이제 a가 무엇인지 이해합시다. .

: HTML 요소는 '태그'로 다른 텍스트와 구분됩니다. 태그에는 ''로 묶여 있거나 스타트 태그와 종료 꼬리표.

단락 태그

여기

과

각각 시작 및 닫는 태그이고 나머지는 요소 콘텐츠입니다.

태그는 대소 문자를 구분하지 않습니다.

HTML 구조 : HTML 구조의 예는 다음과 같습니다.

HTML 구조

Chrome 브라우저에서 코드를 실행하면 다음과 같은 출력이 표시됩니다.

산출

페이지 제목은 '첫 번째 Html 페이지'이며, HTML 구조의 태그 아래에 언급 된 것과 동일합니다. '단락 내용'은

꼬리표.

  • 종종 루트라고하는 HTML 문서의 최상위 수준에 있습니다. 이 태그 안에 있습니다.
  • 문서 제목과 같은 웹 페이지에 대한 정보를 포함합니다. 헤더 태그 내의 일부 공통 태그는,,, 및입니다.
  • 웹 페이지의 실제 표현을 설명합니다. body 태그 내부의 일반적인 태그 중 일부는

    기사 태그는 웹 페이지에서 독립적 인 텍스트를 결정합니다.

    Aside 태그는 HTML5에 도입 된 또 다른 태그입니다.


    바닥 글 태그는 웹 페이지의 마지막 부분을 가리키는 데 사용됩니다.

    산출:

    시맨틱 태그 사용 예제의 출력

    #두) , 태그는 커뮤니케이션 요소로 도입됩니다.

    사용법을 설명하는 코드를 살펴 보겠습니다.

    이 비디오를보고 HTML 5에 대한 더 흥미로운 사실을 알아보십시오.

    #삼) , 그래픽 요소에 대한 태그가 도입되었습니다.

    # 4) 같은 현대적인 양식 요소 날짜, 시간, 주, 이메일 그리고 더 많은 것이 시작됩니다.

    # 5) Href는 앵커 태그의 필수 속성이 아닙니다.

    # 6) 웹 페이지를 동적으로 만드는 요소가 소개됩니다. 이러한 요소는, 등입니다.

    # 7) Doctype 및 문자 인코딩이 더 간단 해졌습니다.

    # 8) 다음과 같은 추가 속성 자동 초점, 자동 완성, 필수 그리고 더 많은 것이 양식 태그에 추가됩니다.

    사용법을 설명하는 코드를 살펴 보겠습니다.

    여기서 'required'속성은 특정 입력 필드가 양식에서 필수임을 정의합니다.

    # 9) 사용자를위한 지리적 위치 결정, 드래그 앤 드롭 기능, 로컬 스토리지, 애플리케이션 캐시 등과 같은 다양한 용도를 가진 새로운 API가 도입되었습니다. 이러한 모든 결과로 인해 최신 웹 애플리케이션에서 HTML5에 대한 요구가 증가합니다.

    # 10) 또한 이전 버전의 HTML과 같은 일부 태그는 더 이상 사용되지 않습니다.

    #열한) 핑이라는 속성 외에도 문자 세트가 도입되었습니다.

    현실 세계에서의 자바 응용

    # 12) 수학 기호가 더 잘 표현됩니다. MathML oftag의 도움으로 요소.

    HTML과 HTML5의 차이점

    다음은 HTML5와 HTML 4.01의 차이점입니다. 현재 일반적으로 HTML이라고합니다.

    일련 번호.HTMLHTML5
    7 모바일 사용 편의성으로 안정성이 떨어집니다.모바일 사용자의 사용이 더 쉽습니다.
    하나 코드에서 잘못된 구문에 대한 지원을 제공하지 않습니다.코드에서 부적절한 구문을 처리하는 효율성이 있습니다.
    두 백그라운드에서 실행되는 JavaScript를 지원할 수 없습니다.Javascript는 백그라운드에서 실행될 수 있습니다.
    삼 Strict, Frame set, Transitional이라는 세 가지 doctype 선언이 있습니다.더 쉬운 doctype 선언 :
    4 오디오 및 비디오를 재생하려면 Flash 지원이 필요합니다., 태그는 오디오, 비디오 및 게임의 사용을 지원했습니다.
    5 HTML과 관련된 Flash, VML 또는 Silverlight는 벡터 그래픽의 사용을 가능하게했습니다.SVG 및 캔버스를 지원합니다.
    6 모든 이전 브라우저에서 실행됩니다.최신 버전의 Chrome, Safari 등에서 작동합니다.
    8 원, 직사각형, 정사각형 등의 도형을 그릴 수 없습니다.원, 직사각형, 정사각형 등의 도형을 그릴 수 있습니다.
    9 브라우저 캐시는 임시 저장소로 활용됩니다.SQL 웹 데이터베이스, 애플리케이션 캐시 및 웹 스토리지가 스토리지로 활용됩니다.
    10 드래그 앤 드롭 기능이 제공되지 않습니다.드래그 앤 드롭 기능이 제공됩니다.
    열한 준비 성과 속도 측면에서 개발자의 사용에별로 유리하지 않습니다.준비성, 속도 및 실행 측면에서 개발자의 사용에 유리합니다.
    12 ,, 태그는 코딩하는 동안 필수입니다.,, 태그는 코딩 중에 생략 할 수 있습니다.
    13 Div 요소는 내용에 대해 아무것도 알려주지 않는 광범위하게 사용됩니다.header, footer, aside 등과 같은 의미 론적 의미를 가진 새로운 요소가 도입되어 코드를보다 의미 있고 디버그하기 쉽게 만듭니다.
    14 정교한 문자 유형 인코딩더 쉬운 문자 유형 인코딩
    열 다섯 사용자가 사용할 수없는 지리적 위치 정보를 가져 오는 기능입니다.HTML geolocation의 최신 API는 사용자의 정확한 위치 세부 정보를 제공합니다.
    16 및 태그의 유형 속성은 코드에서 필수입니다.및 태그의 유형 속성은 코드에서 생략 할 수 있습니다.

    HTML5가 개발자를 위해 HTML보다 우위를 차지하는 이유는 무엇입니까?

    • 앞서 논의한 바와 같이 개발자는 속도, 준비성 및 실행 측면에서 HTML5 사용이 매우 적합하다는 것을 알게되었습니다. 코드에서 일관된 오류 처리를 제공하여 개발자에게 많은 리소스를 절약합니다.
    • 새로운 요소 의미 론적 의미 header, footer, aside 등이 도입되어 코드를보다 의미 있고 디버그하기 쉽게 만듭니다.
    • 양식을 개발하는 동안 자동 초점과 같은 속성이 일반적으로 사용되며 매우 유용한 것으로 입증되었습니다. 페이지가로드되는 동안 autofocus 속성을 사용하여 문서의 첫 번째 필드가 아닌 다른 필드에 초점을 맞출 수 있습니다.
    • HTML5의 Local Storage Object는 개발자가 저장 한도가 작고 안전하지 않은 쿠키를 제거하는 데 도움이됩니다.
    • Doctype 및 문자 인코딩이 더 간단 해졌습니다.
    • 그만큼 유형 및 태그에 대한 속성은 코드에서 생략 할 수 있습니다. .
    • ,, 태그는 코딩 중에 생략 할 수 있습니다.
    • 모바일 및 데스크톱 애플리케이션에서 향상된 웹 커뮤니케이션을위한 도형 및 / 요소 그리기 용.

    최종 사용자를위한 HTML5의 장점

    • 그것은 모바일 친화적이고 쉬운 쓰다. 모바일 충돌은 이제 드문 시나리오입니다.
    • 오디오, 비디오 및 게임을 위해 추가 플러그인 및 소프트웨어를 설치할 필요가 없습니다. 사용자는 라이브 콘텐츠의 빠른 응답 웹 페이지에서.
    • 정보는 미래를 위해 사용자의 기기에 저장 될 수 있으므로 앱은 오프라인 방법.
    • 웹 페이지에는보다 활기찬 색상, 음영, 그라디언트 및 다양한 글꼴 유형이 있습니다.

    HTML5의 단점

    HTML5는 개발자와 최종 사용자에게 많은 이점이 있지만 몇 가지 단점도 있습니다.

    다음은 몇 가지입니다.

    • 최신 브라우저 만 HTML5를 지원할 수 있습니다.
    • HTML5는 안정적이고 입증 된 언어로 간주되지만 아직 개발 단계에 있으므로 향후 상당한 재 작업이있을 수있는 기능이 변경 될 수 있습니다.

    결론

    우리는 HTML과 HTML5의 차이점을 자세히 배웠습니다. HTML5는 모든 사람을위한 다양한 개선 사항과 이점을 제공합니다. World Wide Web은 HTML5의 최신 업데이트가 개인 정보 보호 도구를 다룰 것이라고 밝혔습니다.

    추천 도서 = >> 종합 HTML 치트 시트

    웹 개발 및 테스트 분야에서 경력을 쌓고 자하는 사람은 누구나 HTML5에 대한 지식이 있어야합니다. 이전 버전의 HTML에 있었던 격차를 해소했습니다. 시맨틱 요소, 새 태그 / 속성 / API, 오류 처리, 멀티미디어 및 웹 상호 작용은 HTML5의 하이라이트 중 일부입니다.

    HTML5는 아직 개발 중이므로 훨씬 더 많은 이점을 얻고 동시에 기존 기능 중 일부가 변경 될 수 있습니다. HTML 5는 여기서 논의한 다른 이전 버전의 HTML에서 실제로 발전했습니다.

    추천 읽기 = >> HTML5 대 플래시

    추천 읽기 = >> PHP 대 HTML

    이 튜토리얼이 HTML5 및 HTML에 대한 지식을 쌓았기를 바랍니다.

    추천 도서

^