Working with Content on the Web

Working with Content on the Web

With the very basics of HTML in the bag, we can to learn about how to work with some content.

Comments

Sometimes while writing HTML, you want to leave a comment, either for yourself or for other developers. Keep in mind that, being comments, they will not be rendered at all and will in fact be completely ignored by the browser. You can think of comments as just little notes that do not affect anything else.

You can achieve this in HTML like this:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Comments</title>
		</head>
		<body>
			This is content.
			<!-- This is a comment. -->
		</body>
	</html>
	

You can also comment in the middle of a sentence, or have comments that span multiple lines, like so:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Multi-line Comments</title>
		</head>
		<body>
			This is <!-- Comment inside. --> some content.
			<!--
			I am
			a multiple line
			comment -->
		</body>
	</html>
	

Comments are useful depending on how you use them, but they are completely optional.

Emphasis

Adding emphasis to content is a great way to highlight that selection over the surrounding content. HTML gives you two ways to give emphasis to content.

You have the em tag, which stands for emphasis, and the strong tag, which is to give content a strong importance.

Load this up in your browser to see for yourself:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Emphasis</title>
		</head>
		<body>
			I <em>really</em> think that HTML is <strong>awesome!</strong>
		</body>
	</html>
	
Example of using emphasis.
Example of using emphasis.

Multiline Content

Working with multiline content in HTML is pretty easy, but it is not like simply pressing enter on a Word document. For example, this will not give you the expected outcome:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Multiline Content</title>
		</head>
		<body>
			I am on the first line
			and I am on the second line.
		</body>
	</html>
	

Shocking? Try it for yourself! They will be on the same line.

Without tags, content will render inline.
Without tags, content will render inline.

Why is this?

Paragraph Tags

The reason for this is the way HTML is eventually parsed by the browser. With no tags separating the two lines, the content is essentially treated as being together, and are thus rendered together, on the same line.

To get the desired effect in this case, you will need to use the paragraph tag, or p tag.

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Paragraph Tags</title>
		</head>
		<body>
			<p>I am on the first line</p>
			<p>and I am on the second line.</p>
		</body>
	</html>
	
Paragraph tags start on a new line.
Paragraph tags start on a new line.

There we go!

With each line being encompassed by their own paragraph tag, the browser treats them as separate pieces of content and renders them as such.

Line Break Tags

There is another way to accomplish a similar effect as above. It is usually discouraged unless in very specific cases, but that case might come up for you.

If you use a line break tag, or br tag, you can tell the browser to start a new line and render the rest of the content there instead.

Using a line break tag, we get this:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Line Break Tags</title>
		</head>
		<body>
			I am on the first line<br>
			and I am on the second line.
		</body>
	</html>
	
Line break tags force a new line.
Line break tags force a new line.

Our content renders on separate lines, and we are now happy campers! In the next lesson you'll learn how to add page headings to your page!