Web/html

HTML 기본구조

csmoon 2021. 8. 15. 16:47
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>HTML Structure</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>

  • 지금 작성하는 문서가 html5의 버전으로 작성 되었다고 웹 브라우저에 알리는 것

<html></html>

  • html 코드로 작성된 문서임을 알리는, 즉 html의 시작과 끝을 알리는 태그
  • 웹 브라우저는 <html> 태그를 보고, 뒤따르는 HTML 코드를 해석해서 웹에 표현한다.

<head></head>

  • html의 head, 즉 html문서의 머리글을 나타내는 태그
  • 문서 제목, 문자코드(인코딩)와 같이 해당 문서의 정보를 담고 있으며,
  • '메타 데이터의 집합'으로 웹 브라우저에 직접적으로 나타나지 않는 정보다.

* 메타데이터 : 데이터에 대한 데이터

<body></body>

  • html의 body, 즉 html문서의 몸통, 본문을 나타내는 태그
  • 웹 브라우저 화면에 나타나는 정보로 실제 내용에 해당한다.

요소 (Element)

  • HTML 요소는 시작 태그와 종료 태그 그리고 태그 사이에 위치한 내용으로 구성

                    태그는 컨텐츠(내용)를 감싸는 것으로 그 정보의 성격과 의미를 정의

                    <start tag> content </end tag>

 

  • 요소(element)는 중첩(nested)될 수 있다.

                   요소의 중첩을 통해 하나의 문서를 구조화

                   여는 태그와 닫는 태그의 쌍을 잘 확인해야한다.

                   잘못 작성하여도 오류를 반환하는 것이 아니라,

                   그냥 레이아웃이 깨진 상태로 출력되기 때문에, 디버깅이 힘들어 질 수 있다.

 

  • 내용이 없는 태그들

                   br, hr, img, input, link, meta

 

속성 (Attribute)

  • HTML에게 추가적인 정보나 명령을 받을 수 있게 정보들을 전달해준다.
  • 속성명, 속성값으로 이루어진다.

                    <herf="https://google.com"></a>                   

                    herf : attribute name (속성명)

                    https://google.com : attribute value(속성값)

 

  • 태그별로 사용할 수 있는 속성은 다르다.
  • 태그와 상관없이 사용 가능한 속성(HTML Global Attribute)들도 있다.
  • 요소는 속성을 가질 수 있으며, 경로나 크기와 같은 추가적인 정보를 제공
  • 요소의 시작 태그에 작성하며 보통 이름과 하나의 쌍으로 존재(아닌 것도 있다.)
  • 공백은 No!!! " ", 쌍따옴표 사용!!!

                    (* 필수적인 것은 아니지만, 암묵적 규칙)

 

HTML Global Attribute

모든 HTML 요소가 공통으로 사용할 수 있는 속성(몇몇 요소에는 아무 효과가 없을 수 있다.)

id, class, hidden, lang, style, title 등

참고 : https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes

 

전역 특성 - HTML: Hypertext Markup Language | MDN

전역 특성(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 그러나 일부 요소에는 아무런 효과도 없을 수 있습니다.

developer.mozilla.org

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello, HTML</title>
</head>
<body>
    <!-- 이것은 주석입니다. -->
    <h1>
        My first HTML
    </h1>
    <p>
        This is main contents.
    </p>
    <span>This is inline elements</span>
    <a href="https://google.com">Go google!!</a>
</body>
</html>

'Web > html' 카테고리의 다른 글

HTML 실습  (0) 2021.08.15
HTML 문서 구조화  (0) 2021.08.15
HTML 시맨틱 태그(Semantic Tag)  (0) 2021.08.15
HTML이란?  (0) 2021.08.15