Janepedia is reader-supported. When you buy through links on my site, I may earn a commission at no extra cost to you.
I don’t date people who don’t know what HTML stands for.
I used to say that to guys who hit on me when I wasn’t interested. Then I started saying it to everyone who asked me why I didn’t have a boyfriend, just because I wasn’t in the mood to explain that I’d rather have a dog than have a boyfriend, but I’m also not a dog person—which is an extended version of me saying, “I don’t want a boyfriend,” which I feel like I have to say because the older I get, the more people seem to think I need a man.
To, you know, “provide” for me.
And other things. I don’t know what other things. It’s not like I need a man to provide any grandkids, considering I am set on adoption instead experiencing the horrors of pregnancy, BUT THAT’S ANOTHER POST.
I feel a bit late to the game, adding a post like this, but n00bs pop up in the blogosphere all the time, so it seems like it’s still relevant. Plus, I get questions. Now, when Charlise asks me a code question, I can send her to
janepedia.com/html. HELLO CHARLISE. Because she usually asks me when I’m not near my laptop, and typing code into a text message is a real PIA.
I tried to make this as accessible as I know how, so I do not use images for the examples; it’s all coded.
Opening and closing
A small, precursor lesson: All HTML tags open and close, unless they’re self-closing (e.g.
<br />, used for line breaks*).
If you don’t close your tags, you’ll probably break your website or just make it look weird. Depends on the tag. It’s like forgetting
} in PHP, which is the worst because then you have to review every line of code. So try not to forget to close them.
*It depends on what HTML you’re using. It’s hard to explain, so I’ll let someone else mess with that.
Some HTML element anatomy
<p>1I love this song.2</p>3
- opening tag:
I love this song.
- closing tag:
With an attribute:
<p class="class-name"2>1I love this song.3</p>4
- opening tag:
I love this song.
- closing tag:
Acronyms & abbreviated text (
I haven’t figured out how to make
abbr compatible via touch devices yet (ugh), but this is still a useful thing to know and would be something to look into if you use a lot of acronyms. I noticed the book blogging community uses a lot of acronyms, so if you opt out of using the abbr element/making it accessible, consider defining what it is at the first mention, parenthesizing the abbreviation, and then using the abbreviation henceforth—per post.
An example of abbreviated text in action:
OMG. I have a doctor’s appt. tomorrow.
The code looks a bit like this:
<abbr title="Oh my gosh">OMG</abbr>. I have a doctor's <abbr title="Appointment">appt.</abbr> tomorrow.
Sometimes these are styled to appear in a
tooltips class. I don’t use a tooltips class because I’m lazy and can’t be bothered, so mine appear boringly (as per the user’s browser’s default appearance).
Basic text formatting
Bold text gets wrapped in
<strong> element, while italic text is wrapped in
Headings are what break up the text. It’s better to use text wrapped in heading tags (
<h6>) than images because of accessibility and SEO. Plus, when you change your theme, those images don’t change with it. Over time, it starts to look tacky. Heading tags can be styled in CSS to match across your site universally.
Typically, the titles of posts and pages are in
<h1>, while subsequent headings in posts are in
<h6>. They work hierarchically, so if the outline of your post goes like this:
- How to build a bottle rocket (title)
- Decorations (optional)
The headings output would look something like this, minus the title*:
<h1>How to build a bottle rocket</h1> <h2>Materials</h2> <h3>Decorations (optional)</h3> <h2>Directions</h2>
*Assuming you’re using a content management system (CMS) and have a theme that automatically displays this properly for you.
Using stylized text (via CSS) headings rather than images to announce new headings is better than using images for headings at all, because of accessibility first, and SEO second.
If you use WordPress, you should have the shortcuts! These only work in the Visual editor, which I use frequently when I’m not needing to edit/write lot of code (like in this post, ugh), because I’ve styled my visual editor to match much that which you see when you read my posts.~
The shortcuts remind me a bit of markdown, but here goes:
##Heading 2 ###Heading 3 ####Heading 4 #####Heading 5 ######Heading 6
The catch is that you have to press Enter for them to automatically change into headings and be wrapped in their respective heading tags. You can separate the text from
# if you want, like
## Heading 2, I just go with none from habit and because less effort.
Images are fun, and as much I love the written word, the web is a visual place. For this example, I’m using placehold.it, a nifty tool that creates placeholder images!
<img src="https://via.placeholder.com/900x250/00a4a6/fff?text=Basic+HTML+for+bloggers" alt="Basic HTML for bloggers">
alt are attributes. It’s important to note that the
alt attribute is for alternative text, or text which describes the image, not for the mere title of the page and keywords for the page’s content. In order words: Pinterest descriptions get their own attributes.
Links are fun. I like making them, and I like getting lost in them. Wikipedia is a rabbit hole for me, but it’s also how I learned about trash in the ocean, so the rabbit hole isn’t always bad.
When creating a link, you’re using an anchor tag (
<a>). They’re not nautical, unfortunately, but still quite fun and full of many uses.
Example: About page
<a href="https://janepedia.com/about">About page</a>
If I’m linking to something within my current blog, it’ll look like this in the text/HTML editor:
nofollow is a common Q among the blog-related Facebook groups I’m part of, so one of those links would look like this:
<a href="https://janepedia.com/about/" rel="nofollow">About page</a>
To make a
nofollow link, we just have to add a
rel (relationship) attribute with a value of
rel="nofollow". The anchor tag
<a> then has two:
You can also make links open in new windows/tabs and combine attributes, e.g.
<a href="https://janepedia.com/about" rel="nofollow" target="_blank">
Anchor tags can have more attributes, too, including classes! Learn more at W3Schools.
You can make ordered/numbered (
<ol>) and unordered/unnumbered (
<ul>) lists in HTML. You can set how it appears via CSS and alter the
type attribute inline, if needed, but I won’t be going into that extraneous detail here. But I will touch on the basics and rely on default styling as per the CSS file. (And encourage you to check out W3Schools for more options.)
Every list item is wrapped in
<triangle>, but you need to wrap it in list tags to make it function properly.
Ordered lists example
The code for this:
How not to adult (according to society): <ol> <li>Have an opinion</li> <li>Rent instead of buy</li> <li>Be & express yourself</li> </ol>
Unordered lists example
The code for this:
List of shapes: <ul> <li>circle</li> <li>square</li> <li>triangle</li> </ul>
Nested lists example
This is a bit trickier, because you have you to open a new list inside a list item and remember to close it. I did this in my list for #Headings, and changed the type of ordered list to
a so it would show as lowercase alphabet and (hopefully) confuse people less. In the example below, I used HTML comments (
<!--comment content-->) to explain things. Feel free to keep the comments if you intend to make these lists, ’cause they’re super helpful in the beginning!
The code looks like this:
<ol><!--opens ordered list--> <li>Powerful - Major Lazor<!--parent list item remains open to give birth to child list item--> <ul><!--opens child list--> <li>Original & instrumental versions</li><!--child list item--> </ul><!--closes child list--> </li><!-- closes parent list item--> <li>New Rules - Dua Lipa</li><!--list item is closed straightaway because there is nothing to add--> <li>Some a capella songs<!--parent list item; let's make another OL of a different TYPE--> <ol type="a"><!--opens child list--> <li>Imagine Dragons Melody - Jared Halley</li><!--child list item--> <li>Something Just Like This - Mike Tompkins</li><!--child list item--> </ul><!--closes child list--> </li><!-- closes parent list item--> </ol><!--closes ordered list-->
However, if you have WordPress, you should be able to achieve similar results by pressing TAB to create nested lists.
Lists are frequently used for navigation, the CSS for the
<ul>‘s class containing
list-style: none; or something similar.
On my archive page, I add
.column (class) to my
<ul> elements to make them display in well-proportioned columns. The code looks a bit like this:
<ul class="column"> <li><!--list item--></li> <li><!-- list item--></li> </ul>
Though this requires more coding knowledge, it is not impossible. Coding requires a lot of trial and error; it’s problem-solving much like logic puzzles. You don’t learn how to work logic puzzles until you actually try them for yourself.
BUT! Once you get it going, you’ll find you can tweak things how you like them. I’ve been told something isn’t impossible and then a year later seen someone have that feature with the latest code (because even code gets upgrades).