dev._.note

[HTML] HTML(Hyper Text Markup Language)이란? 본문

Dev/HTML

[HTML] HTML(Hyper Text Markup Language)이란?

Laena 2023. 3. 21. 23:47

HTML이란?

HTML은 Hyper Text Markup Language 약어로 웹의 최소 단위인 웹페이지를 만드는 언어.
다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어

HTML 특징

웹 문서의 표준이다.

웹호환성과 접근성이 우수하다.

유지보수가 용이하다.

 

컴파일 되지 않은 텍스트 문서로서 편집이 용이하다.

별도의 전용 프로그램이 아닌 간단한 메모장과 같은 편집기로도 충분하다.

 

마크업 언어.

파일 용량이 작아 클라이언트-서버 간 빠른 문서 전달이 가능하다.

 

시스템과 운영체제에 독립적

어떤 시스템/브라우저에서도 사용이 가능하다.

 

구조가 단순하고 문법이 쉽다.

다른 언어들보다 단순한 구조를 가지고 있으며 연산적인 요소가 적다.

 

HTML 문서 작성을 위한 기본 문법

HTML 문서인 웹 페이지는 head 영역과 body 영역으로 구성
문서의 타이틀(title) 은 웹 페이지의 제목으로 브라우저 탭에 표시

 

구성요소

  • 요소(Elements) : 시작과 종료를 나타내는 태그로 이루어진 모든 명령어

  <title>              제목             </title>

(Start tag)     (Content)      (End tag)

 

  • 태그(Tag) : '<'와 '>'로 둘러싸인 요소의 일부

<title> 제목 </title>

 

※  </닫는태그> 가 없는 태그 = 단일 태그 (empty element)

닫는 태그가 없는 태그(tag) 들도 존재한다.

예 <br> , <mete> 등인데 <br /> 이런식으로 닫는 태그를 포함하여 표현할수도 있다.

 

  • 속성(Attributes) : 요소의 시작태그 내에 사용하며, 명령어를 구체화 시키는 역할

<img src = "주소">

 

  • 변수(Arguments) : 속성과 관련된 값

<font size = "10">

 

태그의 중첩

태그는 중첩가능 ( <태그> <태그1> ~ </태그1> </태그> )

 

예시

<ol>
    <li>번호1</li>
    <li>번호2</li>
</ol>
<ul>
    <li>번호없음</li>
    <li>번호없음</li>
</ul>

HTML 의 기본구조

<!DOCTYPE html>          <!-- 현재 문서가 HTML5 문서임을 명시합니다. -->

<HTML>                    <!-- HTML 문서의 시작 -->

<HEAD>                    <!-- HTML 문서의 설명(title, meta, link, script 등) -->

<TITLE> 기본구조 </TITLE>

</HEAD>

<BODY>                    <!-- HTML 문서의 본문 -->

본문내용

</BODY>

</HTML>                   <!-- HTML 문서의 끝 -->

 

 

<!DOCTYPE html> : 브러우저에게 문서 유형을 알려주는 선언

페이지 상단 html 태그 이전에 한번만 표시

 

<html> : HTML 문서의 루트(root) 요소를 정의

 

<head> : HTML 문서의 메타데이터(metadata)를 정의

- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미

- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현

 

<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용

- 웹 브라우저의 툴바(toolbar)에 표시

- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목

- 검색 엔진의 결과 페이지에 제목으로 표시

 

<body> : 웹 브라우저를 통해 보이는 내용(content) 부분

 

저작자표시 비영리 변경금지

'Dev > HTML' 카테고리의 다른 글

[HTML] 요소(Elemnet)의 구조  (0) 2023.03.01
[HTML] media  (0) 2023.02.25
[HTML] ifram 관련 태그  (0) 2023.02.25
[HTML] Link(링크)  (0) 2023.02.25
[HTML] Image(이미지)  (0) 2023.02.25
'Dev/HTML' Related Articles more