HTML/본문

단락

단락을 나내려면 p 요소(Paragraph의 약칭)을 시용한다. 대부분의 웹사이트에서는 단락을 나타내기 위해서 br 요소를 사용하고 있지만 이 용법은 HTML의 올바른 사용법이 아니며 계속되는 br 요소는 일부 브라우저에서는 정리되어서 하나의 새로운 행으로 표시되어 버린다.

Strict에서는 body 요소 바로 아래에 블록 요소를 두어서 그 중에 본문을 적을 필요가 있으며 body 요소 바로 아래에 본문 텍스트를 적어서는 안된다.

예시

입력

<p>집에 돌아가면, 학수고대하던 간식을 먹을 수 있었다. 일이 없어서 컴퓨터를 켜서 이 웹 일기를 적고 있다. </p>
<p>오늘은 전에 샀던 자료도 참고해서 위키백과에 항목을 하나 올려보고자 한다. 일단 몇시간 소요될려나...</p>

출력

집에 돌아가면, 학수고대하던 간식을 먹을 수 있었다. 일이 없어서 컴퓨터를 켜서 이 웹 일기를 적고 있다.

오늘은 전에 샀던 자료도 참고해서 위키백과에 항목을 하나 올려보고자 한다. 일단 몇시간 소요될려나...

문단 머릿글

문단의 머릿글을 나타내려면 h1 ~ h6 요소(Heading의 약칭)을 사용한다. 보다 하위 수준의 문단의 머릿글을 사용할수록 h 뒤에 붙는 숫자를 늘려간다. 일반적인 브라우저에서는 문자 크기나 문자 굵기가 바뀌지만 이 요소를 굵을 글씨를 목적으로 사용해서는 안된다.

예시

입력

<h1>대한민국</h1>
<p>대한민국은 아시아의 동쪽 방향에 있는 나라이다.</p>
<h2>언어</h2>
<p>한국어를 모국어로 하며 외국어로는 영어, 제2외국어로는 일본어, 중국어 등이 많이 사용된다.</p>
<h3>한국어 표준어</h3>
<p>표준어는 북한에서는 문화어라고 한다.</p>

출력

대한민국

대한민국은 아시아의 동쪽 방향에 있는 나라이다.

언어

한국어를 모국어로 하며 외국어로는 영어, 제2외국어로는 일본어, 중국어 등이 많이 사용된다.

한국어 표준어

표준어는 북한에서는 문화어라고 한다.

인용과 출처

인용을 나타내려면 blockquote 요소 또는 q 요소(Quotation의 약칭)를 사용한다. blockquote 요소는 블록 레벨의 인용에 사용해서 q 요소는 인라인의 인용에 사용한다. 두 요소에 대해서, 출처 URI을 나타내는 것으로 cite 속성이 그 제목을 나타내는 것으로 title 속성을 사용할 수 있다. 또, 출처 혹은 참조처를 나타내는 것으로 cite 요소가 있다. 그 요소로 감싼 츨차를 나타내기 위해서 사용한다.

일반적인 브라우저에서는 blockquote 요소는 좌우에 들여쓰기가 있는 상태이며 q 요소는 인용부로 묶은 상태(일부 환경에서는 대응하지 않음)이며 cite 요소는 이탤릭체로 표시된다. 또한,좌우에 공백을 넣기 위해서 blockquote 요소룰 사용하는 경우도 있지만 이는 부적절하며 환경에 따라서 그 내용이 인식되기 어렵다. 스타일 시트를 사용해서 공백을 취하는 것이 바람직하다.

예시

입력

