HTML and ‘tags’

HTML is a formatting language. That means that it affects how what you write appears on the page. You break it up into chunks and assign “markup” to them, which tells the browser how to present it to the viewer. And you mark up the text by adding “tags”.

Definition

formatting

Changing the appearance of plain text to make it easier to read, giving it more impact through the use of headers, paragraphs, line breaks, etc.

markup

Code you add to plain text to tell the browser how it divides up into different parts by purpose or appearance.

HTML tags

Specific snippets of code added to plain text to make a browser interpret or display different sections in different ways.

Microsoft Word produces attractive documents for you as you work. It uses markup to do this, though the markup is invisible to you. Notepad produces plain text documents. There is no markup. However, many designers type web documents in plain text, adding tags in afterward or as they go. When they save these documents as .html, they open in a browser window as a completed document, not one long paragraph of plain text with some code showing.

Most tags have a beginning tag before the chunk of text you want to format and an end tag after it. There’s not an HTML tag called ‘tag’. But if there was, this is what it would look like:

<tag>Format Me!</tag>
Because there’s not a tag called ‘tag’, if I were to put this into an HTML document, the browser would ignore the tags. They would not show in the browser window. Anything between ‘<’ and >’ that the browser does not recognize will be ignored. So if you spell your tags wrong, they won’t work. It’s really easy to spell them wrong, so if you want to do HTML, you’re going to have to start proofreading carefully.

Some tags do not have a separate end tag. All the work happens within the one tag.

<tag=”Tag!”> or <tag=”Tag!” />
mean the same thing. We use the first one to format on Niteflirt to save characters. The second one is a little more web-friendly.

The last thing to remember about tags is that you have to nest them properly. Tags that overlap can do all kinds of crazy things to your page. This is easy to do properly when you’re writing it in the first place, and much harder to figure out when the page is all written and seriously messed up.

You can see that the lines cross in the second one. That’s not nested.

Assignment

You can look at the source code for any page online, but most pages nowadays have plenty of stuff in the source code that is not HTML. You might find that really confusing. So I have made a page from this tutorial. It doesn’t look exactly the same as it does here, because WordPress blogs add formatting. On that page, only the markup in the code is operating to format the page.
See this page in plain HTML.

Now go to the menubar. Click View => Source. A window or tab should open showing you the source code. Look at how the tags enclose pieces of text. Everything in this window—and much more—will become clear by the time you finish this series of lessons.

Next lesson: Headers and Subheaders