Now that we’ve learned where to put what, you probably want to start making something. Inside your <body> lies some content, and that content is often text, right?
Of course, text is fundamental to any site. There’s always something to read, to tell you what’s about what and all. But you can’t just write text down all willy-nilly, and without a tag wrapping it up no less!
There’s a few ways you can write text. You can make it big and bold like a heading, or small and simple like a paragraph. Maybe you need a list? How obvious is it that you’ll learn how to write headers, paragraphs, and lists in this entry?
For headers, this is what tags <h1>-<h6> come in. These are heading tags, and as the name suggests they’re often used for headers. These tags need to wrap around your text, so they aren’t self-closing. To make a heading, you write your text like this:
<h1>Hello, world!</h1>
And it appears like this:
For paragraphs and lists, it’s relatively the same. But don’t stop reading now! Lists are a little bit of a different story!
Lists come in two flavors: ordered and unordered. By default, you’ll get an unordered list without specification. How would you specify what kind of list you want?
Easy! You’ll wrap a <ul> or an <ol> around your <li> tags. But what are these tags anyways?
UL stands for Unordered List, while OL is Ordered List. To make either of these kinds of lists, you wrap <ol> or <ul> around <li>, or list.
To do so, you’ll write your code like this:
<ol>
<li>Genbu</li>
<li>Suzaku</li>
<li>Koryu</li>
<li>Seiryu</li>
<li>Byakko</li>
</ol>
And it’ll come out like this:
and an unordered list is pretty much the same. If you don’t use <ol> or <ul> beforehand, it’ll come out as an unordered list like mentioned earlier. Additionally, the list won’t be intended.
For nestled items, it’s necessary for <ul> or <ol>. To do so, you can write your code like this:
<ol>
<li>Genbu</li>
<ul>
<li>Represented by Xiao Wu. Originally intended to be a third playable character in Gunvolt 2, thus his status of this group of characters without being playable.</li>
</ul>
<li>Suzaku</li>
<ul>
<li>Represented by Zed. Playable in the ATEMS Epilogue, after betting Gunvolt 3’s main story.</li>
</ul>
<li>Koryu</li>
<ul>
<li>Represented by Kirin. Playable from the get-go in the main story of Gunvolt 3, and takes over as the main character in her main game. Debuts as a DLC fight in Luminous Avenger iX2.</li>
</ul>
<li>Seiryu</li>
<ul>
<li>Represented by Gunvolt. The main character of the first Gunvolt game, and is playable in the following sequels to the main series.</li>
</ul>
<li>Byakko</li>
<ul>
<li>Represented by Copen Kamizono. An NPC and boss fight in the original Gunvolt game,but becomes one of two playable characters in Gunvolt 2 (Gunvolt being the first option) and absent in Gunvolt 3.</li>
</ul>
<ol>
And it’ll come out like this:
| Tag | Description |
|---|---|
| <h1>-<h6> | Used for headings. Non-self-closing tag. Wraps around text. |
| <p> | Used for paragraphs. Non-self-closing tag. Wraps around text. |
| <ol>, <ul> | Used to define list types. Non-self-closing tag. Wraps around <li>. |
| <li> | Used for list items. Non-self-closing tag. Wraps around list text. Often inside <ul> or <ol>, but can also stand alone without them. |
Continue to: HTML Basics 3: Images and Self-Closing Tags
Return to: HTML Basics 1: A Site's Shell