5 Steps To Understanding Basic HTML Code

cool html codes   5 Steps To Understanding Basic HTML CodeHTML is short for HyperText Markup Language. That’s gibberish for ‘something that makes plain text look good’. It’s the ‘code’ that’s behind every webpage. Even this one. And, surprisingly, it’s actually quite simple.

The teachings of basic HTML code can (almost) be broken down in two all-ruling disciplines: style a.k.a manipulating the appearance, and referring, a.k.a marking and pointing to locations of, and within documents. HTML can’t do anything more complicated than drawing a table, or creating frames, and we’re not going to cut into PHP or Java.

Yet HTML is still far off the beaten path for your average Joe. It’s wizardry, and none of your business. My goal today is to give you some of the HTML building blocks in the course of a few minutes. You won’t be a programmer just yet, but you’ll be able to skim the source of a webpage, understand it, and grab that image that Flickr is trying so hard to keep from you.

Step One – The Concept Of Tags

As said previously, basic HTML code manipulates a plain text document to apply style and reference. It does so by applying ‘tags’. A tag does nothing more than indicating a position or selection of the document, and specifying the kind of wizardry that needs to be done.

<tag-example-1>This, and only this part of the document is affected.</tag-example-1>

<tag-example-2>Something just happened, preceding this part of the document

Example 1 shows a sentence that’s encapsulated by two tags, a begin- and end tag. Everything in between is affected. Very common examples are making text bold, cursive, or creating a link. The end tag is identical to the begin tag, but is preceded in angle brackets by a forward slash ( / ).

Example 2 shows a tag that works alone and (arguably) doesn’t need to be closed. Although not required, it’s occasionally also written as <tag /> to emphasize this very attribute. Loner tags don’t affect ‘part’ of the document, but signify local wizardry, things that happen ‘in between’. Common examples are line breaks and paragraph breaks.

Note: for loner tags, <tag>, <tag />, and <tag></tag> all mean the same thing.

<tag attribute=”value” attribute2=”value2″>This, and only this part of the document is affected.</tag>

Sometimes tags allow for additional attributes to be supplied. Common examples are text font and color, or image width, height and source. In those cases, the tag name is followed by a space, and a number of attribute with a value, again separated by spaces. The value is the variable part of this formula. Note that the end tag remains the same, regardless of the attributes.

We’ll review some common tags in the next few steps.

Step Two – The Parceling of HTML, HEAD & BODY

The HTML, HEAD and BODY tags are to an HTML document what a bedroom, kitchen and living room are to a house. These encapsulating tags parcel out the big parts of a document.

  • <HTML></HTML> simply indicates the use of HTML code. They’ll show in every webpage, usually at start and end, and embrace practically all the other code, including the next two.
  • <HEAD></HEAD> mark the ‘administrative building’. These will encapsule the title, and enable certain scripts. Usually at the very head (no pun intended) of the document, this is where you don’t need to be.
  • <BODY></BODY> is located below the HEAD tags, and makes up most of the document. This part tells the tale of what’s actually showing on your webpage. Living here are the text, images, links, and pretty much anything you can see in your browser. This is where we play. The following tags all occur within the BODY part of an HTML document.

html head body   5 Steps To Understanding Basic HTML Code

Step Three – Because <P>, <BR> & <FONT> Make You Feel Pretty

We’ve already said HTML was a markup language. This means as much as making text feel pretty. Remember, HTML dates back to when the web was a very text-y experience. Besides, the internet would’ve been far too slow to support YouTube. Here are some of the most common pretty-making tags.

  • <b></b> makes your text look bold
  • <i></i> makes you write in cursive
  • <u></u> underlines what you just wrote

You’ll be delighted to know that these also work in the comments section. Don’t overuse them, though.

  • <br> hits the break, making you continue on a new line
  • <p> indicates a paragraph, creating an extra large break

These allow you to structure the document, because an actual break doesn’t mean anything in an HTML document.

<FONT></FONT> allows you to manipulate a bunch of other stuff with text, by using attributes like size, face and color.

An ideal example would be <FONT color=”blue”>smurfs</FONT>.

  • <H1></H1> to <H6></H6> allow you to quickly draw up different sized headers. H1 is biggest and H7 smallest. The ones we use in MakeUseOf articles are usually about H3.

Nowadays, markup is often kept in a separate CSS file. The exact style figures are explained externally, and one only needs to ‘mark’ part of the document to apply them. This is done by using div tags. For example, <div class=”headermakeuseof”>sometext</div> will look for a headermakeuseof class in the CSS file. We won’t discuss this in detail.

Step Four – Embedded Images with <IMG>

Images have become customary on HTML pages, and yet there’s a piece of code behind it. The <IMG> is one of two tags we’re going to discuss in detail, because it’s something you’ll be able to use. Just think of those annoying web sites that don’t allow you to download some pictures to your desktop (I’m looking at you, Flickr). Next time, just go into the source and grab the source yourself.

Here are some of the attributes used in conjunction with the IMG tab.

  • src=”http://site.com/image.jpg/”

