저자로부터:이 블로그에 오신 것을 환영합니다. 이번 강의에서는 html5의 기본, 즉 html5에 등장하고 이미 현대 웹사이트를 만드는 데 사용되는 가장 기본적인 태그를 소개하고 싶습니다. HTML5 요소는 이 언어의 기능을 크게 확장하므로 이에 대해 알아봅시다.

html5의 새로운 요소 - 의미론

우선, 주요 혁신인 소위 시맨틱 태그에 대해 언급하고 싶습니다. 그 외에도 형태 및 처리와 관련된 많은 혁신이 있습니다. 테이블 시대에는 레이아웃의 의미가 단순히 0이었습니다. 오늘날, 검색 엔진 홍보 시대에 점점 더 많은 웹마스터들이 그 중요성을 깨닫기 시작하고 있습니다. 왜냐하면 그러한 것조차도 역할을 하기 때문입니다.

또한 최신 웹 표준 자체는 코드의 단순성과 명확성에 중점을 두고 있습니다. 특히 새로운 요소에는 다음 태그가 포함됩니다.

헤더는 사이트, 기사 등의 헤더를 나타내는 쌍을 이루는 태그입니다. 개인적으로 처음에는 이 태그를 사이트 헤더 자체를 지정하는 용도로만 사용해야 한다고 생각했습니다.

나중에 웹사이트 개발 경험이 많은 사람들로부터 한 페이지에 여러 개의 헤더 태그가 있을 수 있다는 것을 배웠습니다. 따라서 그러한 요소에 대한 식별자나 클래스의 필요성은 여전히 ​​관련성이 있습니다.

바닥글 – 사이트의 바닥, 지하실 또는 기타 무엇이든 부를 수 있습니다. 일반적으로 저작권 정보가 포함되어 있으며 때로는 추가 메뉴 및 연락처 정보가 포함되어 있습니다. 이 태그의 경우 상황은 헤더와 동일합니다. 이 태그는 페이지의 유일한 태그가 아닐 수도 있습니다. 예를 들어 헤더와 실제로 다른 경우 사이드바의 아래쪽 섹션을 표시하는 데 사용할 수 있습니다. 다른 사람.

Nav는 웹페이지에서 특히 중요한 링크를 위한 컨테이너입니다. 간단히 말해서, 이제 이 태그에는 사이트의 중요한 페이지와 섹션에 대한 링크가 포함된 사이트의 기본 메뉴가 포함되어야 합니다.

기사는 기사, 뉴스, 포럼의 새 주제 등 페이지 콘텐츠를 담는 컨테이너입니다.

여담 – 이 태그를 어떤 용도로 사용해야 하는지에 대해서는 여전히 논쟁이 있습니다. 처음에 누군가는 다양한 위젯이 위치한 사이드 컬럼을 만드는 것이 관례라고 생각했습니다. 이 설명은 더 의미 있는 것으로 간주됩니다. 이 태그는 웹페이지의 부가 정보인 모든 정보를 구성해야 합니다. 예를 들어 인용문, 문서 탐색이 포함된 블록 또는 문맥 광고가 포함된 블록이 있습니다.

쌀. 1. 의미적 요소와 이를 이용한 새로운 마크업.

이는 html5의 주요 의미 요소였으며 이제 웹 페이지에 추가 기능을 추가하는 다른 요소를 살펴보겠습니다.

미디어 파일 삽입

오디오 – 이 태그는 쌍을 이루며 오디오 녹음을 화면에 표시하고 재생할 수 있는 플레이어에도 쉽게 표시할 수 있도록 설계되었습니다. 또한 이 태그에 단일 소스 태그를 배치해야 하며, 모든 브라우저에서 사운드를 처리할 수 있도록 오디오 파일 경로를 다양한 형식으로 지정해야 합니다.

이는 브라우저 간 호환성을 위해 수행됩니다. ogg 및 mp3 확장자에 오디오 파일 경로를 작성하는 것으로 충분합니다. 또한 오디오에는 특정 속성이 있습니다. 예를 들어 컨트롤 속성은 오디오 녹음에 컨트롤을 추가하므로 볼륨을 변경하고 재생을 중지할 수 있습니다.

비디오는 비디오를 표시한다는 점을 제외하면 이전 요소와 완전히 동일합니다. 또한 파일 경로가 src 속성에 지정되는 소스 태그도 포함되어 있습니다.

비디오의 경우 상황이 좀 더 복잡하다고 말할 가치가 있습니다. 모든 브라우저에서 재생하려면 ogg, mp4, webm의 세 가지 형식을 한 번에 추가해야 합니다.

일반적으로 태그는 오디오와 동일한 속성을 갖습니다. 또한, 비디오가 재생되지 않을 때 표시될 이미지의 경로를 설정할 수 있는 포스터 속성이 있습니다. 또한, width 및 height 속성을 이용하여 영상이 재생될 영역의 크기를 결정할 수 있습니다. 하지만 여전히 CSS를 통해 이 작업을 수행하는 것이 더 나은 것 같습니다.

왠지 예를 들지는 않지만, 영상 삽입으로 해야 합니다.

보시다시피, 동일한 파일(movie.dll)이 있습니다. 단지 형식이 다를 뿐입니다. MIME 유형과 코덱도 지정해야 합니다. 하지만 이것을 외우거나 기억 속에 간직하려고 해서는 안 됩니다. 그냥 복사하세요.

그림 - 일부 요소를 그룹화하기 위해 생성된 태그입니다. 이는 figcaption과 불가분의 관계에 있습니다. 이러한 요소를 갖추면 이전에 수행했던 작업을 다른 방식으로 수행할 수 있습니다. 예를 들어 이미지에 캡션을 삽입합니다. 이는 다음과 같이 수행할 수 있습니다.

쌀. 2. 이미지 캡션.

Datalist는 옵션 태그를 이용하여 사용자가 입력 텍스트 필드에 단어를 입력할 때 가능한 옵션을 입력할 수 있는 흥미로운 태그입니다. 검색 엔진에서 이를 볼 수 있습니다. 자체적으로 가능한 옵션을 알려줍니다. 물론 여기서 시스템은 그다지 독창적이지 않습니다. 사람들이 귀하의 사이트에서 검색할 수 있는 가장 일반적인 단어 몇 개만 간단히 적어두면 됩니다. 요소는 datalist 태그에 대해 정의한 식별자를 지정해야 하는 list 속성을 사용하여 텍스트 필드와 연결됩니다.

아마도 기사가 아닌 html5 요소에 관한 책을 작성해야 할 것입니다. 왜냐하면 우리는 이 기술을 사용하여 수행할 수 있는 모든 작업의 ​​절반도 다루지 않았기 때문입니다. 하지만 HTML5는 강력하며 웹 개발자의 역량을 크게 확장하는 기술이라는 점을 여러분에게 분명히 알 수 있기를 바랍니다.

우리는 기술의 기능에 대해서만 다루었으며 HTML5의 기본 사항에 대한 정보도 우리 과정에서 찾을 수 있습니다. 웹사이트 구축에 관한 다른 흥미로운 강좌와 함께 위치해 있습니다.

보시다시피 HTML5는 많은 새로운 기회를 제공하므로 웹 사이트 구축에 관심이 있는 사람은 누구나 이 기술에 익숙해져야 합니다. 귀하의 학업 성공을 기원하며 저희 블로그를 꼭 확인하시기 바랍니다.

HTML5 의미 요소브라우저와 웹 개발자 모두에게 의미나 목적을 명확하게 설명합니다.
HTML5 표준이 등장하기 전에는 모든 페이지 마크업이 주로 요소를 사용하여 수행되었습니다.