close

HTML 구조 소개: 기본 요소 및 구문

HTML 구조는 웹 페이지를 구축하는 데 중요한 역할을 합니다. 콘텐츠가 구성되고 웹 페이지에 표시되는 방식을 정의합니다. 기본 HTML 구조에 대한 소개는 다음과 같습니다.

1. Doctype

Doctype(Document Type Declaration)은 웹 페이지가 사용하는 HTML 버전을 정의합니다. HTML 파일의 시작 부분에 위치해야 합니다.

2. HTML 태그

html 태그는 모든 HTML 파일의 루트 요소입니다. 웹 페이지의 전체 내용을 캡슐화합니다.

3. head 태그

head 태그에는 브라우저에 직접 표시되지 않는 웹 페이지에 대한 정보가 포함됩니다. 여기에서 페이지 제목, 메타 태그, CSS 및 JavaScript 파일에 대한 링크 및 기타 다양한 요소가 정의됩니다.

4. body 태그

본문 태그에는 웹 페이지에 표시되는 모든 콘텐츠가 포함됩니다. 텍스트, 이미지, 비디오, 링크 및 기타 사용자 인터페이스 구성 요소와 같은 요소가 정의되는 곳입니다.

5. 중첩 태그

HTML은 여는 태그와 닫는 태그가 있는 계층 구조를 사용합니다. 하위 태그는 상위 태그 안에 배치됩니다. 예를 들어 p 태그(단락)에는 span 태그(인라인 텍스트), 강력한 태그(굵은 텍스트) 및 기타 여러 태그가 포함될 수 있습니다.

6. 공통 태그

HTML은 콘텐츠의 형식을 지정하고 표시하기 위한 다양한 태그를 제공합니다. 예를 들어 h1-h6 태그(제목), p 태그(문단), img 태그(이미지), 태그(링크) 등이 있습니다.

 

다음은 완전한 HTML 페이지 구조의 예입니다.

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

doctype 위의 예에는, html 태그, head 태그 및 body 태그 와 같은 주요 요소가 포함된 완전한 HTML 페이지가 있습니다. 헤드 섹션에서 사용할 페이지 제목, CSS 및 JavaScript 파일을 정의합니다. 본문 섹션에는 웹 페이지의 내용을 표시하는 머리글, 기본 및 바닥글과 같은 요소가 포함되어 있습니다.

 

올바른 HTML 구조를 사용하여 잘 구성되고 읽기 쉬운 대화형 웹 페이지를 구축할 수 있습니다.