HTML이란? HTML의 기본, 태그!

HTML (HyperText Markup Language)

HTML은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용한다.

'HyperText(하이퍼텍스트)'란 웹페이지를 다른 페이지로 연결하는 링크,

'Markup(마크업)'이란 웹 브라우저에 표시되는 글, 이미지 등의 다양한 컨텐츠를 표시하는 것을 말한다.

이름에서부터 알 수 있듯이, HTML은 웹 브라우저에 정보 콘텐츠를 전달하기 위한 마크업 언어이지, 프로그래밍 언어가 아니다! "HTML is not a programming language" MDN 사이트에도 명시되어 있다.

*HTML 뿐만 아니라 웹 개발을 공부하다보면 '문서', 'document'라는 말을 많이 본다. 모두 HTML 파일을 가리키는 거라고 생각하면 된다.

HTML 마크업은 '태그'로 구분하고, 하나의 태크로 표시된 콘테츠는 하나의 "요소(elements)"가 된다.

쉽게 말해 새로운 요소를 만들고 싶을 때 태그를 사용한다!

태그는 <body> 처럼 요소 이름을 부등호( < > ) 사이에 넣어서 구성한다. 태그를 열었다면 (opening tag) 반드시 태그를 닫아야 한다 (closing tag). 닫는 태그는 요소 이름 앞에 슬래시( / )로 표시한다.

<tag> : opening tag

</tag> : closing tag

* 예외! "빈 요소(empty elements)"의 경우 닫는 태그가 필요하지 않고, 사용해서도 안된다. 빈 요소란 자식 요소를 가질 수 없는 요소를 말한다. <img>, <input>, <meta>, <link>, <br>, <hr> 등등..

<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

하지만 빈 요소 태그 중에서도 태그 끝에 슬래쉬를 사용하는 태그들도 있다..!

<img src="./images.png" alt="image" />
<input type="text" />

이런 태그는 일일이 외울 필요는 없고, 사용하다보면 자연스럽게 익혀지는 것 같다.

태그 안의 요소명은 대소문자를 구분하지 않는다. 대문자, 소문자, 아니면 둘을 섞어서도 작성할 수 있다. <TITLE>, <title>, <Title> 근데 보통 대문자나 소문자 중 하나로 통일하고, 한 파일안에서는 일관되게 사용하는 것이 코드 가독성에 좋다.

소문자를 사용한다면 처음부터 끝까지 소문자만!

attribute은 태그를 확장해 동작 방식을 바꾸거나 추가 정보를 제공한다.

태그 안에서 name="value" 형태로 작성한다.

<a href="#"> Link </a>
<p lang="ko"> 안녕! </p>

요소마다 사용할 수 있는 특정 attribute가 있기도하고, 공통적으로 사용할 수 있는 attribute도 있다. 이것도 사용하면서 자연스럽게 익히고, 그때그때 찾아가며 사용하면 된다.

[HTML] 앵커 태그로 하이퍼링크 만들기 ( <a> ) (0)	2021.02.06
[HTML] 강조, 인용, 출처 태그 ( <em>, <strong>, <blockquote>, <q>, <cite> ) (0)	2021.02.06
[HTML] 제목, 문단, 컨테이너 태그 ( <h1>, <p>, <div>, <span> ) (0)	2021.02.05
[HTML] <head> 태그와 <body> 태그 채우기 ( <title>, <link>, <style>, <meta>, <script> ) (0)	2021.02.04
[HTML] <!DOCTYPE html> 선언과 문서 구조, 부모・자식・형제 요소 (0)	2021.02.03