This is the first of many HTML Tutorials that I will be creating. Thee Tutorials are being created to help fellow Web Developers on their way to becoming a website development extraordinaire. This part of the tutorial sections is going to focus on the basic HTML Tags. There will be more information about the other HTML tags in a future tutorial.
The Basics of HTML Tags
The most important thing you need to know about, as a web developer, is the term tags. Why is this term so important? It’s because tags are used to do everything on a webpage. For those that are new to the term “Tags”, very simply put they are a command in the code that tells the web browser how to interpret certain types of data. You can think of it like formatting your web page like a word document, only you have to type out where the new line break is rather than hitting the “Enter/Return” key on your keyboard.
There are 4 tags that are essential for every webpage:
- HTML
- HEAD
- TITLE
- BODY
There are other tags that are important too, like META, B, I, U, P, BR, SPAN, DIV, TABLE, and more, but for the sake of this part of the tutorial those 4 tags are what we will be focusing on today.
Tags always come in pairs, a start tag and an end tag. both tags look the similar to each other, the only difference is that the end tag has a forward slash “/” between the open bracket and tag text. (e.g. start tag <HTML> end tag </HTML>).
Also, one more thing to note, when creating your homepage, the page that your website will open up with. You need to save your file name as “index.html” otherwise your web browser will not be able to see your webpage for your website and it will display a blank white screen.
HTML TAG
The HTML Tag is the beginning tag for all webpage creations. The Start tag for the HTML Tag is <HTML> This means that you are ready to begin coding in HTML to create your webpage. Whether this page you are creating is your first or your 10,000th, HTML webpages always start off with this HTML tag.
After you have added all the information that will comprise your webpage content then you must close the HTML Tag with its end tag, </HTML>.
Once you have completed your page you can save it as an .html file, and then your webpage will be ready to be posted onto the internet.
Start Tag and End Tag:
<HTML> </HTML>
HEAD TAG
HEAD Tags contains all the content that is not normally displayed for the viewer. The usual information that is placed in between the start and end of the HEAD Tags are:
- Script attributes
- meta tags
- favicon source
- title of your webpage
- Cascading Style Sheet (CSS) information
Other information that can be placed in the HEAD Tag however those are not as commonly used.
Start Tag and End Tag:
<HEAD> </HEAD>
TITLE TAG
The TITLE Tag is something all webpages should have as it declares what the page’s title is. To view your webpage title all you need to do is look at the tab section of your web browser, this shows your title tag information. This tag can only appear within the HEAD Tag as shown above.
Google, Yahoo, Bing, and other search engines use the TITLE tag as the primary text users first see of your website link, as shown above. Also, when someone bookmarks your webpage the TITLE tag information is shown as the title for the bookmarked name of your webpage.
Start Tag and End Tag:
<TITLE> </TITLE>
BODY TAG
The final important tag of all HTML Tags to keep in mind for all webpages is the BODY tag. This tag contains everything that you see on your website. This is where all the meat and skin of your site is located from the paragraphs that detail what your page is about to the images that everyone loves to see, the body contains it all.
Start Tag and End Tag:
<BODY> </BODY>
Basic Structure
The basic Structure for all HTML websites is as follows:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY></BODY>
</HTML>
Thank you for joining reading the first tutorial on Web Building Tutorials HTML Tags. This tutorial has is just the beginning, this is the skeleton of your webpage. The next tutorial will expand on common tags used in the body of a website.
Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.