Today in this blog we will be discussing the Markup Language and not the programming language. Many programmers say HTML is a programming language but it’s a markup language.
It structures the whole web page with the help of various elements that encapsulates the various content in its different parts. There are minor points that even the HTML developers can name precisely.
This could only be known to the ones who have taken proper training from the best HTML training institute in Delhi such as ADMEC.
But no worries, reading this blog will also help you get to know more about the language.
10 important things to know an HTML programmer
1. Exploring the anatomy of HTML Element
There are 4 main parts of the element: –
- Opening Tags: This is the point where the effect of the element begins. For Example,
<p>----</p>. Here,<p>is the point from where the effect of paragraph tag starts. - Closing Tags: This is the point where the effect of the element ends. For Example,
<p>----</p>. Now, here</p>is the point where the effect of paragraph tag ends. - The Content: It is placed within the tags. It could contain text, image. hyperlink and many more things.
- The element: Now, the above three things when combined form an element.
2. Brief about Attributes
It is very important to have proper knowledge of attributes. Attributes are the ones that could contain some hidden information or basically the ones which you don’t want to show in the main content.
It is two parts:
- Attribute Name
- Attribute Value
For Example:
<div class="box_details"> This is the box </div>
Here,
- Attribute is:
class="box_details" - Attribute Name is:
"class " - Attribute Value is:
"box_details"
3. Proper use of doctype
Declaring a doctype i.e. document type is the first thing that should be done. It is done even before starting the HTML tag. This is not the tag that is there in HTML but is there to display the version of HTML is in use as well as the type of document that the programmer is working on.
Here is the syntax of declaring a doctype: –
<!DOCTYPE html> <html> <head> ------ </head> <body> ---- </body> </html>
4. Web page code gets its meaning from proper Semantics
To improve the presentation of the website semantics are used. Such as the text that is enclosed in a <h1> tag will indicate that the content that is enclosed in this tag is a heading.
Goal of using semantics
The goal of using semantics is that it helps in improving communication among users. It improves the communication not only between the browser and the page but also in between page and the search engine, which later on helps in improving the SEO of your site.
It is a very intelligent feature as you can see here, if you have written something in <code> tag then that content will not be rendered and will be marked as some coded content by the browser as it understands that the content is something related to a coding language only.
Here is the list of Semantic Tags:
- blockquote – It is a tag that is used to indent the text that is not a quotation though this could also be done through normal CSS.
- p – It is a paragraph tag. In this many of the web editors use
<p> </p>, nbsp i.e. non-breaking space contained in a paragraph. This is used to define a space in a text rather than actually showing it. - ul – ul tag is used for an unordered list. It contains
litag only.ultag withblockquotetag will create a problem as it is semantically incorrect to use it within<ul> - h1 to h6 – These are the heading tags with the biggest tag as
h1and the smallest tag ash6. - div – It is the tag that creates elements at the block level.
- span – It is the tag that creates elements inline.
- cite – To add the citation to the page cite tag is used.
Though everything that you are doing with semantics can also be done with normal div or span tags but to impart better understanding among programmers, we use semantics.
5. Alt tags are important to include
Since we are moving towards developing accessible websites so that the percentage of people who are specially-abled can also use it. That why it is very important to add alt text with images or videos. It not only helps in developing an accessible website but also helps in doing SEO of the site in the future.
Syntax for adding alt text to an image is:
<img src="flower.jpg" alt="flower image" height="100" width="100">
Syntax for adding alt text in video tag:
<video width="350" height"200" controls. <source src="video1.mp4" type="video/mp4" alt="feedback video"> </video>
6. Make separate CSS for a better presentation of code
It is better not to write CSS in the HTML file which is also known as internal as well as inline CSS. Internal CSS is written within the <style> tag. Whereas inline CSS is written within the HTML tag.
Both the ways make the look of code so confusing when too much styling is done on the HTML web page. That is why it is advised to use external CSS.
To connect an HTML page to external CSS the following code is used:
<link rel="stylesheet" type="text/css" href="custom.css">
Adding this link inside <head> tag will connect the HTML as well as the CSS page.
7. Use of id and classes
Use id where you want to use particular kind of styling on the single element only whereas use classes when you want to use the same styling on multiple elements.
Here is the syntax of id selector:
<div id="text"> This text's styling is done through id selector </div>
Way to use id in CSS:
#text{
//write the CSS
}
Here is the syntax of class selector:
<div class="box"> This text's styling is done through class selector </div>
Way to use class in CSS:
.box{
//write the CSS
}
8. Run the HTML code on multiple browsers
You have to run the code the HTML code on various browsers because each browser has different configuration so its way of showing a particular code is also different. That’s why in CSS sometimes we specify that how a particular thing should be presented in each browser.
9. Formation of tables
Yes!!! It is possible to form tables in HTML using <table> tag. There are two sub tags used in table tag. <tr> i.e., table row and <td> i.e., table data.
The syntax for forming a simple table is:
<table>
<tr>
<td> a </td>
<td> b </td>
<td> c </td>
</tr>
<tr>
<td> a </td>
<td> b </td>
<td> c </td>
</tr>
<tr>
<td> a </td>
<td> b </td>
<td> c </td>
</tr>
</table>
Output:
| a | b | c |
| a | b | c |
| a | b | c |
10. Knowledge of Viewport
Designing a simple web page with proper responsive behavior is important. To ease your purpose viewport is used. It is basically an area of the web page which is visible to the users. Earlier the web designs were developed only for computer screens but with time this has changed and is now used for mobile as well as tablets.
This aids the web page to adjust its scaling as well as dimensions precisely according to the screen size.
Syntax to add viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here, meta tag gives the commands of scaling a page according to dimension and scaling.
The width=device-width gives the width which varies according to the screen size.
Then another one in this is initial-scale=1.0. It is basically used to set the initial zoom level of the page. The zoom can be seen when the browser loads the page.
Stay updated always, subscribe to our newsletter!
I am sure after knowing about so many features you must be excited to know and learn more about the programming language. To ease your search for the best HTML training institute in Delhi, here is the best course offered by the best institute.
Name of Course: HTML and CSS Master Course
Duration of Course: 02 Months
Mode of Training: Classroom as well as Online
Overview of Course: Let’s start with the best part of this course that is, you just need to know the basics of computers as well as the internet, rest is on us.
Now, let’s see what this course offers to you?
Firstly, you will be guided about the basics of the HTML and then slowly and steadily they will move to the advance level of HTML. Though you will be taught the latest version of this they will also guide you about the earlier versions of HTML5.
Few interesting things that you will be taught include:
- Lists, frames, tables, forms, audio, video and other special characters in HTML5.
- Also, by the end of the course tips and tricks of this will be guided to you.
- After this you will be taught CSS, here also they will start from basics of CSS, values, units, inheritance, list, text formatting, pseudo-elements, padding, dimensions, margins, etc to create a whole dynamic web page using CSS3.
- Also, after the successful completion of all the above things, you will also be taught the tips and tricks of HTML5 and CSS3.
After learning both, proper testing, validating, tips of adding features that would help in search engine optimization will be added and this is not all, there are more interesting things lined up which will be taught.
After completion of this course, you will be given a proper project after doing which you will be able to assess how much knowledge have you grasped about the same.
Career Options after completion of this course
You can apply for the position of
- HTML5 Developer
- Web designer
- Junior UI developer
- CSS3 Developer etc.
So, after knowing the points that you should not miss if you are HTML Programmer, what are you waiting for to enhance your knowledge, Join the best HTML5 institute in Delhi such as ADMEC Multimedia Institute and get trained by the best faculty. For any further details feel free to contact on 9811818122 and 9911782350.
