제목, 문단, 줄바꿈, 인용, 강조 등 HTML에서 글을 구성하고 표현하는 데 사용되는 다양한 태그들을 정리한 카테고리입니다. 문서 작성에 꼭 필요한 태그들의 역할과 활용법을 배워보세요.
HTML del / ins 태그, 웹에서 삭제와 추가를 정확하게 표현하는 법 웹사이트를 운영하다 보면 글을 수정하거나 가격을 바꾸는 일이 자주 발생합니다. 이때 단순히 글씨에 줄을 긋거나 밑줄을 긋는 것으로 끝내면 안 됩니다. 시맨틱 웹에서는 ‘삭제’와 ‘추가’의 의미를 정확하게 전달해야 합니다. 그 역할을 하는 태그가 바로 del과 ins입니다. 이번 글에서 이 두 태그를 완벽하게 알아봅니다. Step … 더 읽기
HTML sub과 sup 태그, 아래·위 첨자 제대로 쓰기 웹 페이지를 만들다 보면 단순한 글씨 표현을 넘어서, 위 첨자와 아래 첨자를 써야 할 때가 있습니다. 예를 들어, 수학 공식의 제곱 표현이나 화학식의 분자 수, 단위 표기에서 이런 경우가 자주 나오죠. 많은 사람들이 CSS로 글자 크기를 줄이고 위치를 조절해서 해결하려고 하지만, 시맨틱 웹의 관점에서 보면 이건 좋은 … 더 읽기
HTML small 태그, 작게 쓰는 게 전부일까? 웹 페이지를 만들다 보면 ‘덜 중요한 정보’를 표현해야 할 때가 있습니다. 예를 들어 저작권 안내나 부가 설명 같은 부분이죠. 이런 경우 단순히 글자를 작게 만드는 게 아니라, 의미까지 담아야 합니다. 대부분의 초보자는 글자를 작게 만들기 위해 CSS의 font-size를 사용하지만, 시맨틱 웹을 고려하면 더 좋은 방법이 있습니다. 바로 그 … 더 읽기
HTML에서 구분선을 넣는 태그, <hr> 완전 해부! 웹 페이지를 읽다 보면 ‘여기서 한 호흡 쉬어야겠다’ 싶은 지점이 있죠. 글의 분위기를 바꾸거나, 본문과 요약을 나누거나, 여러 항목을 정돈하는 데 꼭 필요한 것이 바로 구분선입니다. HTML에서는 이 구분선을 <hr> 태그 하나로 삽입할 수 있어요. 이름부터 직관적인데요, horizontal rule, 즉 수평선을 의미하죠. 단순한 선 한 줄이지만, 독자에게는 ‘이전 … 더 읽기
HTML에서 줄바꿈이 필요할 때 쓰는 태그, <br> 완전정복! 텍스트를 예쁘게 정리해 보여주고 싶었는데, 화면에서는 줄이 이어져 나와 당황해본 적 있으신가요? HTML에서는 우리가 엔터키를 눌러 줄을 바꿨다고 해서 그대로 표현되지 않아요. 이때 등장하는 게 바로 오늘의 주인공 <br> 태그입니다. 단순하지만, 알아두면 HTML 글쓰기가 훨씬 자연스러워져요! Step 1. <br> 태그는 어떤 역할을 할까? <br>은 break line의 줄임말로, … 더 읽기
HTML의 문단 태그 <p> 제대로 이해하기 HTML을 막 배우기 시작했다면 가장 먼저 마주하게 되는 태그 중 하나가 바로 <p>입니다. 문단을 나누는 역할을 한다고 간단히 설명되지만, 실제로는 꽤 다양한 기능과 규칙이 숨어 있습니다. 특히 콘텐츠를 보기 좋게 구성하는 데 중요한 역할을 하며, CSS와의 조합을 통해 웹페이지의 전체적인 분위기까지 바꿔줄 수 있어요. 그런데 많은 초보자들이 이 단순한 … 더 읽기
HTML 제목 태그 h1~h6, 제대로 알고 쓰자! 웹 문서를 만들다 보면 반드시 사용하는 것이 바로 제목 태그입니다. HTML에서는 제목을 표현할 때 <h1>부터 <h6>까지의 태그를 사용합니다. 숫자가 커질수록 글자가 작아지는데, 혹시 그냥 크기만 보고 아무거나 쓰고 계시진 않았나요? 단순히 ‘크기만 다른 제목’이 아니며, HTML 구조와 SEO에도 큰 영향을 미치는 요소입니다. 오늘은 이 h 태그들을 순서대로 살펴보고, … 더 읽기
HTML mark 태그 완전 정리 HTML mark 태그 완전 정리 – 의미 있는 형광펜 강조 웹 문서에서 특정 부분을 돋보이게 만들고 싶을 때 어떻게 하나요? 그냥 굵게만? 아니죠. 오늘은 독자의 시선을 사로잡는 비장의 무기, mark 태그를 제대로 살펴보겠습니다. 단순히 색칠하는 게 아니라, 의미 중심의 강조 태그라는 점에서 매우 유용합니다. 예제 1. 텍스트의 특정 부분 강조하기 … 더 읽기
HTML 의미 강조 태그 <em> 완벽 가이드 의미 강조는 <em>으로! 단순 기울임이 아닙니다 대화 중에 “진짜야!” 하고 말하는 그 순간처럼, HTML에서도 특별히 강조하고 싶은 단어는 있죠. 하지만 <b>보다 더 ‘의미 있는 강조’를 원할 땐, 바로 <em>을 써야 합니다. 이 태그는 단순한 스타일이 아닌, ‘의도된 강조’를 표현하기 위해 탄생했어요. 이 포스팅에서 진짜 쓰임새를 제대로 알아봅니다! 1. … 더 읽기
Step 3 – strong 태그 완전 이해 Step 3. 텍스트를 진하게! <strong> 태그 HTML에서 텍스트를 강조하고 싶을 때 가장 먼저 떠오르는 태그가 바로 <strong>입니다. 단순히 진하게 보이기만 하는 게 아니라, 웹 브라우저와 검색엔진, 심지어 화면낭독기에게도 “이 부분은 중요해!”라고 알려주는 태그입니다. 1. 기본 문법 <p>이건 일반 문장이고 <strong>이건 강조된 문장</strong>입니다.</p> 렌더링 예시 이건 일반 문장이고 이건 … 더 읽기