With the very basics of HTML in the bag, we can to learn about how to work with some content.
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.
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>
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.
Why is this?
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
<!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>
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>
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!