HTML stands for Hypertext Markup Language and it is a widely used programming language used to develop web pages. Through this HTML Tutorial, we&rsquo;ll understand what HTML means, the features of HTML, the basic tags and elements used, and more. Let&rsquo;s get started.
&nbsp;
<h2 id="what-is-html">What is HTML?</h2>
&nbsp;
HTML Stands for HyperText Markup Language, where
<ul>
<li>HyperText stands for Link between web pages.</li>
<li>Markup Language means Text between tags that define the structure.</li>
</ul>
&nbsp;
HTML is a markup language that is used to create web pages. It defines how the web page looks and how to display content with the help of elements. It forms or defines the structure of our Web Page, thus it forms or defines the structure of our Web Page. We must remember to save your file with a .html extension.
<figure class="kg-card kg-image-card"><img class="kg-image js-zoomable medium-zoom-image" src="https://digitalpress.fra1.cdn.digitaloceanspaces.com/pnl5oqh/2023/01/image-3.png" alt="" width="821" height="255" loading="lazy"></figure>
It is used by the browser to manipulate text, images, and other content, in order to display it in the required format. Tim Berners-Lee created HTML in 1991. The first-ever version of HTML was HTML 1.0, but the first standard version was HTML 2.0, published in 1995.
<figure class="kg-card kg-image-card"><img class="kg-image js-zoomable medium-zoom-image" src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220718103358/HTML-Released-year-11.png" alt="HTML History" loading="lazy"></figure>
<h2>&nbsp;</h2>
<h2 id="applications-of-html">Applications of HTML</h2>
&nbsp;
HTML is used for various purposes. Let us take a look at them
<ol>
<li>Web Pages Development HTML is famously used for creating web pages on the world wide web. Every web page contains a set of HTML tags and hyperlinks which are used to connect other pages. Every page on the internet is written using HTML.</li>
<li>Navigating the Internet Navigating on the internet would have been quite a tedious task without HTML. The anchor tags of HTML allows us to link pages and navigate easily. Imagine our life without anchor tags, you would literally have to enter URL everytime. Using achor tags, you can also navigate within a webpage.</li>
<li>Embedding Images and Videos HTML allows us to embed images and videos with ease and gives us features to adjust height, position and even rendering type. You can adjust controls, thumbnails, timestamps and much more for videos. Earlier this was done using Flash and HTML has made it easier with the help of&nbsp;&lt;video&gt;&nbsp;tag.</li>
<li>Clinet-side storage HTML5 has made client-side storage possible using localStorage and IndexD due to which we no longer need to reply on Cookies. Both of these tactics have their own set of rules and characteristics. String-based hash-table storage is provided by localStorage. Its API is straightforward, with setItem, getItem, and removeItem functions available to developers. On the other hand, IndexDB is a larger and more capable client-side data store. With the user&rsquo;s permission, the IndexDB database can be enlarged.</li>
<li>Game development Although you cannot create complex high-end video games with HTML, the&nbsp;&lt;canvas&gt;&nbsp;element of HTML can be used to make 2D and 3D games using CSS and JavaScript which can be run on browsers.</li>
<li>Data entry support With the usage of new HTML5 standards in all the latest browsers, developers can simply add the tags for required fields, text, data format, etc. and get the data. HTML5 now has several new attributes for data-entry and validation purposes.</li>
<li>Interacting with Native APIs With the help of HTML, you can interact with your Operating system. With this feature, you can easily drag files onto a web page to upload, full-screen a video, and much more.</li>
</ol>
&nbsp;
<h2 id="features-of-html">Features Of HTML</h2>
&nbsp;
<ul>
<li>The learning curve is very easy (easy to modify)</li>
<li>Creating effective presentations</li>
<li>Adding Links wherein we can add references</li>
<li>Can display documents on platforms like Mac, Windows, Linux, etc</li>
<li>Adding videos, graphics, and audios making it more attractive</li>
<li>Case insensitive language</li>
</ul>
&nbsp;
<h2 id="html-editor">HTML Editor</h2>
&nbsp;
<ul>
<li>Simple editor: Notepad</li>
<li>Notepad++</li>
<li>Best editor: Visual Studio Code (VS Code)</li>
<li>Sublime Text</li>
</ul>
&nbsp;
<h2 id="html-skeleton">HTML Skeleton</h2>
&nbsp;
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<div class="open_grepper_editor" title="Edit &amp; Save To Grepper">&nbsp;</div>
<h2 id="html-basic">HTML Basic</h2>
&nbsp;
&lt;!DOCTYPE html&gt;
Instruction to the browser about the HTML version.
&nbsp;
&lt;html&gt;
<ul>
<li>Root element which acts as a container to hold all the code</li>
<li>The browser should know that this is an HTML document</li>
<li>Permitted content: One head tag followed by one body tag</li>
</ul>
&nbsp;
&lt;head&gt;
<ul>
<li>Everything written here will never be displayed in the browser</li>
<li>It contains general information about the document</li>
<li>Title, definitions of CSS and script sheets</li>
<li>Metadata(information about the document)</li>
</ul>
&nbsp;
&lt;body&gt;
<ul>
<li>Everything written here will be displayed in the browser</li>
<li>Contains text, images, links that can be achieved through tags</li>
<li>Examples:</li>
<li>○ &lt;p&gt; This is our first paragraph. &lt;/p&gt;</li>
<li>○ &lt;a href=&rdquo;http://www.google.com&rdquo;&gt;Go To Google&lt;/a&gt;</li>
<li>○ &lt;img src=&rdquo;photo.jpg&rdquo;&gt;</li>
</ul>
&nbsp;
<h2 id="html-comment">HTML Comment</h2>
&nbsp;
<ul>
<li>Comments don&rsquo;t render on the browser</li>
<li>Helps to understand our code better and makes it readable.</li>
<li>Helps to debug our code</li>
<li>Three ways to comment:</li>
</ul>
<ol>
<li>Single line</li>
<li>Multiple lines</li>
<li>Comment tag //Supported by IE</li>
</ol>
&nbsp;
<h2 id="html-elements">HTML Elements</h2>
&nbsp;
<ul>
<li>Elements are created using tags</li>
<li>Elements are used to define the semantics</li>
<li>Can be nested and empty</li>
</ul>
&nbsp;
<h2 id="what-is-html-elements-definition">What is HTML Elements Definition</h2>
&nbsp;
<pre><code>&lt;p color=&rdquo;red&rdquo;&gt; This is our first Paragraph &lt;/p&gt;</code></pre>
<div class="open_grepper_editor" title="Edit &amp; Save To Grepper">&nbsp;</div>
Explanation:
<ul>
<li>Start tag: &lt;p&gt;</li>
<li>Attributes: color =&rdquo; red&rdquo;</li>
<li>End tag : &lt;/p&gt; // optional</li>
<li>Content: This is our first Paragraph</li>
</ul>
&nbsp;
<h2 id="types-of-elements">Types of Elements</h2>
&nbsp;
There are different types of elements in HTML. Before moving ahead in the HTML Tutorial, let us understand the types of elements.
&nbsp;
<ul>
<li>Block Level</li>
</ul>
○ Takes up full block or width and adds structure in the web page
○ Always starts from the new line
○ Always end before the new line
○ Example:
■ &lt;p &gt;
■ &lt;div&gt;
■ &lt;h1&gt;&hellip;&lt;h6&gt;
■ &lt;ol&gt;
■ &lt;ul&gt;
&nbsp;
<ul>
<li>Inline Level</li>
</ul>
○ Takes up what is requires and adds meaning to the web page
○ Always starts from where the previous element ended
○ Example :
■ &lt;span&gt;
■ &lt;strong&gt;
■ &lt;em&gt;
■ &lt;img&gt;
■ &lt;a&gt;
&nbsp;
<h2 id="html-attributes">HTML Attributes</h2>
&nbsp;
<ul>
<li>Properties associated with each tag is called an Attribute.</li>
<li>&lt;tag name=&rdquo;value&rdquo;&gt;&lt;/tag&gt; is the structure.</li>
</ul>
&nbsp;
<ul>
<li>There are some Global Attributes that can be applied to all the tags.</li>
<li>Title: Add extra information (hover)</li>
<li>Style: Add style information(font,background,color,size)</li>
</ul>
&nbsp;
<ul>
<li>There are some attributes that can be applied to specific tags.</li>
<li>&lt;img src=&rdquo; URL&rdquo; width=&rdquo;100&rdquo; height=&rdquo;70&rdquo; alt=&rdquo; File cannot be loaded&rdquo;&gt;</li>
<li>src is the attribute used in image tag to define the path</li>
<li>Width is an attribute used to define width in pixels</li>
<li>Height is an attribute used to define width in pixels</li>
<li>Alt i.e alternate text if an image is not loaded</li>
</ul>
<ul>
<li>Name of the link</li>
<li>href is used for defining the path of the link</li>
<li>color is used to set the color of the horizontal line drawn on the webpage.</li>
</ul>
&nbsp;
<h2 id="html-tags">HTML Tags</h2>
&nbsp;
<ul>
<li>Enclosed within &lt;&gt;</li>
<li>Different tags render different meanings.</li>
</ul>