<p>위키미디어 재단에 대해서 <cite>위키백과</cite>에서는 아래와 같이 설명하고 있다.</p>
<blockquote cite="http://ja.wikipedia.org/wiki/위키미디어" title="위키미디어 - 위키백과, 우리 모두의 백과사전">
<p>위키미디어 재단(Wikimedia Foundation Inc.)은 위키백과 같은 각종 위키 관련 사이트를 관리하는 비영리 단체이다. 
2003년 6월 20일 지미 웨일스가 미국 플로리다주 세인트피터즈버그에서 설립하였다. 플로리다주의 법률에 의하여 조직되었고, 2007년에 본거지를 캘리포니아주 샌프란시스코로 이전하였다.</p>
<p>재단의 설립 목적은  교육적 콘텐츠를 수집, 개발하고 그것을 효과적으로 전 세계에 전파하는 것이라고 하고 있으며, 자유 저작물과 위키를 기반으로 한 프로젝트를 개발, 유지하고, 이러한 프로젝트의 콘텐츠의 전체를 무료로 대중에게 제공하는 것을 사업으로 하고 있다.</p>
</blockquote>
<p>위키백과는 원래 지미 웨일스의 영리 사업인 바미스의 재정 지원을 받아 운영되었다. 위키백과가 바미스로부터의 재원을 고갈시키자 웨일스와 생어는 프로젝트의 재원을 마련하기 위하여 자선 사업 모델을 떠올렸다.</p>

출력

위키미디어 재단에 대해서 위키백과에서는 아래와 같이 설명하고 있다.

위키미디어 재단(Wikimedia Foundation Inc.)은 위키백과 같은 각종 위키 관련 사이트를 관리하는 비영리 단체이다. 2003년 6월 20일 지미 웨일스가 미국 플로리다주 세인트피터즈버그에서 설립하였다. 플로리다주의 법률에 의하여 조직되었고, 2007년에 본거지를 캘리포니아주 샌프란시스코로 이전하였다.

재단의 설립 목적은 교육적 콘텐츠를 수집, 개발하고 그것을 효과적으로 전 세계에 전파하는 것이라고 하고 있으며, 자유 저작물과 위키를 기반으로 한 프로젝트를 개발, 유지하고, 이러한 프로젝트의 콘텐츠의 전체를 무료로 대중에게 제공하는 것을 사업으로 하고 있다.

위키백과는 원래 지미 웨일스의 영리 사업인 바미스의 재정 지원을 받아 운영되었다. 위키백과가 바미스로부터의 재원을 고갈시키자 웨일스와 생어는 프로젝트의 재원을 마련하기 위하여 자선 사업 모델을 떠올렸다.

강조

강조를 나타내려면 em 요소(EMphasis의 약칭), strong 요소를 사용한다. strong 요소 쪽이 보다 강한 강조를 나타낸다. 일반적인 브라우저에서는 em 요소를 이탤릭체로 strong 요소는 굵은 글씨로 표시된다. 일부 음엇 브라우저는 이 요소를 인식해서 강조 음성으로 읽을 때도 있다.

예시

입력

<p><em>덥다</em>. 아니, 오히려 <strong>뜨겁다</strong>. </p>

또는

<p><em>덥다</em>. 아니, 오히려 <b>뜨겁다</b>.</p>

출력

덥다. 아니, 오히려 뜨겁다.

범용 속성

lang

해당 요소 내에서 어떤 언어가 사용되고 있는지를 나타낸다.

id

해당 요소의 이름을 지정한다. 이것이 지정된 요소에는 CSS로 지정된 스타일을 배당받을 수가 있다. 하나의 문서 내에서 한 번 밖에 못 사용한다.

class

해당 요소와 CSS 등에서 지정된 클래스를 연관시킨다. id 속성과 마찬가지로 CSS에서 지정된 스타일을 배당받을 수 있으며 라나의 문서 내에서 여러번 사용할 수 있다.

title

지정된 요소에 대한 스타일을 나타내며 간단한 설명을 적는 경우가 많다. 일부 브라우저에서는 해당 요소를 툴팁으로 표시한다.

style

CSS 등의 스타일 시트를 적는다. 사전에 설정되어 있지 않은 스타일을 직접 해당 요소에 대해서 지정할 수 있다.

dir

글자가 읽히는 방향을 지정한다. 속성값은 ltr(left to right)로 지정하면 왼쪽에서 오른쪽으로, rtl(right to left)를 지정하면 오른쪽에서 왼쪽으로 표시된다.

그 외 텍스트 관계의 요소

dfn

