HTML means Hypertext Markup Language. This post aims to provide a basic introduction to using DevTools(Ctrl + Shift + i / F12), helping web development beginners gain a fundamental understanding of the tool.
본 포스팅의 목적은 개발자 도구의 [Elements] 탭을 잘 이해하기 위함이다.
Overview
- <!DOCTYPE html> : DOCTYPE stands for DOCument TYPE. This tells the browser about the page's format and version.
- <html> : Wrapping the complete HTML document with </html> tag.
- <head>
- Enclosed by <head> and </head> tags.
- Not visible to users.
- contains tags like <title>, <link> etc.
- <body>
- Enclosed by <body> and </body> tags.
- Visible to users
- contains tags like <h1>, <p>, <div> etc.
- <head>
Example
<!DOCTYPE html>
<html>
<head>
<title>This is my first post.</title>
</head>
<body>
<h1>Learn HTML Basic Structure in Minutes: Tags & Elements</h1>
<p>HTML means Hypertext Markup Language.</p>
</body>
</html>
<!DOCTYPE html>으로 페이지 형식을 웹 브라우저에 선언한다. 그 후 <html>로 전체 document를 감싸주는데, 크게 <head>와 <body> 두 부분으로 구성된다. <head>부분은 내가 지정하는 정보고, 유저에게는 보이지 않는다. <body>부분이 유저에게 보이는 정보이다.
Body Tags
- Heading Tags : <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
- Paragraph Tag : <p> ... </p>
- Line Break Tag : <br />
- Centering Content : <center>
- Division content : <div> ... </div>
- just creates block-level containers
Heading tags(제목) , Paragraph tag(문단), Line break tag(줄 구분), Centering content(가운데 정렬), Division content(블록 구분) 으로 생각하면 편하다.
Elements
Starting tags(such as <p>, <div>, and <h1>) define HTML elements(such as <p> ... </p>, <div> ... </div> and <h1> ... </h1>). The term "elements" in HTML can be interpreted as "chunks" or "building blocks" that make up a web page.
starting tag로 정의되며, 정의된 전체 덩어리를 element라고 생각하면 된다.
Example
<h1>Learn HTML Basic Structure in Minutes: Tags & Elements</h1>
'Web' 카테고리의 다른 글
| Level Up Your HTML Skills: A Tistory Devtools Deep Dive / 티스토리 HTML 태그 분석하기 (0) | 2024.03.10 |
|---|---|
| Web Scraping 101: Getting Started with Web Data Collection in Python / 초보자를 위한 웹 스크래핑 (0) | 2024.03.07 |
