You have reached a point in your life where one of two things has happened. You either are curious about how to edit HTML or you are required to edit it because of work or school.
Have no fear. I am starting a series dedicated to covering the basic ins and outs of web programming, starting with HTML!
Let’s dive right in.
What HTML is
If you have ever done a “view source” on a webpage, you have probably seen something like this:
It is also possible that viewing that code made your head explode.
After piecing your head back together, you can start dissecting the structure and you may begin to see that the text follows a pattern.
HTML is a language of tags that are nested within one another. To help you visualize, it’s kind of like those Russian dolls. The top to each doll is an open tag and the bottom is a closing tag. If you open up a doll, you find more dolls (tags).
With HTML, however, you can nest more than just one tag at a time. You can nest as many as you’d like.
What HTML isn’t
HTML is sometimes referred to as a programming language. This is an incorrect statement. HTML is actually a markup language. In fact, it stands for Hyper Text Markup Language.
Markup languages are more for storing simple data and formatting rules whereas a programming language is used to execute commands and manipulate data. In the case of HTML, the language is used to tell a web browser how to display the content.
How HTML works
As I said, HTML tells the browser how to display content. This is done by the different types of tags and their placement on a page.
HTML is read from the top down and, as such, content is typically rendered using the top down. So if you have an image tag before a paragraph tag in your code, the image will render before the paragraph. Alternatively, if you were to move that image tag after the paragraph, it would show up after the paragraph on the rendered page.
Along with the placement, tags have attributes that you can use to manipulate how things are rendered. Tags largely control placement and browser interpretation and attributes control the look and feel of a tag.
Tags
As I previously stated, tags are used to nest and display objects as well as place them on the page, but what exactly is a tag?
A tag is a piece of the markup language that dictates browser behavior. For instance, a “p” tag indicates you would like to use a paragraph, and an “img” or image tag indicates that you would like to display an image on your web page.
All tags are encased inbetween the greater-than(>) and less-than(<) symbols. If the browser ever sees a raw greater-than or less-than symbol, it automatically assumes it’s a tag.
Every tag has an open and closed version, though some are combined. What this means is that some tags allow additional content to be nested within, but not all tags nest. To use our earlier example, the “p” tag allows content to be embedded within it where the “img” tag does not. These are written differently:
1
2
3
4
5
6
| Because the p tag has opening and closing tags, you can put stuff in it!
This is my content
Image tags can't do that since they self close with a slash
<img src="cat_pic.jpg" alt="" /> |
Notice the p tag has opening and closing tags while the image tag ends with a slash. The image tag is what is known as a self-closing tags. While any tag could potentially be a self closing tag, I have yet to find a reason to use a self closing tag beyond the “img”, “br”, “link”, “input”, and “hr” tags. I know there are more self closing tags, but those 5 are the most common.
Attributes
If you look closely at the image tag in the example I laid out above, you will see an attribute at work. The image tag uses the “src” attribute to tell the browser where to find the image that you want to display. So when you have <img src=”cat_pic.jpg” />, the browser looks for cat_pic.jpg in the same folder as your html file.
All tags have some attributes, the most useful of which is the style attribute, which I will cover in a later post. These attributes help to modify how the tag looks and acts.
Attributes are always included as part of the tag and are found between the greater-than and less-than symbols. You assign values to each attribute by saying the attribute = “something”. The values must always be contained in either single or double quotes.
In Closing…
That is HTML in a nutshell. In the next installments I plan to cover actual HTML code. Further past that I plan on introducing CSS, HTML5 and Javascript. Should be a good ride for all you newbies out there. For all your code masters, correct anything I say that may be wrong. I’d rather have this accurate than having too much pride to admit I’m wrong.
