Text

So we have the required tags, but a website with just the required tags would just give you an empty screen; and what’s a website without any text? Text elements are when you want to display…well, text. There are a handful of text elements that can be chosen from:

Headers

Headers are used when you want a header for your page. The tags range from <h1> to <h6>. The higher the number, the smaller the header.

<h1>This is Header 1.</h1>
<h2>This is Header 2.</h2>
<h3>This is Header 3.</h3>
<h4>This is Header 4.</h4>
<h5>This is Header 5.</h5>
<h6>This is Header 6.</h6>

Paragraphs

Paragraphs are best used when you have a long amount of reading text to display—hence, a paragraph.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum odio non quam iaculis vestibulum. Cras varius lobortis rhoncus. Vestibulum feugiat elit nec lectus commodo vestibulum. Nunc euismod libero at urna accumsan accumsan. Mauris finibus nibh condimentum, dictum elit eget, tincidunt erat. Suspendisse sollicitudin accumsan nisl non ornare. Pellentesque pretium lectus posuere, placerat nibh lobortis, placerat risus. Proin in ex lorem. Integer diam orci, laoreet laoreet tellus sed, mattis tristique odio. Maecenas volutpat consectetur arcu eu convallis.</p>

Lists

Lists are best used when you have several bullets or items you want to list on screen. There are two types of lists to choose from: ordered lists <ol> and unordered lists <ul>. Ordered lists are shows the list as numbered items, which increments for each item. Unordered lists shows the list as bullet items.

When the type of list is specified, you would need to list the items using a list item tag <li>, as shown below:

<ol>
   <li>List item 1</li>
   <li>List item 2</li>
   <li>List item 3</li>
</ol>

<ul>
   <li>List item 1</li>
   <li>List item 2</li>
   <li>List item 3</li>
</ul>

But say if we have a list item that needs more detail. We can add a new list below that item and create a brand new indented list! This is called nesting elements.

<ol>
   <li>List item 1</li>
   <li>List item 2</li>
   <ol>   
      <li>List item 2a</li>
      <li>List item 2b</li>
      <li>List item 2c</li>
   </ol>
   <li>List item 3</li>
</ol>

<ul>
   <li>List item 1</li>
   <li>List item 2</li>
   <ul>
      <li>List item 2a</li>
      <li>List item 2b</li>
      <li>List item 2c</li>
   </ul>
   <li>List item 3</li>
</ul>

Furthermore, lists are not the only tags that can be nested as well. Feel free to experiment and practice and see what works.

Formatted Text

Formatted text can be used to specify or highlight text. Whenever you want to format specific text, you can wrap it between the following tags below:

<b> – Used to bold text.

<i> – Used to italicize text.

<u> – Underlines text.

<sup> – Changes text to superscript, ^{like this.}

<sub> – Changes text to subscript, _{like this.}

Special Characters

Every once in a while, a developer would come across special characters or accents that has to be used in their page. But how can we do this? Simple, we can use special HTML symbols for these cases. To trigger these characters, we start with this syntax:

&___; or &#__;

As soon as we use type in this code, the HTML page will automatically change this value when it’s loaded. This is very useful for using math symbols in text, for example. Say if you want to write this line of code:

<p> > means the greater than symbol. </p>

One could use a simple > on the keyboard; but this can cause complications with HTML code because the browser doesn’t know if the > symbol is part of an HTML tag, or the text itself. Instead, we can use the > to get the same effect. Look at the same code:

<p> &gt; means the greater than symbol. </p>

In this instance, the browser will say “Okay, > means >”, then will apply the symbol on the page. There are numerous symbols that are useful in HTML, a few of them is described below:

* A current list of these special characters can be reached at this link: https://dev.w3.org/html5/html-author/charref

Images

So we covered how to add different types of text, but there is more to HTML than just paragraphs and lists. Now let’s talk about images. Implementing images is another crucial element to learn. It gives us the ability to add photos, add logos, and even add icons to further customize your website.

HTML can take images in a handful of formats, such as JPEG, PNG, and GIF formats. To implement, we’ll need to use an tag. However, the <img> syntax is different than the text tags above:

<img src="folder_path/image_name.jpg" width="##" height="##" alt="name of image" />

Notice that I didn’t use another tag to close the <img> tag. In instances like this one, we can just use “/>” to end the tag.

The src is your source of the image, which would either be the local file location of the image, or the web URL of the image.

The width and height is used to scale the image, but can be excluded depending on the original image size.

The alt is your placeholder text when an image is not displayed properly. When an image does not have the right source location, it will generate an empty image icon. Upon hovering over the image, the alt text will appear to show what is supposed to be there. Can be useful when debugging code.

<img src="img/example_pic.jpg" width="400" />

But what if you wanted to source an image you found online? Well, we can place the URL of the image as the source.

<img src="http://lorempixel.com/400/200/animals" />

Alternatively, you can save the image to your computer, and use the local folder location to source your image. Use whichever way is more convenient.

* Make sure that you have permission to use other online images, or if the image is free to use. There are many free resources that are available.

Links

Say if you want to build a navigation menu for your website. Or maybe you need to link another site within your website, like a partner company or sponsor site. No problem! This is where anchor, or <a> tags come into play. Take a look below:

<a href="http://www.google.com">Feel free to click me!</a>

Notice how the HTML automatically colors and underlines the text; this effect is default for link tags. It lets us know that clicking this will send us to another page. Clicking the link will send you to the URL we specify; in this case, it would send the user to Google.com. Using links are crucial for websites.

But what if we don’t want the user to leave the page? Well, we can add another attribute to our <a> tag:

<a href="http://www.google.com&quot target="_blank">
   I command another window to spawn!
</a>

Noticed what happened on your browser after adding the target="_blank" attribute? Depending on your browser, the link will open up another tab or window across from this page, with google.com. It’s very useful if you want to display some information, but don’t need the user going to another different page.