HTML is a structure.
An extremely straight-forward structure.
This is, obviously enough, what HTML starts with. Everything below that is HTML.
(Told you it was straight-forward.)
This is what HTML ends with. Everything above that is HTML.
HTML is 100% about saying where things begin and where they end. If you mess this up, and forget to specify where something ends, you fail at HTML.
It always works the same way. Things begin with <x> and end with </x>.
<> is here because reasons.
/ is here to mark the end of something.
Every web page is coded like this: <x>content of x</x>
For instance, if you open google.com, you’ll notice the corresponding tab or your browser window is called “Google”. That’s the title of the page.
Now, open the source code (right click, view page source) and do not panic. Yes, google’s source code is super fucking complicated. In the first few lines, though, you should find something like this:
This is the part of the HTML code that displays “Google” on your browser tab.
As another example, if I want to write “I love video games” somewhere on my page, I will write this:
<p>I love video games.</p>
<title> is your pages’s title, and <p> is any paragraph written on the page.
HTML works like a menu system. If you open your edit HTML page, you’ll see many of the HTML tags like <html> or <body> have other tags in them.
Think of it as big boxes with smaller boxes in them.
Everything I will write here works on any website. If something is specific to tumblr, I’ll signal it.
<html></html> is used for HTML. Everything you’ll want to add goes in there.
<body></body> is used for your page’s content. Everything displayed on your page, like posts, menus, etc, is in the <body>.
<title></title> is your page’s title, as I showed you earlier.
<style type=”text/css”></style> is your CSS. (1) It’s in your <head>. It’s all in your <head>.
<div></div> is the HTML equivalent of a box or a division. Most pages are programmed by putting <div> and giving those <div> a name, then giving them special properties through CSS (2).
<ul></ul> is for lists. Whole lists go between those two. Do not ask me why this is called ul.
<li></li> is for a line within a list. Separate lines all have their own <li> tag. (3)
<a></a> is for links. It’s written this way: <a href=”url of the link”>text of the link that will be displayed on your page</a>.
<center></center> is used to center text.
Pro-tip: don’t use it. You can define how a text looks in HTML, but it’s tedious, and much more convenient to do it via CSS instead.
<p></p> is used for paragraphs or you can also not use it and your text will display just fine.
<img src=”url of the picture”> (YOU DO NOT ADD </img> ANYWHERE, THIS IS ONE OF THE ONLY CASES WITH NO END TAG) is used to insert pictures.
<br/> is used to skip a line. It looks like a fucked up end tag, but works on its own. You can also just use <br> but it doesn’t work with some HTML versions so play it safe.
Pro-tip: in your customization menu, in the description box, you can add some HTML such as <br/> to skip a line. It helps to have neater descriptions.
<span></span> work a lot like <div> except it’s a smaller box. <div> is used for entire portions of websites, while span can be used within a paragraph. It’s really just a smaller box, and serves the same kind of purposes (giving properties to everything between the tags).
Everything else you can find in your HTML is either self-explanatory or something you won’t need to change if you’re just trying to modify how your theme looks.
(1) Here the base tag is <style></style>, but to specify which language you’ll be introducing, you need to add type=”text/css”.
You can specify a lot of things in a tag the same way. You can add things like style=”font-family:streetscript; font-size:15px; text-align:center;”. I took this at random from my page, but based on the code I’d say it’s my blog’s title.
style=”x” defines the style of what’s going between the HTML tags. The font, font size, and the center effect in the code just above will apply to everything between the tags that piece of code is in.
If I want to write a paragraph in Arial font size 11, I’ll write this:
<p style=”font-family:arial; font-size:11px;”></p>
A general rule in HTML is that everything after an = must be between " because reasons.
A general rule in most languages is that things end with a ; also because reasons.
This is a lot of information to absorb, so don’t try to remember it all. The best way to start coding is to first understand how to read HTML. As long as you know what <> means, what / means, what ; means and a bunch of other things, you’ll be able to understand most basic code you read.
Instead of trying to remember everything to write code out of nowhere, open your theme edit HTML page, and read it. If you want to change something in your theme, find where it is defined in the code, and then change it.
Finding the proper line of code to obtain a specific result isn’t hard to do on the internet, as long as you understand your page’s structure. Understanding the language’s structure is way more important than remembering how to do specific things with it.
(2) A common way to give a name to a <div> is to write <div id=”name”></div>. Then, in the CSS, you can use #name to add properties to your <div> which is neato. More on that in a tutorial about CSS.
(3) A list will be written this way:
<li>First item on the list</i>
<li>Second item on the list</i>
<li>Third item on the list</i>