4. HTML Tags – Part 1
Key Terms
- head
- title
- meta
- body
- header
- headings
- paragraph
- anchor tag
- image tag
- ordered list
- unordered list
- description list
- table
- comment
- navigation
- article
- section
- aside
- footer
- special characters
- encoded characters
Head Tag
Inside the <head> tag, there is one tag that is always included: <title>, but there are others that are just as important:
This is where we insert the page name as it will appear at the top of the browser window or tab.
This is where information about the document is stored: character encoding, name (page context), description.
Let’s take a look at a basic <head> section:
Try to run this code in Repl.it:
Adding Content
Next, we will make a <body> tag.
The HTML <body> is where we add the content which is designed for viewing by human eyes.
This includes text, images, tables, forms, and everything else we see on the internet every single day.
How to Add HTML Headings To Your Web Page
Headings are block-level elements, and they come in six different rankings, <h1> through <h6>. Headings help to quickly break up the content and establish hierarchy. They are key identifiers for users reading a page. They also help search engines to index and determine the content on a page.
Headings should be used in an order that is relevant to the content of a page. The primary heading of a page or section should be marked up with a <h1> element. Subsequent headings should use <h2>, <h3>, <h4>, <h5>, and <h6> elements as necessary.
Each heading level should be used where it is semantically valued, and should not be used to make text bold or big — there are other, better ways to do that.
Here is an example of HTML for all the different heading levels and the resulting display on a web page.
Try to run this code in Repl.it:
How To Add Text In HTML
Adding text to our HTML page is simple using an element opened with the tag <p>, which creates a new paragraph. We place all of our regular text inside the element <p>.
When we write text in HTML, we also have a number of other elements we can use to control the text or make it appear in a certain way.
Other Key Elements:
| Element | Meaning | Purpose |
<b> |
Bold | Highlight important information |
<strong> |
Strong | Similar to bold, to highlight key text |
<i> |
Italic | To denote text |
<em> |
Emphasised Text | Usually used as image captions |
<mark> |
Marked Text | Highlight the background of the text |
<small> |
Small Text | To shrink the text |
<strike> |
Striked Out Text | To place a horizontal line across the text |
<u> |
Underlined Text | Used for links or text highlights |
<ins> |
Inserted Text | Displayed with an underline to show an inserted text |
<sub> |
Subscript Text | Typographical stylistic choice |
<sup> |
Superscript Text | Another typographical presentation style |
These tags must be opened and closed around the text in question.
How To Add Links In HTML
As you may have noticed, the internet is made up of lots of links.
Almost everything you click on while surfing the web is a link that takes you to another page (or part of the page) of the website you are currently visiting or to an external website.
Links are included in an attribute opened by the <a> tag. This element is the first that we’ve met which uses an attribute. So it looks different from previously mentioned tags.
The Anchor Tag
The <a>, or anchor tag, is written in the following format:
<a href="https://stackoverflow.com/">Your Link Text Here</a>
The part href="https://stackoverflow.com/" points to the page that will open once the link is clicked.
Meanwhile, the part Your Link Text Here contains the text which will be displayed to the visitor in order to entice them to click on that link.
If you are building your own website, then you will most certainly be hosting all of your pages on a professional web hosting service. In this case, internal links on your website will be written as, for example, <a href=”mylinkedpage.html”>Link text Here</a>
How To Add Images In HTML To Your Website
In today’s modern digital world, images are everything. The <img> tag has everything you need to display images on your website. Much like the <a> tag, the <img> tag also contains an attribute.
The attribute features information for your computer regarding the source (src), height (height), width (width), and alternate text (alt) of the image.
Styling and Formats
The file types generally used for image files online are: .jpg, .png, and (increasingly less common) .gif.
alt, or Alternate Text, is important to ensure that your website is ranked correctly in search engines and also for visually impaired visitors to your website.
Let’s take a look at an example of how the <img> tag is normally constructed (line 10 in this repl.it):
Try to run this code in Repl.it:
Create Your Own Image With An Alt Text
A big part of learning web development is to tinker with code. So we always encourage you to play around with the test code. It’s a great way to have fun while learning at the same time!
Save an image of your choice titled testpic.jpg in a new folder (or on your desktop).
Create a new repl.it project and upload the image to your newly created project.
Then, on line 10, include the image in a <img> tag with the appropriate attributes for: src, alt, height, and width. Once done, hit the “run” button and take a look at your newly uploaded image!
If you run into any issues with this exercise, refer to the reading above and see if you can resolve your difficulties. Then compare your answer with our sample solution.