Today I’m going to share a super basic HTML lesson. I figure the best place to start is at the very beginning. HTML and CSS are both necessary coding languages in the blog and design world, but it’s really important to know the difference. For those of you already understand HTML, this may be a snoozefest. Not to worry! I have coding tutorials lined up for days. :)
HTML stands for HyperLink Text Markup Language and is the standard language used to develop web pages. While customizing your blog, you might not end up seeing your HTML very often, but knowing the basics does come in handy when editing specific pages, posts, and widgets on any blog platform.
HTML consists of tags, which are attributes surrounded by angle brackets. All opening brackets must be closed. The left column below shows what the HTML structure generally looks like. To the right, you can see definitions of each main tag.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> – This shows your browser that you are using HTML5. Helpful info on the DOCTYPE declaration can be found here, but you don’t necessarily have to understand everything about this attribute.
<html> – This begins a series of nested HTML tags that make up your website.
<head> – The “head” tag is where you can place tags such as your title, CSS stylesheet, and mobile view configuration codes.
<body> – The “body” tag consists of your content. Everything here will be visible on your page.
Common attributes for the <body> section:
<a href=”URL”> – Hyperlink
<alt> – Alternative text for when element cannot be displayed
<b> – Bold text
<br> – Single line break
<div> – Section in a document
<img> – Image
<h1>, <h2>, <h3> – Varying levels of headings
<p> – Paragraph
<span> – Groups inline elements (good for adding CSS without creating a paragraph break)
<title> – Controls title on your browser bar
When it comes to blogging, I use HTML in layout widgets and occasionally blog posts. Unless you’re building a website from scratch, your basic HTML structure is probably taken care of. All that’s left to do is fancy it up! I’ll be blogging all about CSS in a few days, which is where the magic happens. For the sneak peak, go explore the new interactive CSS Cheat Sheet. Enjoy!
PS. If you haven’t already signed up for the forums, click here to join the party! Your profile picture is attached to Gravatar, so you can visit the website to change it.
Sarah says
Thanks! I’m so excited to be following along with your new blog. I use this stuff all the time, but I’m embarrassed to say that I don’t really have a strong understanding nor do I know the proper words for everything. Thanks for explaining ‘that bracket thing’ Ha! :)
Jennifer says
I’m so glad you like it Sarah! I know what you mean haha, it’s like a foreign language.
Laura says
Thanks so much, I have a very basic understanding so starting from scratch really helps in my case. Looking forward to more posts, I have a feeling that this is going to really help me improve and find out what I can do with my blog!
http://www.fitfoodfun81.blogspot.com
Jennifer says
Aw, thanks Laura! I hope it helps!
Paige @ Little Nostalgia says
This is so handy! I know, like, the very bare bones basics, but I usually forget things right when I need them.
Congrats on the new site! Very exciting. :-)
Jennifer says
Thanks so much Paige! Glad you like it. :)
Tiki says
Such a good and helpful post! Thank you!