Text & Formatting

Writing text in HTML

Let's talk about actually getting some text and content on our pages. The most common way you will write text is using paragraph tags - the tag we just looked at on the previous page.

<p>Hi! I'm text in a paragraph tag. You learned how to write paragraphs in school,
right? You know how this works. Paragraph tags add semantic meaning to long bits of text.
Like, "this is a paragraph, browser!".</p>

Common text styles & formats

Like with most things in website coding, you may see different implementations of these throughout your web travels. But this is the most semantic and up-to-date way of doing things.

Style	Tag	Preview
Italics (emphasis)	`<em>italic text</em>`	italic text
Bold	`<strong>bold text</strong>`	bold text
Underline	`<u>underlined text</u>`	underlined text
Hyperlink	`<a href="https://www.google.com"/>link to google</a>`	link to google

You will almost always use these inside other elements that contain/represent text, like paragraphs. You can definitely combine these too!

Wow, this is a lot.

Hyperlinks (links) are a bit different than the others. Let's go over those next.

Anchor Tags

Anchor tags are the technical term for what we call "links". There is a link tag, but it is NOT used to create the link we're thinking of. That's for linking different files together in HTML Heads.

We're looking for the <a></a> tag .

<a> Tag Attribute	Basic Usage	Description
href	`<a href="https://www.google.com"/>link to google</a>`	This attribute tells our link where to go! Without it, it would go nowhere.
target	`<a href="https://www.google.com" target="_blank"/>link to google in a new tab</a>`	9.5 times out of 10, you're going to use the target attribute to tell your link to open in a new tab. I don't know why you need an underscore before "blank" - but you do.

What kind of links can I make?

You can use this tag to do soo many things.

Link to other pages on your site. This is what navigation is made of babes.
Link to other websites you like. This is called an external link.
Link to elements on the same page you're on. That's what the Table of Contents at the beginning of this page is doing.

Link Demo

Headings

We also have headings to create a sense of hierarchy in our pages. They follow a format similar to paragraph tags. Here's how they're used:


    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

Heading element reference from MDN

Lists

Okay we kind of already looked at this, but it's nice to take a peek at it again.

Ordered Lists


    <ol>
        <li>One thing<li>
        <li>Another thing</li>
        <li>Yet another thing</li>
    <ol>

Unordered Lists

Wow! One letter difference! Neat!


    <ul>
        <li>One thing<li>
        <li>Another thing</li>
        <li>Yet another thing</li>
    <ul>