HTML 소스 보기 | 페이지 원본 소스·메타태그·구조 분석

HTML 소스 보기란?

HTML 소스 보기는 웹서버가 브라우저에 전달한 HTML 마크업을 확인하는 기능입니다. 문서의 제목, 메타태그, 본문 구조, 링크, 이미지 경로, 스타일시트와 JavaScript 파일 연결 상태를 확인할 때 사용합니다. 개발자는 오류 원인을 찾거나 다른 페이지의 구조를 학습할 때 활용하고, 콘텐츠 운영자는 검색엔진에 전달되는 제목·설명·Canonical·robots 설정을 점검할 때 활용할 수 있습니다.

페이지 소스와 개발자도구 Elements의 차이

페이지 소스는 처음 내려받은 HTML을 중심으로 보여줍니다. 반면 개발자도구의 Elements 탭은 브라우저가 HTML을 해석해 만든 DOM과 JavaScript 실행 뒤 변경된 현재 구조를 보여줍니다. 따라서 React, Next.js, Vue처럼 JavaScript로 화면을 갱신하는 사이트에서는 두 결과가 다를 수 있습니다.

HTML 소스 보는 방법

확인할 웹페이지 URL을 입력합니다.
URL 소스 가져오기·분석 버튼을 누릅니다.
서버가 받은 원본 HTML과 HTTP 응답 정보, 메타태그와 문서 구조를 확인합니다.
보유한 HTML 파일이나 코드는 HTML 붙여넣기·분석 탭에서 직접 점검합니다.

URL 소스 가져오기는 어떻게 동작하나요?

브라우저에서 외부 도메인의 HTML을 직접 요청하면 동일 출처 정책과 CORS 설정에 의해 응답을 읽지 못할 수 있습니다. 이 도구는 같은 사이트의 Next.js API Route가 대상 URL에 서버 요청을 보내고, 반환받은 HTML 문자열만 브라우저로 전달합니다. 요청 과정에서는 http·https 프로토콜, 공개 IP 여부, 리디렉션 주소, 응답 시간과 크기, 문서 형식을 검사합니다.

HTML 분석에서 확인할 항목

Title과 Description: 페이지 주제와 검색결과 설명을 확인합니다.
H1~H6 헤딩: 제목 단계가 자연스럽게 구성되어 있는지 확인합니다.
Canonical과 Robots: 대표 URL과 색인 허용 여부를 확인합니다.
링크: 내부·외부 링크, 빈 링크 텍스트, rel 속성을 점검합니다.
이미지: src 경로와 alt 대체 텍스트 누락을 확인합니다.
스크립트와 JSON-LD: 외부 JavaScript와 구조화 데이터 포함 여부를 확인합니다.

붙여넣은 HTML은 어떻게 처리되나요?

입력한 HTML은 현재 브라우저 안에서만 분석합니다. 분석 과정에서 src, href, action 같은 외부 리소스 속성을 임시 속성으로 바꾼 뒤 문서 구조를 읽기 때문에 이미지, 스크립트, 스타일시트, 폼 전송 대상에 자동으로 접속하지 않습니다. HTML을 실제 페이지로 렌더링하지 않으며, 포함된 JavaScript도 실행하지 않습니다.

주의사항

이 도구의 구조 점검은 자동 진단이며 검색 순위나 웹표준 통과를 보장하지 않습니다.
로그인, 쿠키, 사용자 세션이 필요한 비공개 페이지의 내용은 가져오지 않습니다.
정리된 HTML은 읽기 편하게 들여쓰기를 보정한 결과이며 원본과 공백 구조가 달라질 수 있습니다.
링크·이미지·스크립트 상세 표는 성능을 위해 종류별 최대 300개까지만 표시하며, 상단 통계에는 전체 개수를 표시합니다.
JavaScript 실행 후 만들어진 DOM은 브라우저 개발자도구의 Elements 탭에서 확인하세요.
대상 사이트의 이용약관과 robots 정책을 확인하고 과도한 반복 요청은 피하세요.

자주 묻는 질문

Q. 모바일에서도 HTML 소스를 볼 수 있나요?
A. 네. URL을 입력하면 서버가 HTML을 가져오므로 모바일 브라우저에서도 같은 방식으로 소스와 분석 결과를 확인할 수 있습니다.
Q. 다른 사이트의 HTML을 수정할 수 있나요?
A. 원본 소스 보기는 읽기 전용입니다. 개발자도구에서 일시적으로 DOM을 수정할 수는 있지만, 새로고침하면 원래 상태로 돌아가며 실제 서버 파일은 변경되지 않습니다.
Q. HTML 소스에 원하는 문장이 없는데 화면에는 보입니다.
A. JavaScript가 API 데이터를 받아 나중에 화면을 만들었을 가능성이 있습니다. 이 경우 페이지 소스보다 Elements, Network, Sources 패널을 함께 확인해야 합니다.