HTML(Hyper Text Markup Language)는 웹을 이루는 가장 기초적인 구성 요소이다.

html은 markup language로, programming language가 아니다.

 

1. HTML의 구성요소

  • 태그(tag) 

       여는 태그 = "<요소이름(+ 속성) >"

       닫는 태그 = "</태그 이름>"

  • 속성(attribute) : 태그가 태그의 이름만으로는 정보가 부족할 때, 속성을 통해 더 많은 의미를 부가할 수 있다. 속성은 순서와 관계없이 사용가능하다.

       "속성 이름" + "=" + "속성 값(value)"  , 속성은 순서 상관없이 사용가능하다.

  • 내용(content)  : 그냥 text
  • 요소(element) : 여는 태그 + 내용  + 닫는 태그

html 구성 요소

 

단, attribute는 다음을 항상 지켜야 한다.

1. 요소 이름 또는 이전 attribute와 한칸의 공백(space)

2. attribute name 뒤 "="

3. attribute value는 인용부호 " "로 감싸기

 

 

 

2. 부모와 자식 요소

  • 태그A가 태그B의 콘텐츠로 사용되면, 태그B는 태그A의 '부모요소', 태그A는 태그B의 '자식요소'라고 한다.

 

3. 빈 태그

<!-- '/'가 없는 빈 태그-->
<img>
<br>
  • HTML에는 닫는태그가 없는 태그들이 존재. 빈 태그는 공백 태그 또는 empty tag라고도 부른다.

빈태그 <img> : <img>태그는 </img>와 같은 닫는 태그 없이 단독으로 사용할 수 있다. 대신 이미지 주소 정보를 기입하는 src속성과 함께 사용해야한다.

ex) <img scr = "https://~~이미지주소~~">

 

빈태그 <br> : <br> 태그는 줄바꿈 기능을 주는 태그로, 닫는 태그 없이 단독으로 사용가능하다. <br/ >으로도 적을 수 있다. 이 경우에도 닫는 태그는 아니며 단독태그로, '/' 기호가 앞이 아닌 뒤에 붙는다.

 

 4. HTML문서의 범위

  • index.html 같은 HTML파일을 우리는 HTML문서라고 표현
  • HTML 문서의 범위를 나타내는(의미하는)태그는 <HEAD>, <BODY>, <DOCTYPE> 등이 있음

HTML 전체 범위

  • <html>는 HTML 문서의 전체 범위를 지정
  • 웹 브라우저가 해석해야할 HTML문서가 어디에서 시작하며, 어디에서 끝나는지 알려주는 역할

HEAD - 정보 범위

  • 웹 브라우저가 해석해야 할 HTML 문서의 정보 범위를 지정
  • 웹 페이지의 제목, 문자 인코딩 방식, 연결할 외부 파일의 위치, 등등 웹 페이지를 구조화하기 위한 기본 세팅 값들을 말함
  • 화면을 구성하기 위한 기본 설정

BODY - 구조 범위

  • 웹 브라우저가 해석해야 할 HTML 문서의 구조 범위를 지정
  • 사용자가 화면을 통해서 볼 수 있는 내용(콘텐츠)의 형태나 레이아웃 등을 의미
  • 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 입력창, 팝업, 광고 등등
  • BODY 범위 내에서만 생성

DOCTYPE - DTD, 버전 지정

  • DOCTYPE(DTD, Document Type Defination)은 마크업 언어에서 문서 형식을 정의
  • 웹 브라우저에 우리가 제공할 HTML문서를 어떤 HTML 버전의 해석 방식으로 구조화하면 되는지를 알려줌
  • HTML은 크게 1, 2, 3, 4, X-,5 버전이 있음
  • 현재 표준은 HTML5 버전

 

참고자료: https://velog.io/@inyong_pang/HTMLCSS-HTML-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95

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

CSS 선택자(class, id선택자)  (1) 2022.09.01
[CSS] CSS 기본문법  (0) 2022.08.24
[HTML] 웹서버 운영하기  (3) 2022.07.26
[HTML] 인터넷과 웹, 웹호스팅  (1) 2022.07.19

티스토리툴바