Even if you haven’t been trained as a UX graphic designer, you can still create websites that are not only informative but also good-looking and attractive to visitors.HTML5, CSS3 and JavaScript are simple tools that every frontend developer has at their disposal, and these tools enable you to make your blog or website look modern, beautiful, and user-friendly.
If you want to create outstanding websites, improving your coding skills and taking coding courses can be a great solution. However, even basic tools like HTML editor enable you to create good websites. In fact, there are dozens of incredible websites created with just HTML5, and you may not need any additional tools to make your own website that will attract visitors with its design and impress them with usability. Here are some great tips that might help you.
Add horizontal lines
Horizontal lines are a good solution if you want to break up long sections of your website that are difficult to read. Sometimes, you may underestimate the volume of textual content on a certain page when designing it, and you don’t want to present your readers with non-digestible chunks of text because they will simply abandon the page. A simple horizontal line can make a big difference. To add it, you can use the <hr> tag:
<h1>Header</h1> <p>Here’s a lot of interesting content...</p> <hr> <h1>Another header</h1> <p>...and more great content here</p>
2. Add metadata
To make sure that your content will be discovered by the target audience, you should optimize it for search engines. Many people think that SEO optimization is all about keywords, but modern search algorithms display search results based on numerous factors. You should help these algorithms understand what your site is about, and how it can benefit readers.
A great solution is to include metadata. Including metadata is no longer an option but rather a necessity if you don’t want to lag behind your competitors. Fortunately, you can add metadata easily by using just HTML:
<meta name=”description” content=”SEO tips for beginners”>
<meta name=”keywords” content=”SEO, optimization, website rankings” />
3. Enable visitors to change the color of text or background
You can also offer your website visitors some customization opportunities so that they’ll be more engaged. No matter what colors you choose for the design of your website, the chances are that only a part of your audience will appreciate it. Customization boosts user experience and makes your website more memorable. In this case, you will need a little more code:
<select name="clr" onchange="document.bgColor=this.options[this.selectedIndex].value" size="1″"> <option value="black">black</option> <option value="orange">orange</option> <option value="white">white</option> </select> <p> Background Color<br /><br /></p> <select name="clr" onchange="document.fgColor=this.options[this.selectedIndex].value" size="1″"> <option value="black">black</option> <option value="orange">orange</option> <option value="white">white</option> </select> <p> Text Color</p>
4. Hide fields
Sometimes, your forms may contain fields that you only need for internal use. Obviously, you don’t want them to be visible to website visitors. Here’s an example of such a field that sparked a discussion on Reddit. Such things make your website look amateurish, but HTML enables you to hide these fields from visitors. They won’t be able to type anything in these fields but forms will carry them after the forms are submitted. In the example below, the hidden field will tell you that your users prefer English. Here’s the code that you need:
<form name="contact" action="https://prettycoolsite.com" method="POST"> <input type="text" size="25" value="Your name" /> <br> <input type="hidden" name="Language" value="English" /> </form>
5. Add voice recognition
Given that voice input becomes more and more popular, adding such a feature to your website is a great choice. The code is simple:
<input type=”text” x-webkit-speech />
6. Add input suggestions
You can help your visitors quickly input the necessary information by offering suggestions while they’re typing. For example, here’s a piece of code that will offer suggestions on the preferred web browser:
<p><input type="text" list="web_browsers" /></p> <datalist id="web_browsers"> <option value="Chrome"></option> <option value="Safari"></option> <option value="Opera"></option> <option value="Firefox"></option> </datalist> <p><em>For example; </em> Chrome</p>
7. Add fine print
Quite often, you may need to add terms of service, citations, disclaimers, or various legal information at the bottom of your page. In this case, you can simply add the <small> tag. Here’s an example:
<h1>Ultimate Sale!!! 80% off on all products from the last collection<sup>*</sup></h1> <p><small>* Terms and Conditions apply</small></p>
8. Highlight text
You can use the <span> tag to highlight text on IE and Firefox. You can also choose any color that you like. Here’s the code for orange highlighting:
<span style=“background-color: #FF5733”>Your text</span>
9. Add a background image to your text
You can also add a background image instead of highlighting your text. However, you will only be able to do it if your font is large enough. We suggest that you don’t use this approach with fonts that are smaller than 20 pts because otherwise, the difference between background color and image will be difficult to notice.
<p><span style="background-image: url('/imgaddress.png'); font-size: 20pt;">Better Than Highlight</span></p>
Wrapping Up
As you can see, HTML5 offers you many opportunities to make your website more beautiful and to improve its usability. No matter whether you’re using various website development tools or not, you can always improve the design of your web pages, and it’s not a difficult thing to do. Our tips will help you do some interesting tricks with HTML only so you won’t need to look for more complex solutions.
Author Tiffany Porter
Tiffany Porter is a professional writer. She writes for different news portals and thematic blogs that help her stay at the heart of the programming and technology news. She also provides consultations and creates expert writing materials for the essay writer reviews websites. Such work gives her the opportunity to write articles for Top writers review.