Without CSS a website is just a barebones skeleton. An HTML-only website is ugly and bland and looks like something from the early days of the internet. When you are a web development student, just learning how to style your web pages, it is crucial to make sure you are laying a good foundation.
If you can get the structure of your HTML perfect by using the correct tags and formatting, your website will be easier to maintain and build upon in the future. If your HTML is sloppy and uses the wrong tags, you will probably have to start from scratch when you want to make something look better.
It wasn’t so long ago…
That I was just learning basic HTML myself. As a freelance web developer, I find myself still working with HTML almost every day, and I am amazed that there is still something to learn from a technology that I feel I know inside and out.
You can always improve. You can always perfect the basics. You can always learn from and appreciate simplicity.
These are words to live by for me, and I figured I would put them into practice by seeing how well I can make a website look using only HTML. Not styling any elements or using any Javascript to make my site look pretty means that I would have to rely solely on my HTML chops to make the most out of this project.
One big advantage you can see with using plain old HTML for your website is that it is much faster. Additionally, your website is more accessible due to its simplicity.
Check out the finished result on Codepen
Play around with the HTML files here, and read on to find out how everything works.
See the Pen html only by tylervonvon (@vonnyboy) on CodePen.
Let’s start making a simple “About Me” HTML-only website
We’re going to make a simple about me page with a few different elements to make things interesting.
- An image using the proper caption and alt tags
- An image map to go into detail about specific parts of an image
- A details section to show collapsible sections without the use of JavaScript
Let’s start with the basic structure of our page, shall we?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="About Me">
<meta name="author" content="Tyler Von Harz">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About me</title>
</head>
<body>
<header>
<h1>A little about myself</h1>
</header>
</body>
</html>Let me explain what’s going on here:
The first thing you want to do is declare the DOCTYPE and create the HTML tags. Giving your HTML tags and attribute of lang=”en” will ensure that your code properly validates for English.
Setting the proper meta tags in your <head> element accomplishes several things:
The meta charset attribute “UTF-8” is important because it specifies the character encoding for how the computer translates machine-readable code into human-readable code. You can only have one character encoding type on a web page and the most common is UTF-8.
The meta description and author tags tell search engines and web crawlers important information about your site. The meta viewport lets you control the viewport width so your page displays properly on mobile devices. Without it, mobile devices would use the desktop version of your site and scale it down. The viewport tag ensures that devices use the proper width for your site.
The <header> is different from the <head> in that it actually displays on your page for you to interact with. This is where you would put things like your navigation bar, page title, and perhaps a logo or anything else that you want to be at the top of the page.
Within the <body> tag and below the <header> is where we will put the main content of our page.
Let’s add an image
To add an image is simple. Just use the <img> tag and set the source using the following syntax:
<img src="your image source here">To give your image a caption, put it inside of a figure element. Don’t forget the alt attribute. Setting the alt attribute is important for accessibility and making sure your image can be read by a screen reader. It will also make sure your code validates properly.
<figure>
<img src="LinkToYourImageHere" alt="Picture of me">
<figcaption>So thats me, Tyler</figcaption>
</figure>Separate the sections of your page with the <section> element
The name makes sense right? You want to separate different parts of your page up with the <section> element. If you are moving your topic in a different direction or making a different point, you want to make a new section for that.
For my site, I have separated it into three sections. Let’s have a look at the code within the <body> tag to see what I mean:
<body>
<header>
<h1>A little about myself</h1>
</header>
<section>
<h2>This is the first section</h2>
<p>Put some content here!</p>
</section>
<hr>
<section>
<h2>This is the first section</h2>
<p>Put some content here!</p>
</section>
<hr>
<section>
<h2>This is the first section</h2>
<p>Put some content here!</p>
</section>
</body>You also may notice the use of the <hr> element. This creates a dividing line between two sections and is just another way to divide up the page.
Let’s add an image map!
Image maps are one of my favorite HTML features. You can create a picture with specified areas that are clickable.
As you can see here from this incredibly exciting picture of my bedroom, when you hover over certain objects, it says what they are! You can also set an “href” attribute so that clicking an object takes you to another part of your page or a different page entirely. Let’s see how you can do this yourself.
The hardest part of making an image map is figuring out the coordinates of your objects. You can use MS Paint, Photoshop, or a free online tool like image-map.net to help you out.
The code for our image map comes out looking like this:
<figure>
<img src="Put Your Image Source Here" usemap="#image-map" alt="my-room">
<map name="image-map">
<area target="_self" alt="Cat" title="Cat" href="#cat" coords="187,158,242,161,280,177,286,201,264,203,238,196,224,208,199,213,177,190" shape="poly">
<area target="_self" alt="Books" title="Books" coords="228,81,247,106,224,118,197,108,206,85" shape="poly">
<area target="_self" alt="Cows" title="Cows" coords="173,40,175,86,141,89,139,43" shape="poly">
<area target="_self" alt="Cows" title="Cows" coords="292,64,329,67,326,111,288,106" shape="poly">
<area target="_self" alt="Cows" title="Cows" coords="431,72,425,121,376,117,380,70" shape="poly">
<area target="_self" alt="Books" title="Books" coords="447,98,430,139,477,149,479,99" shape="poly">
</map>
</figure> Pretty cool huh?
More cool elements
There are a couple of cool elements I want to talk about before wrapping up. I think these are important for making an aesthetically pleasing web page. The first is the list.
You can make a list using either the unordered list tag <ul> or the ordered list tag <ol>. Use <ol> if you want your list to be numbered, and use <ul> if you just want a basic list with no order. To add items to your list, use the list item <li> tag. These go inside of your list element like so:
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>Another cool element is the <blockquote>. This makes a bit of text appear in quotations; very nice if you want to add some quotes to your web page. You can add a “cite” attribute to give credit where credit is due, though in the case of an ancient Roman philosopher, I think it is of no use.
<blockquote cite="credit your source here">"While we teach, we learn"<br>
- Seneca, Roman philosopher
</blockquote>Finally, I want to add one more element to my page to make it look pleasing: the <details> element. This tag is useful for creating a collapsible area for hiding some additional text. It is made up of the <summary> which will display text that is viewable, and a <p> tag for the hidden text, like so:
<details>
<summary id="books">Viewable text here</summary>
<p>Hidden text here.</p>
</details>A pretty cool little feature of HTML.
And there you have it
HTML is important to master because it is the foundation upon which your whole site is built. Without a quality foundation, you will struggle to create the rest of your site.
I hope you enjoyed reading this article. Want to watch me code this site from scratch? Just check out the video below and don’t forget to subscribe to my newsletter for some more interesting tidbits of information.
