Building a website can be fun, but it can also be scary- especially if you don’t know how to code HTML. Thankfully, several website-building programs can create a website with little-to-no coding on your part, but there may be certain elements that you’ll want to add.
HTML can help!
HTML (Hypertext Markup Language) is a programming language that can help you add fonts, colors, styles, and other design elements to your website with a few keystrokes.
The idea of messing with the code may seem intimidating, but it’s easier to learn and implement than you think! To get you started, here are some basic HTML tags that every writer should know.
Add a Paragraph
Every good website needs some text, so add it in with a simple paragraph box!
<p> your text </p>
Make it Bold
Most websites have a button that automatically bolds sections of text. However, everyone should know how to do it manually.
<b> bold text </b>
Make it Italic
Same with italics! It never hurts to know the process.
<i> italic text </i>
Add a Heading
You can put one just about anywhere with the following tags:
<h1> main header </h1>
<h2> subheader</h2>
<h3> small header </h3>
Include Preformatted Text
Perfect for including poetry ot other format-heavy content.
<pre> your poem </pre>
Add a long Quote
Need to quote a section of your book? Then use the tag below!
<blockquote cite=”web link”> the quote </blockquote>
Add a short Quote
Use this tag for single sentence quotes.
<q> your text </q>
Give it a Line Break
Put this in the middle of your sentence to create strategic line breaks.
<p> line of text<br> more text <br> rest of text </p>
Add a Link
Link your books (or other websites) by using:
<a href=”Link”>link title</a>
Strike it Through
Need to strike something through for emphasis or change? Then use:
<s> Your text </s>
Highlight the Important Bits
Put this tag around any words or phrases you want to be highlighted in yellow.
<mark> your text </mark>
Add an Image
Great for book covers, author photos, and other visual media.
<img src=”link to image” alt=”image title“>
Change the Image Size
If you need your image bigger or smaller, use this tag to adjust the pixels (px) until it’s the size you need.
<img src=”link to image” alt=”image title” style=”width:500px;height:600px;”>
Add an Unordered List
It’s as basic as it can be.
Add an Ordered List
Basic with numbers and a set heirarchy.
Display a Copyright sign
Protect your works!
<p> 2022 © </p>
Display a Registered Sign
More protection!
<p> ® 2022 </p>
Add a Footer
Want your name, bio, or a special message at the end? Add a footer!
Create a Form
A simple sign-up form.
<form action=”/Where to send the info-usually an email” method=”get”>
<label for=”fname”>First name:</label>
<input type=”text” id=”fname” name=”fname”><br><br>
<label for=”lname”>Last name:</label>
<input type=”text” id=”lname” name=”lname”><br><br>
<input type=”submit” value=”Submit”>
</form>
Give a Summary
The perfect way to summarize your books so the audience can check it out.
Insert a Table
A basic two-columned table for tracking things.
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
</tr>
<tr>
<td>Body 1</td>
<td>Body 2</td>
</tr>
</table>
Add a Video
If you have book trailers, vlogs, or other videos, you need to know how to add them!
<video width=”320″ height=”240″ controls>
<source src=”video link” type=”video/mp4″>
</video>
Learning HTML doesn’t have to be complicated, and these essential tags will help you create the website you’ve always wanted! Check your builder for HTML access, plug in the command you need, and Voila! Custom design at your fingertips.
If there’s something you need that isn’t on this list, I highly recommend visiting the W3 Schools website. They have workable examples on everything from HTML to Javascript, so there’s a good chance they’ll have what you need!
