Did you know that when you format your text in WordPress you may be adding or changing the HTML in your page? HTML stands for “Hypertext Markup Language”. It is a computer language that uses tags to define elements written within a document, meaning it is used to identify page structure, not make the page look pretty! With HTML, everything must be contained within an opening tag and a closing tag, which are identified by <angled brackets>. Together, these create an element.

Opening tag: < > 

Closing tag: </ >

Headings and paragraphs are pretty straightforward, and are used in the same way on a website as they would be used in a document. There are six different heading sizes, some of which are used more than others. Each heading is placed between the opening tag <h#> and the closing tag </h#>.

Paragraphs are placed underneath these headings. Each paragraph of text, including one like this, is contained between the opening tag <p> and the closing tag </p>. Paragraphs are used to display large blocks of text, as well as to separate them into smaller, easier to read chunks. The paragraph tag can be used to separate a large block of text into multiple paragraphs.

<h1> Heading 1 </h1>

<p> This heading is typically only used once per page, just for the title or to identify the site. </p>

<h2> Heading 2 </h2>

<p> This heading is often used to start a new article or section on a web page. </p>

<h3> Heading 3 </h3>

<p> This heading is often found within an article. </p>

<h4> Heading 4 </h4>

<h5> Heading 5 </h5>

<h6> Heading 6 </h6>

<p> This heading is almost never used. </p>

Lists display information that consists of multiple item. When identifying lists with HTML, there are 2 types of lists that could be defined: unordered lists and ordered lists. Ordered lists contain items that are not dependent on an order, while ordered lists have a specific order in which they must be listed in order to make sense.

An unordered list is contained between <ul> and </ul>. Each list item must be defined between <li> and </li>. This would result in a list format that looks like:

• Roses
• Tulips
• Sunflowers
• Daffodils

An ordered list is contained between <ol> and </ul>. Each list item must be defined between <li> and </li>, which is the same tag used for list items in an unordered list. This would result in a list format that looks like:

1. Morning
2. Noon
3. Afternoon
4. Night

Lists can also be nested inside of each other to create sublists. That could look like:

• Coffee
  • Caramel
  • Hazelnut
• Lemonade
  • Raspberry
  • Strawberry
• Tea
  • Black
  • Green

In order for the web to function, we need links! Links can lead to different pages on or off your website. Links and the clickable words will be nested in between the tags <a> and <a/>. Within the <a> tag, the code will start with href=”https://” , with your link contained between the quotation marks. If you would link this link to open into a separate tab, next include target=”_blank”, and close off that first tag with >. Next would be your clickable words which are the words that will be displayed for users to click on, followed by the ending </a> tag. The code for this could look like:

Visit our <a href=”https://www.webstite” target=”_blank”>awesome website</a>.

Sometimes, links are used to lead somewhere else on that same webpage. For example, there may be link at the bottom of the page that will lead back to the top of the page, preventing the reader from needing to manually scroll all the way back up. In order to do this, you’d first need to identify and name where on the page you want the link to go. This is done by including id=”name of your choice” within the tag. At the bottom of your webpage where you want this link to appear, include your clickable words between the tags <a> and </a>. Within the <a> tag, include the ID as <a href=”#top”>. The codes for this would look like:

<h1 id=”top”>Top of webpage</h1>

<a href=”#top”>Back to top</a>