<html>
</html>

1. 문서 형식 정의 태그

Document Type Definition

출력할 웹 페이지의 형식을 브라우저에게 전달한다.

문서의 최상위에 위치해야하며 대소문자를 구별하지 않는다.

 

HTML5

<!DOCTYPE html>

 

2. html 태그

웹페이지에 단 하나만 존재.

모든 요소는 html요소의 하위 요소이다.

 

html요소 역시 클로벌 어트리뷰트를 지원한다.

<html>
</html>

 

3. head 태그

head 요소는 메타데이터를 포함하기 위한 요소이다.

웹페이지에 단 하나만 존재.

메타데이터는 title, style, link, script에 대한 정보를 가진 데이터로 화면에 출력되지 않는다.

 

3.1 title 태그

문서의 제목을 정의. 정의된 제목은 브라우저의 탭에 출력된다.

<!DOCTYPE html>
<html>
    <head>
        <title>브라우저 탭에 표시되는 제목</title>
    </head>
</html>

 

3.2 style 태그

HTML문서에서 사용되는 스타일을 정의하는 정보를 정의.

<!DOCTYPE html>
<html>
    <head>
        <title>브라우저 탭에 표시되는 제목</title>
        <style>
          body {
            background-color: black;
            color: white;
          }
        </style>
    </head>
    <body>
    </body>
</html>

 

3.3 link 태그

link 요소는 외부 문서를 연결화는 태그.

주로 css같은 파일을 연결. 폰트 주소를 연결할 수도 있다.

 

<!DOCTYPE html>
<html>
    <head>
        <title>브라우저 탭에 표시되는 제목</title>
        <link rel='stylesheet' type='text/css' href='sample.css'>
    </head>
    <body>
    </body>
</html>

3.4 script 태그

자바스크립트 코드를 작성하는 공간이다.

 

src 어트리뷰트로 외부 자바스크립트 파일을 불러올 수 있다.

 

3.5 meta 태그

메타 데이터 정의시 사용. 메타데이터는 브라우저, 검색엔진 등에 의해 사용된다.

 

charset으로 문자셋을 정의할 수 있다.

검색엔진이 사용할 키워드를 정의할 수 있다.

웹페이지의 설명을 정의할 수 있다.

웹페이지의 설명을 정의할 수 있다.

저자를 정의할 수 있다.

페이지 리프레시 주기를 정의할 수 있다.

 

4. body 태그

문서의 내용을 담는 곳 이다.

문서에 하나만 존재한다.

 

출처

https://poiemaweb.com/html5-tag-basic

'개발 > 웹' 카테고리의 다른 글

[HTML] 3. 시맨틱 웹  (0) 2019.12.19
[HTML] 2. HTML5 기본 문법  (0) 2019.12.18
[HTML] 1. 프런트엔드 개발자 학습 방향  (0) 2019.12.17

1.HTML5

HTML (Hyper Text Markup Language)

웹페이지 기술용 언어.

내용과 구조를 담당. 태그를 통해 구조화한다.

 

2014년 10월 28일 차세대 웹 표준으로 기능이 추가됨.

멀티미디어-플래시같은 플러그인 없이 비디오, 오디오 기능을 지원.

그래픽-SVG, 캔버스를 사용한 2차원 그래픽, CSS, WebGL을 이용한 3차원 그래픽 지원.

통신-서버와의 소켓 통신 지원으로 서버와의 양방향 통신 가능.

디바이스 접근-카메라, 동작센서 등의 하드웨어 기능 제어 가능.

오프라인 및 저장소-오프라인 상태에서도 애플리케이션을 동작시킬 수 있음. 플랫폼으로서 사용 가능.

시맨틱 태그-의미를 가진 태그를 도입해 콘텐츠의 의미를 설명할 수 있게 됨.

CSS3- 지원.

 

2. Hello HTML5

  • HTML5 문서는 <!DOCTYPE html>으로 시작해 문서형식을 지정한다.
  • HTML코드는 <html>과 </html>사이에 기술한다.
  • <head>와 </head> 사이에는 타이틀, 외부 파일 참조, 메타데이터의 설정 등이 위치.
  • 브라우저에 출력되는 요소는 <body>와 </body>사이에 위치한다.
<!DOCTYPE html>
<html>
	<head>
    	<mete charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>
    	<h1>Hello World</h1>
        <p>안녕하세요</p>
    </body>
</html>

 

3. HTML5의 기본 문법

3.1 요소(Element)

시작태그와 종료태그, 그리고 그 사이에 위치한 콘텐츠로 구성된다.

태그는 대소문자를 구분하지 않지만 소문자를 추천.

 

3.1.1 요소의 중첩 (Nested Element)

요소는 중첩될 수 있다.

중첩 시 들여쓰기를 한다. 가독성을 위해.

 

3.1.2 빈 요소 (Empty Element)

콘텐츠를 가질 수 없는 요소를 빈 요소라고 한다.

빈 요소는 콘텐츠 없이 어트리뷰트만을 가진다.

예를 들면 br, hr, img, input, link, meta 등..

 

3.2 어트리뷰트 (Attribute)

어트리뷰트란 요소의 성질, 특징을 정의하는 면세이다. 요소는 어트리뷰트를 가질 수 있으며 어트리뷰트는 요소에 추가적 정보를 제공한다. 오트리뷰트는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다.

 

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

글로벌 어트리뷰트는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다. 몇몇 요소는 적용되지 않을 수 있지만, 대체로 모든 요소에 사용할 수 있다.

 

id - 식별자를 element에 지정한다. 중복 지정 불가능.

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

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

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

style - 요소에 인라인 스타일을 지정한다.

tabindex - 사용자가 키보드로 페이지 요소 이동시 순서를 지정.

title - 요소에 관한 제목을 지정한다.

 

3.3 주석 (Comments)

주석은 주로 개발자에게 코드를 설명하기 위해 사용된다. 브라우저에 출력되지 않는다.

HTML에서 주석은 <!-- -->를 사용하여 표시하고 내부에 주석을 작성한다.

 

출처

https://poiemaweb.com/html5-syntax

 

HTML5 Introduction & Syntax | PoiemaWeb

HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. 조금 더 자세히 말하면 웹페이지의　내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다.　HTML5는 HTML의 최신 버전으로 아래와 같은 기능들이 추가되었다.

poiemaweb.com

 

'개발 > 웹' 카테고리의 다른 글

[HTML] 4. HTML 기본 태그  (0) 2019.12.24
[HTML] 3. 시맨틱 웹  (0) 2019.12.19
[HTML] 1. 프런트엔드 개발자 학습 방향  (0) 2019.12.17

+ Recent posts

티스토리툴바