Web Design Course – Part 11 – Learn Extra HTML (Markup)

So far we have covered some basic HTML tags which basically helps to create groups, sections and divisions on a web page.

In this article, you will learn about “Extra Markup“, and the article  is broken down into following sections,

  1. Adding comments to your markup
  2. HTML versions
  3. Global attributes like “class” and “id”
  4. Usage of meta tags

1. COMMENTS IN HTML WEB PAGE

The first question arises here is the reason of why there is a need to put comments in the HTML markup. The answer is, sometimes the web project you are working on is just needed to be assigned to another person. That person may have never worked on it before, so to avoid any kind of ambiguity as to what the web page sections are used for, the web designer writes comments with each section/division of the web page. This helps other web designers and one’s ownself to read the code and understand it without even looking it in the browser.

Comments in HTML - Online IT Geek

You can put comment by adding a text between these characters:

<!– comment goes here –>

This text will not be visible to users in the browser, it can only be viewed when a user looks at the source code by inspecting the web page.

Comments can also be used around block of HTML markup to stop it being viewed on the web page. See the example below;

<!–
<a href=”mailto:info@example.org”>Contact</a>
–>

As you see, the above code will not be displayed in the browser because it is surrounded by a comment.

2. HTML Versions

HTML is an evolving language. There is hardly any language that stays the same for a long time. With every update, there are some bug fixes and more flexibility and ease of use for the designers.

There are following HTML versions;

  1. HTML 1.0
  2. HTML 2.0
  3. HTML 3.0
  4. HTML 3.2
  5. HTML 4.01
  6. XHTML 1.0 and
  7. HTML5

Versions in HTML

1. HTML 1.0

This was the first release of the HTML and there were very few websites. Few people were involved in the creation of websites at that time and HTML was also providing limited functionalities.

2. HTML 2.0

HTML 2.0 was the release which included all the HTML 1.0 features with additional core features. It stayed the standard for website design until 1997.

3. HTML 3.0

The number of website creation gets higher with the release of HTML 2.0 and more people were involved. The need for some other tags arose just then because everyone wanted to upgrade the look of their sites.

The actual difficulty came into the limelight when a company called, “Netscape” released its browser called, “Netscape Navigator”. They introduced some new proprietary tags and attributes in the browser. These tags were called, “Netscape Extension Tags”. So this caused a problem because the HTML written for Netscape browser would not properly render into other browsers due to the Netscape Extension Tags.

To tackle the problem, a guy named, “Dave Raggett”, who was member of HTML working group, introduced HTML 3.0. In this release, all the issues were fixed and HTML was made modular so that the changes could be done in stages not to the entire version itself.

4. HTML 3.2

HTML standards were founded till this point and World Wide Web Consortium (abbreviated as W3C) came into existence in 1994. The purpose of W3C was to standardized HTML and its evolution. HTML 3.2 was released then because HTML 3.0 was still not fully helping the HTML for Netscape Navigator.

5. HTML 4.01

The big step in the evolution was the release of HTML 4.01. It was recommended by W3C in 1998 and became the official standard in April 1998. It was compatible with Netscape Navigator and IE versions of the browsers.

6. XHTML 1.0

It was released in the 21st century and soon recommended by W3C as the standard. It includes the XML language features of writing it properly and beautifully.

7. HTML 5

When HTML 4.01 and XHTML 1.0 were in high demand, the developers responsible for HTML upgradation were constantly busy in creating specifications and standards for a new release which will not only help designers at that time but will be in use for a decade. XHTML 2.0 was in the process of being produced, but W3C decided that HTML 5 will be the standard language for websites and XHTML 2.0 was soon discontinued.

3. Attributes “class” and “id” in HTML & their usage in CSS

When creating a web page, we write different kind of tags like <ul>, <ol>, <h1>, <h2>, <a> or <form> etc. To call or target these tags in CSS or JS, or to group specific type of tags on the web page, we use ID and Class attribute.
This helps in giving specific element on the web page with a custom design or layout using css. Also, if you want to target any element for dynamically changing the layout or properties of the element, you can also use ID or class attribute for achieving this using JS.

ID and Class in HTML
Id in html tag is used to call the specific single element and it is always unique in a web page. Besides that, class attribute is given to a group of elements which are needed to be modified using css with some settings or in JS.

Usage of  ID and Class:

<form id=”contact-form”></form>

<ul id=”list”>

<li class=”list-item”></li>

<li class=”list-item”></li>

<li class=”list-item”></li>

</ul> 

Adding class or id to any element on web page does nothing by default to that tag/element.

Class is referred in CSS with “.” period sign and id with a “#” hash sign followed by the property name and value format.

4. Meta Tags

As you must have heard about the term “Metadata”, which means information about data.

Same way, meta tags are tags that provides metadata about the HTML document. It is like HTML comments which doesn’t show visually on the front-end design of the website, but it is used to provide information to the search engines’ spiders and crawlers to improve SEO of the website. We will discuss later about what is SEO and best SEO techniques in 2019.

Meta Tags in HTML

Examples of Meta Tags:

KEYWORDS FOR SEARCH ENGINES:

<meta name=”keywords” content=”Website, HTML, Web, CSS, JS, Online IT Geek”>

DESCRIPTION OF WEB PAGE:

<meta name=”description” content=”Online IT Geek – Innovation for the better world”>

AUTHOR OF THE WEB PAGE:

<meta name=”author” content=”Muhammad Zubair Khan”>

REFRESHING WEB PAGE:

<meta http-equiv=”refresh” content=”30″>

VIEWPORT SETTINGS FOR MOBILE DEVICES:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

 

Please subscribe to my YouTube channel:
https://www.youtube.com/OnlineITGeek

Thank you for reading this article. Please share with others to spread knowledge.

If you want to have a look at my recent blog articles, visit Website Design Course and learn about it. Show support by sharing and commenting.

 

 

2 thoughts on “Web Design Course – Part 11 – Learn Extra HTML (Markup)

  • March 25, 2020 at 1:09 am
    Permalink

    As a Newbie, I am continuously browsing online for articles that can aid me. Thank you

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *