Working with Content on the Web

Working with Content on the Web
udemy2 placeholder image

Comments

Sometimes while writing HTML, you want to leave a comment, either for yourself or for another person. 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>
	
An example using emphasis and strong.
An example using emphasis and strong.
namecheap placeholder image

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>
	

Don't believe me? Try it for yourself. They will render 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. Paragraph tags are used for writing, well, paragraphs, which each paragraph being neatly separated from each other as you would expect.

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!