Basic HTML Tags
Most common HTML tags:
P, BR, B, SPAN, TABLE, DIV, IMG, H1As you can see HTML tags are nothing more than collections of characters. Most HTML tags are represented by 1 to 5 characters.
One of the most basic usages of HTML is to create a paragraph:
<p>This is my paragraph.</p>To create a paragraph on a webpage, you would "wrap" a sentence or a number of sentences in a P tag as shown above. The opening tags don't include a slash. But as a rule, the closing tag must include it.
If the slash was missing from the closing tag, the browser would have no way of knowing whether you are trying to terminate the current paragraph or start a new one!
In many cases HTML code will complete itself even if you commit the mistake of forgetting to close the tag. For example, the following example will produce two lines of text separated by an equal amount of space between each other.
<p>This is my first paragraph.
<p>This is my second paragraph.Doing it this way, however, is highly unadvisable but incredibly useful to know and understand when writing HTML code for your first webpage. The reason for this behavior is that even though the closing P tag (for the first paragraph) is missing, the browser would rather display the second paragraph rather than include both lines in one paragraph. In fact, it used to be acceptable not to close HTML tags at all when the HTML language emerged in the 90s. Again, in the modern day and age it is no longer advisable not to close your tags, even if the browser will auto-close them on its own when displaying your website.
Another reason for this neat auto-complete feature is that browsers download websites in chunks. Let's say that your browser downloaded half of the page just before the Internet connection was terminated for whatever reason. The nature of HTML language must consider dropped connections and do something about the "unfinished" code. This assumes that the browser must make some kind of a decision on lines of code which omit the closing tag.
Lowercase or uppercase tags?
Note that the P tag doesn't have to be lowercase. In HTML, the uppercase version of the P tag will also work just as well. You can even open the tag using an uppercase 'P' and close it using a lowercase 'p'. But I strongly discourage you from doing that.
Let's stick to standard conventions that professional HTML programmers apply to their code and use lowercase tag names for everything. As you learn more about HTML and making websites, the reasons for doing it that way will become more clear to you. But for now, lets focus on the basics.
The rules described above with regard to the paragraph tag P are the same ones for most other tags. In the same way you can open and close many other tags that do different things:
<h1>My website header</h1>
<p>The first paragraph.</p>
<b>This text will appear bold</b>It's important to note that on line 3 in the example above we use a B tag, which will make enclosed text bold. Also note, that although we are not using a new P tag on line 3, this line will still appear at a considerate space below the previous line.
This occurs because the P tag actually has a height that stretches into the lower part of the line, effectively bumping any content down, whether it is another paragraph or not.
Is there a difference between uppercase and lowercase HTML tags?
Yes. But this has to do more with HTML standard conventions rather than the effect produced by a tag. Basically, there are two different rules based on your choice of the HTML standards when writing HTML code.
If you were following the XHTML standard conventions, using uppercase tag names would be considered illegal. We will touch upon XHTML later in other articles on this site. For now, let's focus on standard HTML implementation of the language allows us to use the tag names either way in their uppercase or lowercase form.
At this point, however it is probably a good idea to develop the habit of using all lowercase letters to create HTML tags.
More about HTML tag names
The P tag is short for Paragraph, but HTML tags are not exactly abbreviations of words, they are simply shorter versions of them. The most important reason HTML tags are consolidated in such a way is to decrease the size of a webpage on hard disk.
Shorter tags also make HTML code easier to read by programmers.
Reducing the size of your webpage has tremendous advantages on the performance of your site. Pages containing less characters will load faster.
With regard to computer memory, a letter character can be stored using only 8 bits of information (or 256 bytes). A webpage can consist of dozens, hundreds and even thousands of HTML tags.
This means that webpage size can grow very quickly as you continue working on it.
Imagine what would happen if every time you wanted to create an HTML paragraph you had to use an HTML tag called PARAGRAPH instead of just P. You would be using 9 times the amount of memory storage. And because many tags must also be closed, you would end up using 18 times more memory. And that's not including the surrounding brackets.
Avoid using deprecated HTML tags, instead use CSS.
HTML is not a brand new language. It has undergone many revisions and adjustments over the years. One of the most notable additions to the HTML language was the ability to add styles using Cascading Style Sheets, or CSS for short.
Once upon a time, when HTML just started out as a new language, the FONT tag was invented. The FONT tag was used to change the font type. The following example demonstrates an old way of applying a specific font type (in this case Arial) to a sentence.
<font face = "Arial">This text will appear to be written using Arial font type.</font>It is best to avoid using the font tag altogether. This has many reasons, many of which will become more apparent to those who are just starting to learn HTML later on.
Instead, you will want to use Cascading Style Sheets, or simply CSS. Code written using CSS rules can be inserted directly inside any tag you wish to modify with a visual style or new font type. That's accomplished using the STYLE attribute. This is also usually referred to as inline CSS code. It's inline because the CSS style is entered directly into the tag itself (using the style attribute), in other words it's on the same line with the tag.
Using CSS you can change the font type by using the following inline CSS code:
<p style = "font-family:Arial">This text will be in Arial</p>Remember, that above is an example of how to use inline CSS. But this isn't the only way to use CSS, it is not the fastest way and not most efficient way!
An even better way to apply styles using CSS would be to use an externally defined CSS file (for example, we can call that file "style.css"). And then we can "load" this external file into our HTML code by using the SCRIPT tag directive:
<link rel = 'stylesheet' type = 'text/css' href = 'http://www.websitehomework.com/css/style.css' />
Note that the LINK tag is used to add CSS to the page. Of course it goes without saying that style.css should be a valid CSS file existing in the css sub directory on the server. In this case the website is websitehomework.com, yours will be different.
I know we are getting a little ahead of ourselves, but it's important to know that using external CSS is the most efficient way to apply styles to your website. When using the STYLE attribute and CSS commands directly inside the tag (or in other words, using the "inline" CSS method), please keep in mind that you shouldn't get used to it just yet.
There are other tutorials located on this website that go in depth of how to use CSS. You can always find them later by using the site search box in the upper right corner, no matter what page on this site you are on. But let's stick to basics for now.
If you are curious about CSS, you can learn a lot more about its internal or external definitions and performance benefits of doing the latter. The CSS Tutorials are located right here on this site, but we are not finished with HTML basics yet. Please proceed to the next section: Creating and Working with HTML Elements.
Learn to make websites yourself. Receive unique HTML tutorials for beginners from Greg, the author of this HTML article and many others. This content is not publically available on the website.
Thanks for visiting websitehomework.com - an website containing html tutorials covering topics such as how to make websites from scratch, css, javascript and other website-related subjects.