Paragraphs and Divs
Keeping Content together is a big part of writing your site! Both paragraphs and divs are meant to be containers. Both <p> and <div> put a space after themselves. Like paragraphs in books, we want to keep them separated. The only major difference between them is that people often use <div> as a catchall and write special classes for it in CSS, which we’ll get to soon!
<!doctype html>
<html>
<body>
<div>
I'm inside of a div tag.
I'm also inside of the div tag.
</div>
<p>
I'm inside of a paragraph tag.
</p>
<p>
I'm inside of another paragraph tag.
</p>
</body>
</html>
Did you notice that when the code was rendered, the second line of our <div> didn’t actually show up as a second line? That’s because no matter how many line breaks we enter on our keyboard, HTML will not render a line break. For that we need to add a <br />.
<!doctype html>
<html>
<body>
<div>
I'm inside of a div tag.
<br />
I'm also inside of the div tag.
</div>
<p>
I'm inside of a paragraph tag.
<br />
I'm inside of the same paragraph tag.
</p>
</body>
</html>
The <br />
Italic Lettering:
To emphasise or stress words in your HTML, you can use italics! <i> and <em> both look like italics, but <i> shows greater emphasis to a screen reader than does <em>. Take a look at the code:
<!doctype html>
<html>
<body>
<div>
I make some pretty bad jokes sometimes, so I need to <i>italicize</i> and <em>emphasize</em> my words a lot so people know I'm telling a joke!!
</div>
</body>
</html>
Bold Lettering:
To boldly letter something in our code, we need to use the <strong> or the <b> elements. They both look the exact same to us, but for screen readers for visually impaired people <strong> shows a little bit less emphasis. Take a look and how this code renders:
<!doctype html>
<html>
<body>
<div>
Sometimes when you want some text to be bolder than other text, you can use the <b>bold</b> or <strong>strong</strong> tags!
</div>
</body>
</html>
Underlining
Sometimes bold and italics don’t get the point across as much as we’d want, that’s when we’d want to start underlining our text! To do this, we use the <u> element. This Underlines all text between the <u> and </u>. Check out how underlining works:
<!doctype html>
<html>
<body>
<div>
<u>I FEEL EXTREMELY IMPORTANT</u>!!
<div> Also, you <b>might</b> think we're crazy but you can <b><i><u>ADD ALL THREE TOGETHER</u></i></b></div>
</div>
</body>
</html>
Headers
Paragraphs and divs are great and all, but how should we title them? Luckily, we can do that with our header elements! Headers range in size from <h1> to <h6>. H1 headers are the biggest, and H6 headers are the smallest. Take a gander:
<!doctype html>
<html>
<body>
<h1> H1. Welcome to my site! </h1>
<h2> H2. This is where I can introduce you to myself </h2>
<h3> H3. I really like to write code </h3>
<h4> H4. I also really like to take pictures of bugs </h4>
<h5> H5. It would be super neat if I could make a photo blog for all of my bug pictures </h5>
<h6> H6. Maybe once we learn how to include images into our site we can start posting bug pictures? </h6>
<div>
I'm normal sized text, by the way. Just for reference.
</div>
</body>
</html>
Headers get consecutively smaller as the numbers go! Be sure not to go too small, or you might end up with a header smaller than your actual text!
Horizontal Lines
Sometimes you might need to visually differentiate parts of your websites. One way to do this is with the <hr /> tag. Notice that it does not have a closing tag, that is because nothing goes inside of it!
<!doctype html>
<html>
<body>
<div>
I'm above the line!
<hr />
I'm below the line!
</div>
</body>
</html>
Superscripts and Subscripts
Suppose you wanted to properly format some math on your site? You can do that with superscripts <sup> and subscripts <sub>! Look at that beautiful math:
<!doctype html>
<html>
<body>
<div> MATH IS NEAT! </div>
<div> E = MC<sup>2</sup></div>
<div> Later, when we work with lists and arrays, you can denote a sub-element by writing array<sub>n</sub> where `n` is the element number!</div>
</body>
</html>
Code and Preformat
We’re getting pretty thick in the weeds for formatting, so this is it for the time being. The last two we have are for when we want to display ‘code’ or ‘preformatted’ text! Code <code> will render our font to look more like a monospaced text (programmers love this!), and preformat <pre> will render our text with the spaces and new lines EXACTLY as we left them! The main difference is that <pre> is a block element that makes its own section, while <code> is an inline element, like all of the previous formatters. Check out how it renders:
<!doctype html>
<html>
<head>
</head>
<body>
<div> When we want to talk about a certain <code>line of code</code> in our HTML, we can use the code element!</div>
<div> If we have a whole giant block of code with special spacing,
<pre> we can
use preformatted
text
with
pre < </div>
</body>
</html>