mirabo01 님의 블로그

HTML을 ‘잘’ 쓴다는 건 단순히 화면에 보이는 걸 만드는 게 아니다.검색엔진, 보조기기, 개발자, 브라우저가 모두 이해할 수 있는 구조로 작성해야 한다.이번 글에서는 HTML5의 핵심 개념인 시맨틱(Semantic) 태그를 중심으로,의미 기반의 문서 설계 방법을 완벽히 정리해본다.💡 1. 시맨틱 태그란 무엇인가?“시맨틱(semantic)”이란 ‘의미 있는’이라는 뜻이다.HTML5 이전에는 모든 영역이 와 으로만 구분됐다.하지만 이렇게 작성된 페이지는 컴퓨터가 내용을 이해하지 못한다.예를 들어 👇 이건 브라우저에게 “여기가 무엇을 의미하는지” 아무런 정보를 주지 않는다.반면에 👇 이 코드는 구조적 의미를 전달한다.검색엔진, 스크린리더, 크롤러가“이건 페이지의 상단 / 본문 / 하단”임을..

이전 편에서 HTML의 기본 구조를 배웠다면,이번에는 웹을 ‘보이게’ 만드는 핵심인 콘텐츠 태그를 다뤄보자.HTML의 본질은 콘텐츠를 구조화하고 표현하는 것이다.이 글에서는 텍스트, 이미지, 링크, 목록 등가장 자주 쓰이는 태그들을 실무 중심으로 완전히 정리한다.💡 1. 텍스트 관련 태그 — 웹페이지의 뼈대를 이루는 요소웹의 모든 콘텐츠는 텍스트에서 시작된다.HTML은 단순한 문단부터 제목 구조까지 다양한 텍스트 태그를 제공한다.🔹 제목 태그 ~ 문서의 계층 구조를 나타내는 태그로,이 가장 중요하고 로 갈수록 하위 단계다.HTML 기본 태그 완전 정리 텍스트 관련 태그 문단과 줄바꿈 💡 SEO 핵심 포인트한 페이지에는 은 1개만제목 구조는 문서 계층을 명확히 보여줌검색엔진은 h1~h3까지를 주요 ..

“HTML은 웹의 시작이자 끝이다.”모든 웹사이트, 블로그, 앱 화면의 기본 구조는 HTML로 만들어진다.이번 글에서는 HTML이 무엇이고, 어떻게 동작하며,실무에서 HTML을 ‘잘’ 쓰려면 어떤 점을 알아야 하는지기초부터 완벽히 정리해본다.💡 1. HTML이란 무엇인가?“HTML은 웹페이지의 구조를 정의하는 언어다.”HTML은 HyperText Markup Language의 약자다.HyperText: 링크를 통해 문서끼리 연결되는 구조Markup: 태그(tag)로 문서의 의미를 표시Language: 웹 브라우저가 이해할 수 있는 문법💬 즉, HTML은 “웹페이지의 뼈대와 의미”를 담당한다.디자인은 CSS가, 동작은 JavaScript가 맡는다.HTML은 ‘내용을 구조화’하는 언어다.🧱 2. HTM..