Very important. The source attribute specifies the location of a picture. That’s right, a picture is never really rendered in a web page, but gets pulled in from an external source. Once you’ve got that address, you’ve got the picture.

Sometimes, only part of the URL is displayed. The actual URL will depend on the location of the HTML file. This is called a relative address, contrasting with an absolute address. An exemplary http://site.com/dir1/dir2/dir3/page.html may show a value of “image.jpg” when the picture is located in the same directory as the webpage. In this example, the full address would be http://site.com/dir1/dir2/dir3/image.jpg.

If you encounter a relative address of “dir4/image.jpg”, the image will be located in http://site.com/dir1/dir2/dir3/dir4/image.jpg

Similarly, “../image.jpg” will have you go back one directory, “../../image.jpg” two directories, and so on.

  • height=”200″ width=”50%”

These tags define how large the image is displayed. It doesn’t say anything about the actual size of the image. Sizes can be added in pixels (where 200 and 200px are one and the same) or percent. With only height or width specified, the other one changes accordingly. Using both tags allows you to ‘stretch’.

  • alt=”alternative name or comment”

The alt tag specifies the text shown on mouse-over, or when an image fails to load. More specifically, these are what XKCD uses for those funny afterthoughts.

Proper usage would be, e.g. <IMG src=”image.jpg” height=”20px” alt=”example”>

Step Five – Links Are Made With A Tag

This one could be even more important than the IMG tag. An <a></a> tag allows you to mark a spot in a document, and link to documents, pictures, files, and even anchors in other HTML sites. Here are the most common attributes.

  • href=”http://www.makeuseof.com”

One of the most common attribute, written <a href=”address”>text</a>. You can create links by defining the web address and encapsulating said ‘anchor text’. Links can also be used in the comments section, provided you don’t link to spam or inappropriate content.

  • name=”neverwhere”

Used in conjunction with the name attribute, the tag will create an anchor. You can use this anchor to link back to from within the same page, or even over the web. One can link to an anchor by using a relative or absolute URL, respectively <a href=”#name”> or <a href=”http://site.com/page.html#name”>.

In Conclusion

This is the part where I admit we’ve only brushed the surface of basic HTML code. What we’ve seen today will allow you to skim through and understand a big part of simple websites. Go ahead, try it. You’ll definitely find some tags you don’t know, but that’s where Google comes in handy. If you’re willing there’s a lot more information where that come from, and you can all find it online.

If you’re looking for something very specific, like an image, an audio file, or a link, there’s no need to read the entire HTML page. Press Ctrl+F and search for those files or the relevant tags. You know what you’re looking for now, and especially when you’ve found it.

What do you think? Your first or last encounter with HTML? Let us know what you think in the comments section below, and don’t be afraid to try out some of the markup code!

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

15 Comments -

0 votes

pseudocube

needs to have a closing tag, and should be You used to be able to use as a large line break, but with all this new web tech coming out, you shouldn’t introduce deprecated tags to ‘newbies.’ Very nice article otherwise, nice job.

0 votes

pseudocube

needs to have a closing tag, and should be You used to be able to use as a large line break, but with all this new web tech coming out, you shouldn’t introduce deprecated tags to ‘newbies.’ Very nice article otherwise, nice job.

0 votes

pseudocube

I meant to say:

<p> needs to have a closing tag, and <b> should be <b /> You used to be able to use as a large line break, but with all this new web tech coming out, you shouldn’t introduce deprecated tags to ‘newbies.’ Very nice article otherwise, nice job.

0 votes

Simon Slangen

Thanks for the feedback.

That’s definitely where the ‘arguably’ part kicks in. :-D To be entirely in the green, you should indeed include that end tag. But right now, you generally don’t have to. And a lot of people still don’t. With this being an introduction to ‘understanding’, rather than developing, I chose not to stress the end tag too much.

<b />? Sure you don’t mean <br />?

0 votes

Chad R. Smith

I do think that this is a great simple tutorial to showcase the easy tags that every designer from here to X2191 needs to know for HTML. I would have liked to see more of the HTML4 vs HTML5 tags. Show the newer tags, and that’s what we are doing at http://theeasyapi.com besides offering a simple API that interfaces with other API’s through one easily accessible API we are moving our code to more of a HTML5 format. This is a great step though in the “newbie” instructions.

Also yes, I think pseudocube meant not .

0 votes

Chad R. Smith

I do think that this is a great simple tutorial to showcase the easy tags that every designer from here to X2191 needs to know for HTML. I would have liked to see more of the HTML4 vs HTML5 tags. Show the newer tags, and that’s what we are doing at http://theeasyapi.com besides offering a simple API that interfaces with other API’s through one easily accessible API we are moving our code to more of a HTML5 format. This is a great step though in the “newbie” instructions.

Also yes, I think pseudocube meant not .

0 votes

topspin

Doesn’t XKCD use the title attribute for the funny afterthought text, rather than the alt attribute?

0 votes

Simon Slangen

It appears you’re right, thanks for the fix.

0 votes

Jack Cola

You forgot the basic table structure and that HTML is dead, it’s now (X)HTML.

