티스토리 뷰

[html5]

[html] html 이란?

코딩-noob 2021. 8. 25. 14:14

Hyper Text Markup Language 의 약자로 표시됩니다. 

 

Ted Nelson 이라는 사람에 의해 정의된 용어 이며 쉽게 말한다면 링크입니다. 

 

윗줄에 Ted Nelson 이라는 텍스트가 Hyper Text(하이퍼텍스트) 입니다. 

 

하이퍼텍스트에 이어서 Markup Language 라는건 

 

컴퓨터 언어 라는 뜻이고 쉽게 말하자면 <html> 이처럼 <>로 가두어진 텍스트를 태그(tags)라고하는데 이것이 마크업 언어입니다.

 

 

 

참고!

두개는 Angle bracket 이라고 불립니다.

 

<                   Left angle bracket 

>                   Right angle bracket

 

 

 

 

F12나 마우스 오른쪽 클릭 - 검사를 눌러서 열수있는 콘솔 창입니다. 

위 사진 처럼 Elements 항목에 가시면 html 구조를 볼 수 있습니다.

첫줄에 보면 

<!DOCTYPE html>

이 있습니다. 이는 최신 버전인 html5의 문서를 작성하겠다는 선언을 해준것입니다.

다른 버전의 html 선언을 해줄경우 html5 버전의 기능을 사용할 수 없습니다.

예를 들면 최신 기능인 semantic tag를 사용할 수 없는 경우가 발생 합니다.

주의! 현재 블로그가 작성되는 기준 2021년 8월 27일 기준 html5 가 최신 버전입니다.

 

 

다음줄로 넘어가서 <html lang="ko"> 가 있습니다. 

 <html은 문서의 본격적인 시작을 알리는 것이고 lang은 적용되는 언어를 뜻합니다. 

눈치가 있으신 분이시라면 lang은 language라는걸 유추 하실 수 있습니다.

="ko"는 korean 입니다.

참고로 영어는 "en"입니다. 다른언어가 궁금하시면 검색 추천드립니다.

 

 

<html>은 가장 최상단(<!DOCTYPE html>다음)에 위치해 있어야 하고 루트 요소라고도 불립니다.

lang을 넣지 않아도 되지만 그럴경우 언어 규약에 따른 다른 옵션들을 사용 불가능합니다.

페이지의 번역이라든지 또는 검색 언어 우선순위 라던지 화면을 리딩해주는 기능의 사용이 제한됩니다.

 

 

다음으로 <head>입니다. 이 tag는 보이는 페이지에 표시되지 않는 기능들을 구현합니다.

<head>에 들어가는 주요한 기능은 메타데이터를 넣어주는 것입니다. 

메타데이터란 데이터의 데이터를 의미하고 html의 데이터입니다. 

말이 어려워 졌는데 쉽게 말해서 html의 정보를 기입하는거라고 생각하시면 됩니다.

 

 

 

<head>의 주요한 tag

 

1. <title>

<title>은 <head>의 자식 엘리먼트(종속된 하위 태그의 개념)이고 홈페이지의 제목을 보여줍니다.

MDN 에서는    'HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다.'

라고 되어있습니다만 <title>은 페이지에서 보입니다.

 

 

 

 

 

위 그림은 크롬으로 MDN 페이지를 연것인데 그림의 우측상단을 보시면 페이지의 제목이 있습니다.

콘솔창 아래 <title>head 태그에는 무엇이 있을까? HTML의 메타데이터 - Web 개발 학습하기 | MDN</ title>

즉 <title> 태그로 홈페이지에 노출되는 제목을 설정 할 수 있습니다.

 

 

 

2. <meta>

메타에는 다양한 기능이 있습니다. 기본  html 설명이라 다음에 자세하게 블로깅 해보도록 하겠습니다.

 

 

 

 

다음은 페이지에 직접 표시되는 주요한 태그인 <body>입니다.

<body>태그는 다양한 태그들로 마음껏 프로그래머가 조종할 수 있고 실질적으로 눈에 보여지므로 

바로바로 피드백할 수 있고 재미있습니다!

요약하자면 

 

<!DOCTYPE html>

  <html>
    <head>

    </head>

    <body>

    </body>

  <html> 

 

이것이 html의 기본구조 태그 라고 할 수 있습니다.

 

 

 

 

 

728x90

'[html5]' 카테고리의 다른 글

[html] meta tag  (0) 2021.08.30
[html] 시멘틱 태그(semantic tag)란?  (0) 2021.08.26
[html] html 태그 문법  (0) 2021.08.26
[html] Hyper text 링크 걸기  (0) 2021.08.26
[html] html 에서 띄어쓰기 하는법  (0) 2021.08.07
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함