본문 바로가기
{Programing}/Web Front

HTML - 기본 구조

by 탱타로케이 2020. 3. 11.

HTML은 태그로 시작해서 태그로 끝나야한다.

열리는 태그 <태그태그> + 닫히는 태그 </태그태그>

태그에는 속성이 붙을수 있다. 

태그별 속성은 천차만별이니 공식문서를 확인하며 찾아쓰자.

요기서 www.w3schools.com/tags/default.asp

 

HTML Reference

w3schools.com --> THE WORLD'S LARGEST WEB DEVELOPER SITE

www.w3schools.com

<!DOCTYPE html>
<!--문서형식 정의 이 문서가 HTML이라고 브라우저에 알림-->

<html lang = "ko">
<!--사용될 언어가 한국어라고 알림.-->
	<head>
    <!--제목표시줄에 들어갈 제목 부분 가장 먼저 실행되며 필요한 설정및 타 문서들을 불러옴.-->
    	<meta charset="utf-8">
        <title> Test HTML </title>
	</head>
    <body>
    <!--웹페이지 본문으로 컨텐츠가 들어갈 부분. CSS, JS 들이 적용되여 컨텐츠를 만드는 부분-->
    	<h1>페이지 제목</h1>
        <p>본문</p>
        
        <a href="https://server-workshop.tistory.com/">홈으로</a>
        
    </body>
</html>

 

DTD(Doctype) : 문서의 형식을 지정한다. 원하는 HTML버전마다 작성내용이 다르나, 현재는 HTML5의 내용인 html이면 끝.

 

<head> : HTML 문서의 정보를 담는 태그. 코드상 딱 하나만 존재. <html>태그 바로 밑에 존재.

metadata를 담는 구역. 이 웹페이지의 데이터를 설명or 구성할 데이터를 말함.

 

<meta> : 문서 관련 정보를 담는 태그. 문자 인코딩 방식이나 검색어등등 여러가지.

이 태그의 속성을 통해 정보를 담음.

페이지의 문자열이 깨진다면 여길 제일 먼저 확인해볼것.

리디렉션같은 기능도 가능.

 

<title> : 제목 표시줄에 나타날 웹페이지 제목을 지정하는 태그.

 

<body> : 브라우저에 표현되는 영역. 코드상 딱 하나만 존재.

<h1> : 제목 표시 태그. 중요도 1~6까지 존재. 

<p> : 단락 표시 태그. 본문, 글을 해당하는 내용.

<a> :  하이퍼링크 태그. 속성으로 href 를 작성하여 웹페이지를 바로 링크할수 있다.

 

'{Programing} > Web Front' 카테고리의 다른 글

HTML - escape  (0) 2021.04.21
HTML - iframe  (0) 2021.04.21
HTML - table, image, list, form, input  (0) 2021.04.21
HTML - 레이아웃  (0) 2020.03.11
HTML  (0) 2020.03.11

댓글