그 언어가 정의 대상의 용어인 것을 나타낸다. 문장 중에서 처음으로 해당 용어가 나왔을 경우 등에 사용한다. 일반적인 브라우저에서는 이탤릭 표시가 된다.

abbr,acronym

abbr는 해당 단어가 약어인 것을, acronym는 해당 언어가 두문자어인 것을 나타낸다. title 속성을 지정하며 그 단어가 생략되지 않는 형태를 적는 것이 필수이다. 브라우저에 따라서는 이 요소가 지정된 단어는 점선 표시가 되지만 인터넷 익스프롤러에서는 대응하지 않는다.

sup,sub

sup는 문자를 옆의 상단에 sub는 아래에 단다.

pre

지정된 텍스트를 일정한 폭으로 표시한다. 소스 코드 등을 표시할 때에 사용한다. HTML는 유효하지만 개행이나 공백 문자는 그대로 표시된다.

kbd

조작법 설명 등에서 키보드로부터 입력하는 문자를 나타낸다. 일반적인 브라우저에서는 일정한 폭으로 표시된다.

code

해당 부분이 소스 코드임을 명시한다. 일반적인 브라우저에서는 일정한 폭으로 표시된다.

samp

그 곳에 있는 내용이 프로그램 등에 따라서 출력되는 내용의 샘플인 것을 나타낸다. 일반적인 브라우저에서는 일정한 폭으로 표시된다.

var

변수나 인수를 나타낼 때에 사용한다. 일반적인 환경에서는 이탤릭 표시가 된다.

ins,del

ins 요소는 해당 부분을 나중에 삽인한 내용을, del 요소는 해당 부분을 나중에 제거한 내용임을 나타낸다. datetime 속성(ISO 8601 형식)을 사용해서 삽입과 제거 시간을 넣거나 cite 속성을 사용해서 정보의 출처를 나타내거나 title 속성을 사용해서 간단한 설명을 적거나 할 수가 있다.

datetime 속성은 연도(4자리)-월(2자리)-일(2자리) T시:분:초+9:00의 형식(한국 표준시일 경우)으로 적는다. 예를들면 2010년 1월 1일 9시이면 2010-01-01T09:00:00+9:00로 적는 서식이다.

지정 위치에 대해서 블록 요소로도 인라인 요소로도 사용할 수 있지만 블록 요소로 취급해도 CSS로의 스타일 지정은 안라인 요소와 같은 취급을 한다.

bdo

지정된 텍스트의 표시 방향을 dir 속성으로 지정한다.

강제 개행

텍스트 파일에서의 개행은 표시해도 거의 영향의 받지 않는다(브라우저에 따라서는 공백이 열리기도 한다.). 강제적으로 다음 행으로 넘기고 싶을 때에는 <br>를 사용한다. 또한, 현재의 XHTML에서는 <br />(XHTML 1.0에서는 br와 /의 사이에 반각 공백을 넣는 것을 권장하고 있지만 반드시할 필요는 없다)로 적는 것으로 정해져있다. HTML에서도 <br />를 사용할 수 있지만 문법상 작성 방법이 아니기에 규격에 따른 HTML을 쓰고 싶을 때에는 を주의하자.

예시

입력

<p>다음 줄로 넘기겠습니다. 
네! 어라?</p>
<p>이렇게 하지 않으면...<br>
말야...</p>
<p>XHTML일 때에는 이쪽이...<br />
네...</p>

출력

다음 줄로 넘기겠습니다. 네! 어라?

이렇게 하지 않으면...
말야...

XHTML일 때에는 이쪽이...
네...

div, span 요소

div 요소는 블록 레벨 요소, span 요소는 인라인 요소이지만 그 이외의 의미 없이 단체로 지정해도 브라우저가 특별한 취급을 하거나 표시가 특별 변화하거나 하지는 않는다(다만, div 요소는 블록 레벨 요소이며 압서 말한 것에 개행이 들어간다). id 속성이나 class 속성을 사용해서 스타일 시트를 적용하거나 lang 속성 등을 지정하거나 주로 다른 요소에서는 대용할 수 없는(다른 요소를 사용하면 범위 내에 불필요한 정보를 정의해버린다) 것을 하는 범용 요소로 사용된다.