코딩하는 고릴라

[HTML 5] 기본 문법 본문

HTML, CSS

[HTML 5] 기본 문법

코릴라입니다 2023. 11. 29. 00:02
반응형

본 게시물은 poiemaweb(https://poiemaweb.com/)에 기술된 내용을 기반으로 작성한 게시물입니다.

1. HTML5

HTML

 - 웹 페이지를 기술하기 위한 마크업 언어

 - 웹페이지의 내용, 구조를 담당하는 언어

 - HTML 태그를 통해 정보를 구조화 하는 것에 목적

 

HTML5

 - 2014년 10월 28일 확정된 차세대 웹 표준

 - 아래와 같은 기능들이 추가됨

  1. 멀티미디어 : 플래시와 같은 플러그인의 도움 없이 비디오 및 오디오 기능 자체 지원
  2. 그래픽 : SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽 지원
  3. 통신 : 기존의 HTML과 달리 서버와의 소켓 통신을 지원해 서버와의 양방향 통신이 가능
  4. 디바이스 접근 : 카메라, 동작센서 등의 하드웨어 기능을 직접 제어 가능
  5. 오프라인 및 저장소 : 오프라인 상태에서도 애플리케이션의 동작 가능
    - HTML5가 플랫폼으로서 사용될 수 있음을 의미
  6. 시맨틱 태그
    - HTML 요소의 의미를 명확히 설명하는 시맨틱 태그 도입
    - 브라우저, 검색엔진, 개발자에게 콘텐츠의 의미를 명확히 설명
    - HTML 요소의 의미를 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹 실현 가능
     => 시맨틱 웹 : 웹페이지에 메타데이터를 부여하여 웹페이지를 의미, 관련성을 지닌 일종의 데이터베이스로 구축하고자 하는 것
  7. CSS3 : HTML5는 CSS3를 완벽하게 지원

2. HTML5 기본 구조

- HTML5 문서는 반드시 <!DOCTYPE html>로 시작하여 문서 형식을 HTML5로 지정함
  **<!DOCTYPE html> : 선언된 페이지의 html 버전이 무엇인지 브라우저에게 알려주는 역할을 하는 선언문

- 실제적인 HTML 문서는 2행부터 시작되며 <html>과 </html> 태그 사이에 기술

- <head>와 </head>태그 사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치.
  - 위 정보들은 브라우저에 표시되지 않음

- 웹 브라우저에 출력되는 모든 요소는 <body> 와 </body> 태그 사이에 위치

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>안녕하세요! HTML5</p>
  </body>
</html>

3. HTML5의 기본 문법

3.1 요소 (Element)

 - HTML 요소는 시작 태그와 종료 태그, 태그 사이에 위치한 content로 구성

<p>Hello</p>

 - 시작 태그 : <p>

 - 종료 태그 : </p>

 - 내용 : Hello

 - 태그는 대소문자를 구별하지 않으나 소문자를 사용하는 것이 일반적

 

3.1.1 요소의 중첩 (Nested Element)

 - 요소는 다른 요소를 포함할 수 있으며, 이 때 부자관계가 성립

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>반갑습니다!</p>
  </body>
</html>

 

3.1.2 빈 요소 (Empty Element)

 - content를 가질 수 없는 요소

 - content를 필요로 하지 않으며 attribute만을 가질 수 있음

<meta charset="utf-8">

- 빈 요소의 종류

  - br

  - hr

  - img

  - input

  - link

  - meta

3.2 어트리뷰트 (Attribute)

 - 요소의 성질, 특징을 정의하는 명세

   - 요소 : 어트리뷰트를 가질 수 있음

   - 어트리뷰트 : 요소에 추가적 정보를 제공

 - 어트리뷰트는 시작 태그에 위치, 이름 : 값의 쌍을 이룸

<img src="html.png">

 - src : 어트리뷰트 이름

 - "html.png" : 어트리뷰트 값

 

3.2.1 글로벌 어트리뷰트 (HTML Global Attribute)

 - 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트

 - 글로벌 어트리뷰트의 종류

    - id : 유일한 식별자를 요소에 지정. 중복 지정 불가

    - class : 스타일시트에 정의된 class를 요소에 지정. 중복 지정 가능

    - hidden : css의 hidden과 다르게, 의미상으로도 브라우저에 노출되지 않게 됨

    - lang : 지정된 요소의 언어를 지정. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 함

    - style : 요소에 인라인 스타일 지정

    - tabindex : 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정

    - title : 요소에 관한 제목 지정

 

※ 더 많은 글로벌 어트리뷰트 (https://www.w3.org/TR/2010/WD-html-markup-20101019/global-attributes.html)

3.3 주석 (Comments)

 - 코드 설명을 위해 사용되며 브라우저는 주석을 화면에 표시하지 않음

<!-- 주석은 화면에 미표기 -->
<p>안녕하세요</p>

확인하기 

 1. HTML이란?

 2. HTML5에서 새로이 추가된 내용은?

 3. <!DOCTYPE>이 가지는 의미는?

 4. 어트리뷰트란?

 5. 글로벌 어트리뷰트의 hidden과 css의 hidden의 차이점은?

 6. 글로벌 어트리뷰트 중 lang의 역할은? 

REFERENCES

 - poiemaweb

    - HTML5: W3C Recommendation

    - The Evolution of the Web

    - 브라우저 전쟁

    - 웹 호환성 문제

    - 플래쉬를 버리고 HTML5를 채택한 기술적 이유에 대해서 - 스티브 잡스(2010년) 

- TCP School

반응형

'HTML, CSS' 카테고리의 다른 글

[HTML 5] 시맨틱 웹  (0) 2023.11.29
'HTML, CSS' Related Articles more