Learn HTML and CSS – HTML Tags 101
What follows is partly a blog project I did for a beginner’s HTML class I was taking. The project was to make a blog about anything and I decided to use what I’d been learning in the class as the subject matter for my blog, thinking it would reinforce my lessons. (I’m pretty sure there’s a saying there: if you want to learn it, teach it. Or some variation. I’m going to find it in Latin. I’ll be back with that later.) Anyhow, I am, being 2 to 3 weeks more expert than when I wrote the original blog, going to use some of the material but also edit and amend. So this is a blog within a blog about the language of The Blog. My original blog was all written directly in HTML and CSS without the assistance of a cool tool such as WordPress which allows ‘regular’ typing. So I am having to take out some things which look like gibberish on WordPress. For example, I was proud of myself for having discovered that if I typed (in an HTML editor) </head>, what showed up was </head>, the ampersands et cetera performing strange, behind-the-scenes deeds. (One does not simply type the < character as text in an HTML document… it will be read as code. And, to boot, it’s considered rather gauche.) However, in our more advanced WordPress editor (and I have no idea why this is so) </head> shows up as… guess what? </head>. Which defeated my pedantic goals. Anyhow, enough small talk. We’ll begin with the AB<‘s.
The following structure, which have termed the Skeleton and which is not formatted the way an HTML editor would format it, will (I won’t say must, but I believe it’s close) be used to set up the most simple HTML page. Each of the doodads between angle brackets is a tag. Tags will be the topic of the day and are a cornerstone to HTML. You will not travel far without them.
So, to explain: the first line, with the doctype, tells the computer what language (HTML in this case) you want to use. The second line, the <html> line is where it begins. (Notice that with the <html> tag and most tags, such as <head> and <body> there is a corresponding closing tag (which is the tag beginning with the forward slash: </html>, e.g.). The two tags create an element.
The head tags enclose the meta charset tag (here, though I’ve looked it up, suffice it to say that for now you just do this. If you really want to know what it means, Google it. But it’s not very interesting and it’s beyond my pay grade).
The title, inside the title tags, is what will be displayed at the top of the browser as well as on the tab markers in your browser. The title tag is preprogrammed with a certain font style, i.e. size and weight. There are a number of other tags which will have preordained fonts and characteristics. Everything is changeable if there’s something you don’t like the looks of.
Then there is the <body> tag and the </body> tag. Between these is where, not all that surprisingly, the body of the page goes.
LAGNIAPPE: There are lots of places to type code. I’ve used the editor that my class gives me and I’ve used Notepad++ and Codepen. You can even use Word. Just make sure to save your files with .htm or .html extensions in whatever program you use. I would recommend picking an editor built to type code versus using Word or something not specifically for the purpose. There’re plenty of free programs and they’ll help you with formatting the code (indentations, color coding, etc.). I’ve tried three so far and all three have some things that I like better than others. At my level, I’ve found not much to complain about. But I do know that Word, a program I love and use often, is not the best program for coding.
HTML Basics – some more tags
PARAGRAPH TAGS <p></p> (This is the tag around what I’m writing right now. Just normal old text. The editor I originally typed this in showed changes as I made them (in the editor, not on a web page) and I couldn’t figure out why my changes weren’t showing up. It was because I hadn’t yet included a closing tag, </p>, in order to complete the element.
BREAK TAG <br>: break tags do not have closing correspondents. They do not carry any information; they are simply a command. <br> will give a line break.
<p>Jack and Jill<br>went up the hill<br>to fetch a pail of water…</p>
would show up as:
Jack and Jill
went up the hill
to fetch a pail of water
(Most tags have a counterpart that closes them, so <p> has </p> creating the paragraph element, etc. There are those known as empty elements, void elements or singleton elements (all the same thing) which do not have a closing tag, such as the <img> tag which is used for, not strangely, images. As I understand it the difference here is that these tags are not carrying information but attributes (a reference to an image, for example) or are just simple commands, such as <br> for break.
STRONG TAG: There is the <strong> tag.
EMPHASIS TAG: There is the <em> tag.
SUPERSCRIPT TAG: There is the superscript <sup> tag.
SUBSCRIPT TAG: There is the subscript <sub>tag.
This is an <h1> </h1> element
This is an <h2> </h2> tag set
This is an <h3></h3> tag set
This is an <h4></h4> tag set
This is an <h5></h5> tag set
This is an <h6></h6> tag set
Ha! There it is. Uncharted territory in this New World we call HTML: when I try to use an <h7> tag in Notepad++ and then run it in Chrome, my line (which had been an <h3>) disappears so apparently the browser does not know how to interpret it. (And, so that you feel safer, after experimenting I did also look it up and the heading sizes are 1 through 6.)
“If you want to learn something, read about it.
If you want to understand something, write about it.
If you want to master something, teach it.”
credited to Yogi Bhajan on his website, but I also read it was an old Hindu proverb. It’s a mystery.