HTML Paragraphs
1. Use the correct HTML tag to add a paragraph with the text "Hello World!".
<html>
<body>
<p>Hello World!</p>
</body>
</html>Hello World!
p tag는 paragraph의 약어로 하나의 문단을 만들 때 쓰인다. 따라서 p태그를 연속적으로 사용하면 문단과 문단사이의 공백이 존재하게 된다.
Hello World!
Hello World!
2. Clean up this document with proper end tags.
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>This is a Heading
This is a paragraph.
모든 HTML elements는 content가 없는 몇개의 element를 제외하고 모두 end tag를 사용해야 한다.
<tagname>content</tagname>3. Add a horizontal rule between the heading and the paragraph.
<h1>London</h1>
<hr>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
hr tag는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타낸다. 이는 수평 가로선으로 보이며 시각적인 의미보다는 의미적 용어(semantic term)로 사용된다.
4. Add a line break in the middle of the paragraph.
<p>My Bonnie lies<br>over the ocean.</p>My Bonnie lies
over the ocean.
br tag는 텍스트 내의 줄바꿈(line break)를 정의할 때 사용한다. HTML 소스 코드 내에서는 엔터를 사용해서 줄바꿈을 해도 브라우저에서는 인식하지 못하기 때문에 줄바꿈이 필요한 텍스트에 유용하게 사용된다. br tag는 content가 존재하지 않는 빈(empty) 태그로, end tag가 존재하지 않는다.
5. Wrap this poem around HTML tags that will preserve all spaces and linebreaks when the element is displayed.
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.
pre tag는 미리 정의된 형식의 텍스트를 정의할 때 사용한다. 요소 내의 텍스트는 시스템에서 미리 지정된 고정폭 글꼴을 사용하여 표현되고 텍스트에 사용된 여백과 줄바꿈이 모두 그대로 브라우저 화면에 나타난다. 이를 통해 독특한 서식의 텍스트나 코드 등을 HTML 문서에 그대로 표현 가능하다.
