Purfylle: HTML Terminology Every Blogger Needs To Know

Recent Posts

Wednesday, 8 June 2016

HTML Terminology Every Blogger Needs To Know

HTML For Non-Techy Bloggers

Last time we learned How to View HTML, today we are going to learn a few terms that you need to be familiar with to be able to understand what on earth I'm referring to when we start to discuss what bits do what in HTML.

There's all these strange words that get used to explain HTML code and many of the explanations may as well be in an alien language so far as it makes any sense to the uninitiated.

I'm going to try to explain these terms in a way that is not technical. That means these explanations are over simplified to a point where they may cause a few '...but, but, but...that's not the whole story' from professionals. But!..we're not professionals, we're bloggers, we just want to know enough to keep our site from looking awful. If you would like a more technical and complete explanation a quick web search will give you results.

NB: The web log platform  I use is Blogger so these tutorials will be from a Blogger platform perspective however if you use Wordpress or some other blogging platform they should still be helpful to you.

HTML Terms 

HTML - Hypertext Markup Language

Syntax - computers need to be told exactly what you mean and you need to tell them using terms that the computer understands. Basically 'syntax' is the techy term for 'correct grammar' when talking about computer languages. 

Elements - an element is a section of HTML.  The same way a book is made up of a Title page, chapters, paragraphs, sentences, lists and other various 'elements' such as images;  HTML is also made up of 'elements'.  It's a bit more complicated then that but it's a good enough correlation to get you started without having your brain explode from trying to understand the explanation itself.

Tags - tags are essentially the name given to an instruction, and you can tell that it's an instruction and not your page text because it is inside angle brackets <tag>

Angle brackets - pointy brackets, also known as the less-than and greater-than symbols and can be found on your keyboard with full stop and comma keys.
Opening tag - an opening tag indicates the beginning of the instruction. An opening tag is inside angle brackets <tag>

Closing tag - a closing tag indicates the conclusion of an instruction. A closing tag will be inside angle brackets and it will have a slash to indicate that it is the end of a tag  </tag>

Attribute (attr) - attributes indicate extra information about an instruction such as style  <tag style>

Value - the specific details of an attr <tag style="colour: red">

Anchor - The anchor tag is used to define hypertext link but we'll do a whole tutorial on those later

There are a lot of terms you will come across but these are enough to get us started. 

Now remember in How To Read HTML we learnt that viewing code in a code editor gives us code in colour. The different colours make it easier to visually separate out each part of the code.

Each code editor has it's own colour pallet but in CodePen the colours are

Tawny Brown for tags

Dijon Mustard Yellow  for attrs

Sage Green for values

White for text


<tag style="color: red">some text</span> 

I'm guessing I've totally confused you at this stage, and just to confuse you some more there is no such tag called 'tag'.

So let's replace 'tag' with a real tag, there are many to choose from but lets go with something really simple - a 'span'. A 'span' is just that a 'span' from here to there.

<span style="color: red">some text</span>


Which will look like this when previewed or published: 

some text

And if we were to change the colour attribute to blue instead:

<span style="color: blue">some text</span>

It would then look like this when previewed or published.

some text



And that's all for today's lesson. Later in our HTML For Non-Techy Bloggers series we'll look at some common tags and what they are used for, we'll learn how to make your own blog or party button with grab boxes, how to troubleshoot alignment issues, what an affiliate link should look like and more. Tell me what your HTML stumbling block is, what's driving you crazy this week?



Sorry it took so long to get part 2 of this series out, but I'm all recovered from that nasty flu/cold thing I had now and we can delve right back in.




6 comments:

  1. I appreciate your efforts in trying to teach us - slash, me, simple blogging terminology. Great post for the non techy, but, sorry, I'm still confused! Not to worry, though! My hubby is a computer expert and if his knowledge hasn't rubbed off on me after all these years, I'm just a hopeless case!

    ReplyDelete
    Replies
    1. Well we haven't tried to make any code yet, this was really just the glossary to look back at once we start to learn HOW to write code. I haven't given up on you yet!

      Delete
  2. Thank you, thank you, and thank you some more! I'm already familiar with these terms, so honestly, I almost skipped this post... But then I realized that some of my editing never works because I'm not including the "/" in my end tags (duh). Sometimes I think I know just enough HTML to frustrate myself.

    ReplyDelete
    Replies
    1. I know that feeling! Knowing just enough to get frustrated. The thing is I'm not sure it ever goes away 0_o
      I'm so glad I was able to help (and we haven't even really got to how compose code yet)

      Delete
  3. My fingers are in my eyes, and I'm singing "LALALALALA".
    I can't hear you!
    LOL

    ReplyDelete