[HTML] HTML 개념 정의 및 문법 정리

HTML(Hyper Text Markup Language)이란 웹사이트를 만드는 가장 기초가 되는 마크업 언어이며 웹페이지의 내용과 구조를 담당하는 언어로써 브라우저에게 정보를 어떤 형식으로 보여주어야 하는지를 전달해주는 역할을 한다.

마크업 언어(Markup Language)는 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종이다. 데이터를 기술한 언어라는 점에서 프로그래밍 언어와는 차이가 있다.

여는 태그(Opening tag): 이것은 요소의 이름과(이 경우 p), 열고 닫는 꺽쇠 괄호로 구성됩니다. 요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작합니다.
닫는 태그(Closing tag): 이것은 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 여는 태그(opening tag)와 같습니다. 이것은 요소의 끝(이 경우 단락의 끝 부분)에 위치합니다. 닫는 태그를 적어주지 않는 것은 흔한 초심자의 오류이며, 이것은 이상한 결과를 낳게됩니다.
내용(Content): 요소의 내용이며, 이 경우 단순한 텍스트이다.
요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고한다.

HTML의 속성의 사용

HTML 속성(attribute)은 요소 유형의 기본 기능을 수정하거나, 아니면 스스로 기능하지 못하는 특정한 요소 유형에 기능을 제공한다.

요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 되고, 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백이 있어야 합니다.
속성 이름 다음엔 등호(=)가 붙습니다.
속성 값은 열고 닫는 따옴표로 감싸야 합니다.

<!DOCTYPE html>
<html>
<head>
  <title>제목</title>
  <meta charset="utf-8" />
</head>
<body>
 
</body>
</html>

<!DOCTYPE html>부터 알아보겠습니다. 이건 태그처럼 생겼긴 한데 종료태그도 없고, 그렇다고 여는태그에 />가 붙어있지도 않습니다. 이것의 역할이 뭘까요? 바로 HTML5를 사용함을 브라우저에 알려주는 겁니다.

<html>: 전체 html 문서를 감싸는 태그입니다. 하나만 존재해야 하고 html 바깥에 DOCTYPE을 제외한 다른 태그가 있으면 안 됩니다.
<head>: html 문서에 대한 정보를 나타내는 부분입니다. 하나만 존재해야하고, html 바로 아래에 있어야합니다. CSS 문서를 불러오거나 JavaScript 문서를 불러올때 input tag, script tag등을 사용해 외부 문서를 가져올때 head tag안에 적용합니다.
<body>: html 문서에서 실제적으로 보여지는 부분을 나타냅니다. 하나만 존재해야 하고, html 바로 아래, head 다음에 위치해야 합니다.
<title>: head 안에 들어가는 태그로 제목표시줄의 내용을 나타냅니다. 제 블로그의 title은 "꾸준히해보자"입니다. 하지만 현재보고있는 페이지는 "[HTML] HTML 개념 정의 및 문법 정리"로 설정되어있습니다.

브라우저란 HTML 문서와 그림, 멀티미디어 파일등 월드 와이드 웹을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용 프로그램의 총칭

인용 문서

[HTML] <!DOCTYPE> (0)	2021.06.08
[CSS] BEM이 뭘까 (0)	2021.03.25
[CSS] Box model - inline과 Block의 차이점 (0)	2021.03.18
[HTML]Semantic HTML가 뭐길래 중요한데? (0)	2021.03.18

기록좀하자 인마