An author website acts as a creative writer’s online information hub—it’s where readers, fans, literary agents, and editors will first look for details about you and your writing. If you’re thinking about building your own author website but know more about commas than coding, the experts at Web Design Relief recommend learning a few basics about HTML. Here’s a brief beginner’s guide about the ins and outs of HTML for creative writers.
HTML Beginner’s Guide For Creative Writers
What Is HTML?
HTML (Hypertext Markup Language) breaks down the structure of a website using words—also known as tags or codes. For example, the technical side of your website’s design elements, like sections, paragraphs, and headings, can all be interpreted and organized using the HTML language.
Why Do We Use HTML?
Basic HTML is useful for casual Internet users as well as advanced programmers and engineers. By learning HTML, you can understand your web pages and edit them effectively. Website builders are terrific tools, but their design capabilities can be limited. Having a solid grasp of HTML will give you more control over the visuals and presentation of your website.
What Are HTML Tags?
HTML tags are like “containers” or that collection of Tupperware everyone has—and whether it’s delicious strawberries or web design info, a container needs a top and a bottom in order to hold content. In HTML, the tag <html> represents the top of the container for your content, or the “beginning,” while </html> represents the bottom of the container, or “ending.”
Basic HTML Tags And What They Mean
Headings: <h1> – <h6>
The text you are using for your heading can be tagged with text and number sequences in order from most to least important. For example, the <h1> tag should be applied to the text you want for your biggest, boldest headline. This tag works well for organizing page titles, publication names, calls-to-action, and more.
<h1>This will be your biggest heading.</h1>
<h2>This is your second biggest heading.</h2>
Lower heading tags can be applied to text you still want to draw the reader’s eye to without taking away from more important text. For example, the <h2> tag is great for subheadings or taglines, and <h3> works well to separate different points in larger bodies of text.
The paragraph tag indicates a large body of text, such as an author bio, book excerpt, blog post, and more.
<p>Everything in here is a paragraph.</p>
<p>This is another paragraph.</p>
Italic / Emphasis: <i> or <em>
Similar to using the italic button on your word processor when you’re writing, the <i> or <em> tags can indicate or shift regular text to italics for proper stylization and emphasis, respectively.
<em>The text in here will be italicized.</em>
Bold/Strong: <b> or <strong>
Just like the HTML tags above, the <b> or <strong> tags are used to bold your text and highlight important words and phrases.
<b>The text in here will be bold.</b>
The blockquote tag implies that text located in the block is taken or quoted from another source. The quote will be indented and separated from the rest of your text. This can be used to post reviews of your writing or to display excerpts from your work that have already been published.
<blockquote>This quoted text will be separated from the rest of your text.</blockquote>
Images are a staple for any author website and are represented by the <img> tag. The image is not actually inserted into the web page but rather linked to the page. The <img> tag creates a holding space for the referenced image. Using the <img> tag allows you to place an image exactly where you want it on your web page. For example, you might want your author headshot image placed below a bold version of your name (header <h1> tag), but above your biography text (paragraph <p> tag).
Unlike the other tags we’ve reviewed, the image <img> tag does not have a closing tag. Instead, it holds information that specifies the path to the image using the letters “src.”
The <li> tag represents an item in a formatted list, which is a great way to outline your publications or upcoming events. You can break down lists into many categories, but the two most important are Ordered Lists <ol> (marked with numbers) and Unordered Lists <ul> (marked with bullets). It’s as easy as 1, 2, 3!
To learn more about HTML, you can watch in-depth tutorials here: https://www.w3schools.com/html/
Some tech-savvy writers may be eager to try using HTML—but if you’d rather leave HTML and the many detailed tasks of building an author website to the experts, Web Design Relief is ready to help. Schedule a free consultation today!
Question: Have you worked with HTML? Did you find it easy or frustrating?