블로그 HTML 기본 태그 이해하기: p, a, head, script 용어 정리(초보자용)
블로그글을 쓰시다보면 여러이유로 html 코드를 봐야할때가 옵니다. 처음접하시는분들도 많으실텐데요. 복잡해보여서 포기하시는분들도 있으실듯 합니다. 이시간에는 기본 html 용어를 설명해볼텐데요. 도움이되실거라 확신합니다.
블로그 글을 쓸 때 대부분은 흰여백에 바로 글을 입력하지만, 가끔은 HTML 보기로 전환해야 할 때가 있습니다. 그때 보면 <p>, <a>, <div>, <head> 같은 낯선 태그들이 가득하죠. 이 글에서는 그런 HTML 용어를 예시와 함께 쉽게 설명해드리겠습니다.
1️⃣ <p> 태그 – 문단(Paragraph)
예시: <p>이 문장은 하나의 문단입니다.</p>
👉 <p>는 “paragraph(문단)”의 약자입니다. 글을 나누는 기본 단위로, 문장을 묶어주는 역할을 합니다. 블로그에서 줄 간격이나 문단 간 공백은 대부분 이 <p> 태그 덕분에 생깁니다.
2️⃣ <a> 태그 – 링크(Anchor)
예시: <a href="https://www.google.com">구글로 이동</a>
👉 <a>는 "anchor(닻)"을 의미하며, 클릭하면 다른 페이지나 사이트로 이동하게 만드는 태그입니다.
href는 링크 주소를 지정하는 속성으로, ‘Hypertext REFerence’의 약자입니다.
3️⃣ <head> 태그 – 페이지 정보 영역
예시: <head><title>내 블로그</title></head>
👉 <head>는 웹페이지의 “머리 부분”으로, 눈에는 보이지 않지만 브라우저와 검색엔진이 참고하는 정보를 담습니다.
대표적으로 <title>(페이지 제목), <meta>(검색엔진용 설명), <link>(CSS 연결) 등이 포함됩니다.
4️⃣ <body> 태그 – 실제 화면에 보이는 부분
예시: <body>이 부분이 블로그에 표시됩니다.</body>
👉 <body>는 사용자 눈에 직접 보이는 콘텐츠 영역을 의미합니다. 블로그의 글, 이미지, 버튼 등 대부분의 내용이 <body> 안에 들어갑니다.
5️⃣ <div> 태그 – 구역 나누기 (Division)
예시: <div>이 부분은 하나의 구역입니다.</div>
👉 <div>는 'division(구역)'의 약자로, 화면을 여러 부분으로 나눌 때 사용합니다. CSS를 이용해 디자인할 때 거의 모든 레이아웃의 기본이 되는 태그입니다.
6️⃣ <span> 태그 – 글자 일부 꾸미기
예시: <span style="color:red;">빨간 글자</span>
👉 <span>은 문장 중 일부 텍스트에 스타일을 적용할 때 사용합니다. 예를 들어 글자색, 글씨 크기, 강조 효과 등을 줄 때 유용합니다.
7️⃣ <script> 태그 – 자바스크립트 코드 삽입
예시: <script>alert('안녕하세요!');</script>
👉 <script>는 웹페이지에 동적인 기능을 추가할 때 사용합니다. 위 예시는 페이지가 열릴 때 “안녕하세요!”라는 알림창을 띄웁니다.
8️⃣ <img> 태그 – 이미지 삽입
예시: <img src="image.jpg" alt="이미지 설명">
👉 <img>는 이미지를 표시하는 태그이며, src는 이미지 주소, alt는 이미지가 안 보일 때 대신 표시할 문장입니다.
9️⃣ <meta> 태그 – 페이지 정보 설명
예시: <meta name="description" content="HTML 태그 기초 설명">
👉 <meta>는 검색엔진이 참고하는 정보(설명, 키워드 등)를 담는 태그입니다. 사용자에게 직접 보이진 않지만, SEO에 매우 중요한 요소입니다.
🔟 <title> 태그 – 페이지 제목
예시: <title>HTML 기본태그 배우기</title>
👉 <title>은 브라우저 탭 상단에 표시되는 제목이며, 검색 결과의 클릭 제목으로도 사용됩니다.
💡 정리
- <head>: 페이지의 숨은 정보 (제목, 설명 등)
- <body>: 실제 보여지는 내용
- <p>, <div>, <span>: 구조를 구성하는 기본 태그들
- <a>, <img>: 링크와 이미지 삽입용
- <script>, <meta>: 기능 추가와 SEO 정보용
이 정도만 알아도 블로그 HTML 편집 화면이 두렵지 않습니다 😊 앞으로 CSS와 자바스크립트까지 조금씩 이해하면 블로그 디자인을 자유롭게 다룰 수 있게 됩니다!
함께읽어보세요
블로거 사이트 속도 빠르게 하는법 (SEO와 수익에 직결되는 이유)
✅ 애드센스 승인 전 꼭 확인해야 할 체크리스트 5가지
댓글
댓글 쓰기