Tables
//Open the table
//the tags make a row
//The tags, the more columns you get.

//So if you want to make more rows, just repeat the above.

Also note, //is not how to comment in HTML<table> <tbody><tr></tr><tr> <td>column</td><td> tags make a column. The more of these you have in between </td></tr><tr> <td>column2</td> </tr></tbody></table>

0 votes

Jack Cola

You forgot the basic table structure and that HTML is dead, it’s now (X)HTML.

Tables
<t.able> //Open the table
<t.r> //the tags make a row
<t.d>column</t.d> //The <t.d> tags make a column. The more of these you have in between tags, the more columns you get.
<t.d>column2</t.d>

//So if you want to make more rows, just repeat the above.

Also note, //is not how to comment in HTML. Also, remove the . inside the tags, as they don’t show in the comments.</t.d></t.r></t.able>

0 votes

Jack Cola

You forgot the basic table structure and that HTML is dead, it’s now (X)HTML.

Tables
table //Open the table
tr //the tr tags make a row
td column /td //The td tags make a column. The more of these you have in between tr tags, the more columns you get.
td column2 /td

/tr //So if you want to make more rows, just repeat the above.

Also note, //is not how to comment in HTML. Also, put a < and > around the words table, tr, and td. They don’t show in comments, and sorry for the multiple comments. :(

0 votes

Jack Cola

You forgot the basic table structure and that HTML is dead, it’s now (X)HTML.

Tables

//Open the table

//the tags make a row

//The

tags, the more columns you get.

//So if you want to make more rows, just repeat the above.

Also note, //is not how to comment in HTML

column tags make a column. The more of these you have in between
column2
0 votes

Jack Cola

You forgot the basic table structure and that HTML is dead, it’s now (X)HTML.

Tables
//Open the table
//the
tags make a row
column //The tags make a column. The more of these you have in between
tags, the more columns you get.
column2

//So if you want to make more rows, just repeat the above.

Also note, //is not how to comment in HTML. Also, remove the . inside the tags, as they don’t show in the comments.

0 votes

Jack Cola

You forgot the basic table structure and that HTML is dead, it’s now (X)HTML.

Tables
table //Open the table
tr //the tr tags make a row
td column /td //The td tags make a column. The more of these you have in between tr tags, the more columns you get.
td column2 /td

/tr //So if you want to make more rows, just repeat the above.

Also note, //is not how to comment in HTML. Also, put a < and > around the words table, tr, and td. They don’t show in comments, and sorry for the multiple comments. :(

0 votes

Massimo

in XHTML you must close all the tags

is deprecated, use
is deprecated, use
i deprecated, use css (… and better if you use a class and define style apart
such as … and in the header you define the css
.specifyareasonwhyyouunderline { text-decoration:underline; }
or you link it from an external resource

is deprecated, use css (font-family: arial, verdana, sans-serif;)

heigth=”200″: if you increase or decrease the page dimension this element doesn’t change, use a relative unit like a percentage or em or ex

onmouseover is device dependent, use onfocus (and onblur)
;-)

0 votes

Massimo

in XHTML you must close tags

<b> is deprecated, use <strong<…</strong>
<i> is deprecated, use <em>…</em>
<u> i deprecated, use css (<span style=”text-decoration:underline”>…</span> and better if you use a class and define style apart
such as <span class=”specifyareasonwhyyouunderline”>…</span> and in the header you define the css
<style type=”text/css”> .specifyareasonwhyyouunderline { text-decoration:underline; }
or you link it from an external resource

<font> is deprecated, use css (font-family: arial, verdana, sans-serif;)

heigth=”200″: if you increase or decrease the page dimension this element doesn’t change, use a relative unit like a percentage or em or ex

onmouseover is device dependend, use onfocus (and onblur)
;-)

0 votes

Massimo

in XHTML you must close all the tags

is deprecated, use
is deprecated, use
i deprecated, use css (… and better if you use a class and define style apart
such as … and in the header you define the css
.specifyareasonwhyyouunderline { text-decoration:underline; }
or you link it from an external resource

is deprecated, use css (font-family: arial, verdana, sans-serif;)

heigth=”200″: if you increase or decrease the page dimension this element doesn’t change, use a relative unit like a percentage or em or ex

onmouseover is device dependent, use onfocus (and onblur)
;-)

0 votes

Massimo

in XHTML you must close tags

<b> is deprecated, use <strong<…</strong>
<i> is deprecated, use <em>…</em>
<u> i deprecated, use css (<span style="text-decoration:underline">…</span> and better if you use a class and define style apart
such as <span class=”specifyareasonwhyyouunderline”>…</span> and in the header you define the css
<style type="text/css"> .specifyareasonwhyyouunderline { text-decoration:underline; }
or you link it from an external resource

<font> is deprecated, use css (font-family: arial, verdana, sans-serif;)

heigth=”200″: if you increase or decrease the page dimension this element doesn’t change, use a relative unit like a percentage or em or ex

onmouseover is device dependend, use onfocus (and onblur)
;-)