Syntax is important in html because otherwise, your code may not work.
Tags are how you add or modify everything in html. These are marked by the greater/less than signs (</>). Use these like you would use parenthises, and surround the tag with them. Tags will not show up in any text you write, but will modify other text. You will learn how to use these later.
Body text is one of the most important components of html. Body text is added using the tag <p>. Here is an example:
Input:
<p>Body text</p>
Output:
Body text
There are 6 levels of headings, level 1 being the most important, and level 6 being the least important.
Headings are added using the tag <h#>, where # is the level of heading you want to use.
Here is an exaple using <h3>
Input:
<h3>Heading</h3>
Output:
The tag <code> is used to add single lines of code to your website. It works like <p>:, but in a monospaced font.
Input:
<code>A bit of <code>
Output
A bit of code
The tag <pre> is used to add multiple lines of code in a monospaced font.
Input:
<pre> <h1>Heading</h1> <p>Body Text</p> </pre>
Output:
<h1>Heading</h1> <p>Body Text</p>
The tags <kbd> and <samp> are used for input and output respectively. <kbd> is use for short, keybord inputs, such as "Ctrl + C". <samp> is used for sample outputs such as "Invalid username or password."
An unordered list is a bulletpointed list and is added using the tag <ul>. To add items to the list, you can use the tag <li>. An unordered list is used to show a list without an order, such as a shopping list.
Input:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
Output:
An ordered list is a numbered list and is added using the tag <ol>. To add items to the list, you can use the tag <li>. An ordered list is used to show a list with a certain order, such as a ranking list from a competition.
Input:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Output:
A description list is a list where each item has a description and is added using the tag <dl>. To add items to the list, you can use the tag <dt>, and to add descriptions you can use <dd>. A description list is used to show a list with descriptions, such as a dictionary.
Input:
<dl>
<dt>Item 1</dt>
<dd>Description 1</dd>
<dt>Item 2</dt>
<dd>Description 2</dd>
<dt>Item 3</dt>
<dd>Description 3</dd>
</dl>
Output:
Nested lists are lists within other lists, which do not have to be the same type of list as the one they are in. Nested lists are made by simply placing one list inside of an item from another. These lists are useful for stuff like teir lists.
Input:
<ol> <li>Item 1 <ul> <li>Item A</li> <li>Item B</li> </ul> </li> <li>Item 2 <ol> <li>Item C</li> <li>Item D</li> </ol> </li> </ol>
Output:
Most tags can be used inside of text, but here are some designed to be used in text. For example, <strong> makes text bold. I will be showing all of these on one line for simplicity.
Input:
<p> Normal <strong>bold</strong> <em>italics</em> <u>underlined</u> <sup>superscript</sup> <sub>subscript</sub> <del>deleted</del> <mark>highlighted</mark></p> <q>quote</q>
Output:
Normal bold italics underlined superscript subscript deleted highlighted quote
A line break is used to start a new line of text without having to use a second <p> tag. To add a line break, use the tag <br>. The tag is also self closing, meaning you only need to write the tag once, without the closing tag.
Input:
<p>Top text.<br>Bottom text.</p>
Output:
Top text.
Bottom text.
A horizantal rule is just a line going across the page. This can be used to show separation beteen two sections of your website. The tag, like <br>, is self closing, meaning it doesn't need a closing tag. it is added using the tag <hr>.
Input:
<p>Above line.</p> <hr> <p>Below line.</p>
Output:
Above line.
Below line.