What is HTML and How it Works?

CSS Tutorial for Beginners

Front end development is the area of web development that focuses on the user interface. It is all about converting the backend code into a graphical interface. The front end makes the data easy to read and understand. It&rsquo;s the frontend design that attracts the audience to your website and asks them to stay there for a longer time interval.
Front end development makes things easier for people to understand those who are from non-coding backgrounds. Without frontend, websites will only show the codes which will complicate the task. This article talks about how to become a front end developer, what are its roles and responsibilities, skills, salary etc.
&nbsp;
<h2 id="who-is-a-front-end-developer">Who is a Front End Developer?</h2>
&nbsp;
A person who develops and designs the front end or user interface of a website or application is called a Front End Developer. The front end development, also known as client-side development is the execution of HTML, CSS, and JavaScript for a website or web application to make the data user friendly.
There are a few challenges associated with front end development and one of them is the constant changes in the tool and technique that is used to create the front end of the website. The biggest challenge for the front end developer is to make sure the site works smoothly across different browsers, different operating systems and different devices.
&nbsp;
<h2 id="roles-and-responsibilities-of-a-front-end-developer">Roles and responsibilities of a Front End Developer</h2>
&nbsp;
Though different organizations assign different tasks to the developers, there are few common tasks which everyone needs to perform.
● Using HTML, CSS and JavaScript to give life to the data.
● Making the website attractive and user friendly.
● Enhancing the user experience .
● Designing, developing and maintaining the user interface.
● Innovating tools that improve user interaction and audience retention.
● Fixing the bugs in application and testing for usability.
● Making sure that application works smoothly on different devices and operating systems.
&nbsp;
<h3>Web technologies that are involved in Front End Development</h3>
&nbsp;
Front end developers use numerous technologies to convert backend code into a user-friendly interface. Few of the web technologies that are used by front end developers are; HyperText Markup Language ( HTML ), Cascading Style Sheets (CSS) and JavaScript.
&nbsp;
HTML :&nbsp;It is considered as the building block of a website. For a browser to display the content correctly , HTML is used as a programming language to describe and mark the desired content.
CSS:&nbsp;It is way more than a programming language, it&rsquo;s like a set of instructions that controls the style and structure of a webpage. CSS helps the front end developers to manage a website or web application&rsquo;s formatting, presentation and layout.
The major role of CSS is to dictate how users will see the content.
JavaScript:&nbsp;JavaScript came into action after 1995, before that developers used to design the website using HTML and CSS. JavaScript has helped the developers to make the website interactive and attractive. JavaScript helps to make changes in the content of the website based on the actions of the user.
DOM:&nbsp;DOM stands for Document Object Model. It is a cross-platform and language-independent convention for representing and interfacing with objects in HTML, XHTML documents.
CSS preprocessors:&nbsp;To add functionality in the CSS code and to make it more interactive and scalable, front end developers use CSS preprocessors. Its task is to transit in the well-formatted CSS that work on different browsers. The most in-demand CSS preprocessors are LESS and SASS.
Use of APIs and RESTful services: REST stands for Representational State Transfer. It is a lightweight architecture that simplifies network communication.
The front end developer will interact and make use of the APIs ( Application Programming Interface) too.
Graphic Design Tools: A prior knowledge of graphic designing is a must to create the prototype of the website, the prototype helps the developers to experiment with the interface before making it on the actual code.
&nbsp;
<h2 id="front-end-job-titles">Front End Job Titles</h2>
&nbsp;
The most commonly used term for hiring is &ldquo; front end developer and front end engineer&rdquo;. The common terms other than front end are &ldquo;client-side&rdquo;, &ldquo;web UI&rdquo;, &ldquo;HTML&rdquo;, &ldquo; CSS &ldquo; or &ldquo; JavaScript&rdquo;.
1. Front end developer/engineer:&nbsp;This is the most in-demand job currently in the industry. Front end developer/engineer is one who is skilled with HTML, CSS, DOM and JavaScript.
2. CSS/HTML developer:&nbsp;This is a front end job title for someone who knows HTML and CSS excluding JavaScript.
3. JavaScript Front end developer: When &ldquo;JavaScript developer&rdquo; is added in the job title then it emphasizes the advanced programming and development skills using JavaScript.
4. Front end web designer: The designer will be one who knows to program and is skilled with graphic designing tools.
5. UI developer/engineer:&nbsp;For the job title the person needs basic front end development skills in addition to design, interactive designs and wireframing skills.
6. Smartphone/tablet front end developer: This job title will demand developers to work especially on front ends which work smoothly on smartphones and tablets.
7. Front end SEO expert:&nbsp;SEO stands for Search Engine Optimization, this job title demands the developers to have experience of crafting front end technologies towards an SEO strategy that are either given or constructed later.
8. Front end accessibility expert: This job title demands the developer to have extensive experience in crafting front end technologies that support accessibility standards and requirements.
9. Front end Quality analyst/testing engineer:&nbsp;This job title demands the developer to have extensive experience in testing and managing software that involves unit testing.
10. Front end Dev ops:&nbsp;This job title demands the developer to have extensive experience in software development, collaboration, integration, automation and measurement.
&nbsp;
<h2 id="front-end-developer-skills">Front End Developer Skills</h2>
&nbsp;
HTML, CSS, DOM and JavaScript are the must-have skills a front end developer should possess. There are a few more front end developer skills in addition to these which can help you to grow in the industry as a front end developer.
● CMS ( Content Management System)
● Node.js
● Cross-browser testing, Cross-platform testing
● Unit testing
● Cross-device testing
●&nbsp;SEO ( Search Engine Optimization )
● Usability
● User Experience
● Portal system
● E-commerce system
● CSS layout
● Load testing
● Performance testing
● Mobile web performance
● GIT ( version control )
● Regular expression
● Content strategy
● Modules
● Package manager
● Code coverage testing, code complexity analysis
● Integration testing
● Command line ( CLI )
● UI widgets
● Charts and graphs
● Browser Developers Tools
● Single Page application
● Web browser security
● HTML semantics
&nbsp;
<h2 id="front-end-developer-salary">Front End Developer Salary</h2>
&nbsp;
One thing which you need to keep in mind before we discuss the salary portion is; salary is directly proportional to experience and skills.
The average salary of a front end developer in Nepal at the beginner level is Rs 2,94,103 per annum.
When we talk about the average salary of front end developers in the USA then the average salary for a senior front end developer is $101,747 and for junior front end developers, it is $70,687.
Front end development is one of the highest paying job profiles in the world currently. If you have the required skill set then no one can pull you back from an exponential growth in the industry.
As per the data of Glassdoor, the current median salary of a front end developer is more than $70,00 which can raise upto $100,000 in upcoming few years.
&nbsp;
Front end developer salary based on the experience
&nbsp;
1. Entry level front end developer: Rs 305,498 per annum
2. Early career front-end developer ( 1 to 4 year of
experience ) : Rs 427,532
3. Mid &ndash; career front end developer ( 5-9 year of
experience ) : Rs 806,231
4. Experienced front end developer ( more than 10 years of experience ) : Rs 1,300,000 per annum
If you are an undergraduate and willing to join the software industry then this is one of the finest skills which you can work on and can build a perfect career with high income opportunity.
&nbsp;
<h3>A day in a life of a front end developer</h3>
&nbsp;
Here is the schedule of how a day of a front end developer looks like in brief.
● Wake up , grab breakfast and a mug full of coffee and check your mails.
● Done with the mail ? A meeting with the team is waiting for you. If you are working from home then all you need is a Meet call and if not then pack your bags to the office.
● A quick update on the project from the team and then assign the tasks that the whole team is going to perform today.
● Programming will continue until lunch.
● Lunch! Grab lunch and sit with your team and enjoy the meal.
● Go back in the cabin and again start coding; turn your designs into the code.
● It&rsquo;s time to look at the work your team did and analyze what better you can do.
● Time to wrap up and head back home. Netflix and chill.
&nbsp;
<h2 id="frequently-asked-questions">Frequently Asked Questions</h2>
&nbsp;
Q. What does Front End Development include?
Front end development includes converting backend code into a graphical interface. It uses HTML, CSS, JavaScript to make the website interactive and user friendly.
&nbsp;
Q. Front end or Back end: which is the better choice?
Front end and Back end both are equally interesting, it&rsquo;s just a matter of choice. Backend is all about developing the code that runs at the backend of a website or web application wheeras frontend is about converting that code into a graphical interface.
If you have a creative and artistic mind then the front end will be a better choice for you.
&nbsp;
Q. Is front end development really stressful ?
Web Development is stressful but the stress is about deadlines, demanding clients, sophisticated coding and an artistic mind.
&nbsp;
Q. What is the average salary of a Front end developer in Nepal?
The average salary of a front-end developer in nepal is somewhere between Rupees 4-5 lakhs.
&nbsp;
Q. Can I use Python for the front end ?
Yes, you can use python for both front end and as well as back end.
&nbsp;
<h2 id="conclusion">Conclusion</h2>
Front end development is one of the most in-demand skills in the industry,&nbsp;all you need is a creative mind and good command on HTML, CSS, DOM and JavaScript to grow in this industry. Front end developer is one the highest paying jobs in the software industry. If you work on your skills and improve them then no one can stop you from exponential growth.

Resources to help start your career

New Resources

By category

Popular courses for "all"

Choose a Swivt Education & Elevate your career