■HTML 기본 작성법

  • HTML5 문서는 반드시 <!DOCTYPE html>로 시작하여 문서 형식을 HTML5로 지정한다.
  • 실제적인 HTML 문서는 <html>과 </html> 사이에 기술한다.
  • <head>와 </head> 사이에는 문서 제목, 외부 파일 참조, 메타데이터의 설정 등을 기술한다.
  • 웹브라우저에 보여지는 모든 요소는 <body>와 </body> 사이에 기술한다.

[코드]

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>
    	<h1>Hello World</h1>
        <p>안녕하세요! HTML5</p>
    </body>
</html>

[결과]

Hello World

Hello World

안녕하세요! HTML5

 

■작성시 추천 에디터

  • HTML 문서는 .html 확장자를 갖는 순수 텍스트 파일이다.
  • 메모장으로도 편집 가능하지만, 에디터를 사용하면 다양한 편의 기능을 제공받을 수 있다.
  • 추천 에디터는 다음과 같다.
    • Visual Studio Code(플러그인 풍부하고, 가벼우므로 주류이다.)
    • WebStorm
    • Atom
    • Brackets
    • Sublime text

■HTML 기본 문법

  1. 요소(Element) : HTML의 요소에는 시작과 종료 태그와 그 사이에 위치한 콘텐츠로 구성되며, HTML 문서는 요소들의 집합으로 구성된다.
    1. 요소의 중첩(Nested Element)
      • 요소는 다른 요소를 포함 가능한데, 이 때에 중첩 관계가 성립된다.
      • 중첩 관계를 통해, 정보의 구조화와 문서의 구조 표현이 가능하다.
      • 중첩 관계를 파악하기 쉽도록, 들여쓰기(Indent)를 활용해야 한다.
    2. 빈 요소(Empty Element)
      • 콘텐츠를 가질 수 없고, 필요도 없는 요소를 빈 요소라 한다.
      • 대표적인 빈 요소
        • br : 줄 바꿈
        • hr : 수평선
        • img : 이미지
        • input : 유저로부터 정보를 수용
        • link : 해당 HTML 문서와 외부 리소스의 관계를 정의
        • meta : 해당 HTML 문서의 메타데이터를 기술
  2. 속성(Attribute) : 요소는 속성을 가질 수 있는데 이는 요소의 성질, 특징을 정의하는 명세이며, 요소에 추가적인 정보를 제공한다. ex) <img src="html.jpg" width="104" height="142"> = <태그 속성명="속성값" ...>
    1. 글로벌 속성(HTML Global Attribute)
      • 대체로 모든 HTML 요소에게 공통적으로 사용 가능한 속성이다.
      • 대표적인 글로벌 속성
        • id : 중복 지정이 불가능한 유일한 식별자를 요소에 지정한다.
        • class : 중복 지정이 가능하고 스타일시트에 정의된 class를 요소에 지정한다.
        • hidden : CSS의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않는다.
        • lang : 검색엔진의 크롤링 시, 웹페이지의 언어가 인식 가능하도록, 지정된 요소의 언어를 지정한다.
        • style : 요소에 인라인 스타일을 지정한다.
        • tabindex : 유저가 키보드로 페이지를 내비게이션 시, 이동 순서를 지정한다.
        • title : 요소의 제목을 지정한다.
  3. 주석 : 개발자에게 코드를 설명하는 것이 목적이며, 브라우저 화면에는 표시되지 않는다. ex) <!--주석-->

출처 : https://poiemaweb.com/html5-syntax

 

HTML5 Introduction & Syntax | PoiemaWeb

HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. 조금 더 자세히 말하면 웹페이지의　내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하

poiemaweb.com

 

반응형
저작자표시

'■　웹 개발 > HTML' 카테고리의 다른 글

웹페이지 구성에 관한 태그  (0) 2022.06.27
시맨틱 웹(Semantic Web)이란?  (0) 2022.06.20
HTML이란?  (0) 2022.06.17
웹 컴포넌트란?  (0) 2020.11.10
DOM이란?  (0) 2020.11.09

+ Recent posts

티스토리툴바