Introduction
HTML is a standard for building web pages. It allows you to create and structure HTML elements like paragraphs, lists, images, videos, and links on your web page. HTML elements are the building blocks of any webpage.
In this article, you will learn the basics of HTML, including how it works, some examples, its pros and cons, its anatomy, its structure and how it’s related to CSS and JavaScript.
What does HTML Stand for?
HTML stands for Hypertext Mark-up Language.
What is HTML?
HTML describes the structure of a web page which consist of a series of elements that tells the browser how to display content on that web page. To better understand the meaning of HTML, Let’s define each part.
Hypertext: This means text organize in order to connect related items
Mark-Up: A style guide for writing anything to be printed in hardcopy or softcopy format
Language: Describes how a computer system can understand and use to interpret commands
It’s important you should note that HTML is not a programming language. So it does not have any dynamic functionalities. It’s considered the official standard for creating web pages.
What is HTML Used For?
HTML helps the browser to understand the structure of documents viewed over the internet. It equally helps you to host your videos, images, or any other applications on web pages. Some most popular use cases of HTML include:
- Web Development: HTML in web development to build web documents.
- Web Documentation: With HTML, you can format and organize just like with Microsoft office. Documentation is rather an important aspect that should be included that the beginning of any software project
- Navigation: HTML serves to embed links as well as navigate from one page on the internet to another.
How Does HTML Works?
HTML elements are the building blocks of any web page. HTML uses are series of tags to inform the browser what to output on the web page. There are more than 100 tags available you can use today but most website builders just need a few of them to build a functional web page or web application.
You basically need 3 tags to create a web page. <html>, <head>,and <body>. The <html> informs you that it’s the beginning of an HTML document while the </html> marks its end. The <head> contains meta information which is not visible in the browser but is important while the <body> tag output is the actual content of the web page in a browser.
HTML files end with .htm or .html extension and a browser read and render its content to the users. To view an HTML file from your PC, you need to open it with a browser like Firefox, Google Chrome, Microsoft Edge or Opera or simply drag and drop it in the browser.
While to view a page online, you need to upload it to the World wide web. To do that you need to purchase a domain name and hosting. This is another topic so we will discuss this in another article.
In the next section, you will see the basic structure of any web page.
Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<button>About us<.button>
</body>
</html> Let’s have a brief explanation of the HTML structure above
- <!DOCTYPE html> defines that the document is an HTML5 document.
- <html> is the root element which defines the beginning of the HTML document.
- <head> element contains meta information about the page
- <title> defines the title of the HTML page
- <body> element specifies the content of the document for all visible elements such as the paragraphs, headings, buttons, images and more
- <h1> element defines a large heading
- <p> elements tell you that it’s a paragraph
- <button> element specifies a button
These elements form the basic structure of an HTML page. In the next part, you will learn more about HTML tags, elements and attributes.
What is an HTML Element?
An HTML element is generally defined by a starting tag, content and a closing tag. It could also contain an attribute or a set of attributes.
Anatomy of an HTML Element
There are generally three main parts of an HTML element. They include
- The opening tag: It consists of the name of the tag (here it’s p) in between the opening and closing angle. It indicates the beginning of the content – here it’s where the paragraph starts.
- The content: It’s the actual content of the element. In this case, it’s a text.
- The closing tag: It’s the same as the opening tag but it includes a
forward slashbefore the element name. It indicates the ending of the element – in this case where the paragraph ends. Failing to add a closing tag will create an error that can result in a mediocre page format.
The opening, closing and content form the HTML element. Some HTML do not have closing tags and content. They are non as Void elements
What are Void Elements?
Singleton Tag or void elements or empty elements are elements that do not require a closing tag. They don’t use an ending tag because they do not contain any element. Examples of such tags include <img> and <br>. Looking at the image element below, it does not have neither a closing tag nor inner content. This is because the <img> does not wrap any content. Its purpose is to embed an image via the src attribute and an alt text which describes the image.
<img src="images/triangle.png" alt="a red triangle" />HTML Tags
You just learn about HTML elements so it will be easier to understand tags. Tags simply define markup for a particular web page. It tells the web browser where an element begins or ends and can contain one or more attributes that characterize the element.
The combination of the closing and opening tags and the content form what we called an HTML element as discussed above.
<p>This is how you add a paragraph in HTML.</p>HTML Attributes
They are placed in the opening tag and include id, style, and class. An attribute has a name and a value. The name defines the additional information you want to add while the value gives more specifications. For example, in the p tag below, the style attribute adds a font family and a purple colour to the <p> . You can equally notice another attribute, class which defines the CSS class of the element. It adds additional styling to the element and it can be used on any other elements you wish to apply the same style.
<p style="color:purple;font-family:verdana" class="purple-text">This is how you add a paragraph in HTML.</p>Adding style to an element using style attribute is not a recommended way. The safest and recommended way is by using a class. You can learn more about CSS classes through the guide on CSS for beginners
Note that some attributes are specific to tags. For example, href attributes are only used in <a> tags, <src> attributes are only used in image, video and audio tags.
Commonly Used HTML Tags and Elements
There are more than 100 tags for creating a web page or web page but most developers usually use a handful of them. Also, some browsers no longer support some of these tags but it’s still worth getting to know them. This section highlights the most-used HTML tags. They are generally divided into two.
Block-Level Elements
Block-level elements occupy the full width of a page so the next element always starts on a new line. The most popular block-level tags include:
- Heading tags: The heading element allows you to specify the heading or subheading of your content. They range from <h1> to <h6>. The <h1> is the main heading while the others are the subheadings. For better comprehension, a book has a main title(<h1>) chapter titles and subtitles that are considered subheadings.
- Paragraph tags: They are denoted with
<p>and defines the paragraphs - List tags: A typical example of a list tag are these three bullets. This is an unordered list. Many websites represent information in the form of lists. There are two types:
- Unordered list. Here the order of elements in the list does not matter. They are wrapped in
<ul>. For example shopping list. - Ordered list. Here the order does matter. For example, a recipe procedure can be represented in a form of an ordered list. They are wrapped in
<ol>elements
- Unordered list. Here the order of elements in the list does not matter. They are wrapped in
An unordered list
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
An Ordered list
<ol>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ol>As you can notice the <li> tag specifies a list item while <ol> and <ul> specifies the type of list.
Other commonly used block elements include
<br>to insert a line break<div>to define a section<img>for inserting images
Inline Elements
Inline elements are used to format text without breaking the flow of the content or occupying the full width of a page. Common used inline elements include:
<a>for inserting links<strong>to render an element in bold- <
em>to format text in italics
Other commonly used HTML Tags
Besides, the elements discussed earlier, other commonly used HTML tags are:
<header>to define the header of a page or section<body>to define the content<audio>to embed sound content<video>to embed video content<button>to add a clickable element<table>for inserting a table
HTML History and HTML Versions
Tim Berners-Lee was a contractor at CERN when he proposed a system for CERN researchers. Later on, in 1989, he wrote a memo proposing an internet-based hypertext system. He is known as the father of HTML. In 1991, Tim proposed the first HTML document. Today the latest version of HTML is HTML5. This section defines the history and different versions of HTML.
HTML1.0: Released in 1991, it was the version that could link different documents or pages using href attribute.
HTML2.0: It was released in 1994 and was an expansion of HTML 1.0. It supported features like form upload, form elements such as text box, option button
HTML3.2: The W3C publish this version in early 1997. This version of HTML was capable of creating tables and providing extract options for form elements. It even supports web pages with complex mathematical equations.
HTML4.01: This version was released in December 1999 and introduces features like scripting, and stylesheets. It was the first very stable version of HTML. It was the revised version of HTML4.0
XHTML: Released in 2000, it stands for Extensible Hypertext Mark-up language. It’s not really a version of HTML but rather another form of writing HTML. XHTML has a strict set of rules
HTML5: After many years of research work, HTML5 was born. It’s the best version of HTML to date. It was released in 2014 and supports audio and video content and provides full support for JavaScript.
Evolution of HTML – Difference Between HTML and HTML5
The first version of HTML had 18 tags and as the version evolve, new tags and features were added. The most significant version to date is HTML5. The main difference between HTML1.0 and HTML5 is that HTML5 support many new features and also several semantic tags like <article>, <header> that clearly describes the content of a page.
Pros and Inconvenience of HTML
HTML has its strengths and weaknesses just like any other computer language. This section will discuss the pros and cons of using HTML.
Pros
- It’s simple to learn. HTML is beginners friendly you don’t need any knowledge of programming to learn it.
- It has many supports. Since HTML is widely used, there are many resources and a large community that supports it. You can find support anywhere easily.
- HTML is Accessible. HTML is free and open source. Just equip yourself with a browser and a text editor.
- It’s flexible. You can easily use HTML with PHP and Node.js
- HTML generally runs on most browsers.
- It has an easy and consistent structure
Cons
- Browser compatibility problems. Some browsers still do not support some HTML features and hence do not render new tags.
- It is a static language. HTML is used only for static pages. If you need dynamic features on your website, you need to learn or hire a developer with JavaScript or PHP skills.
- You need to create different HTML pages even if the elements are the same
Relationship Between HTML, JavaScript and CSS
HTML s the building block of a web page. Unfortunately, HTML alone cannot build a fully functional web application with responsive features. It needs complementary languages like CSS and JavaScript.
CSS which stands for Cascading Style Sheets is used to add style like background colours, layout, and animations to HTML elements. JavaScript adds dynamic functions like sliders, pop-ups and more. These three languages(CSS, HTML, and JavaScript) form the basic tools for frontend development
What is Semantic HTML?
Semantic HTML basically means elements with meaning. That is, elements that convey the actual meaning of what they are used for.
Examples of Semantic HTML elements include:
<header><nav><main><section><footer><article><aside>
A great advantage of these semantic elements is that web crawlers can easily index web page content easily hence improving SEO. So websites that uses semantic HTML are more informative and accessble to those who uses screen readers to access the content.
Importance of Semantic Tags
This section highlights the importance s well as what semantic HTML tags do.
<header>: The header defines the introduction section of a web page. It generally contains elements like nav, logo and search bar.<nav>: It specifies the navigation items of the web page like home, about ad contact pages<main>: It contains the main section of the web page apart from the<header>and<footer><aside>: It represents the sidebar on a web page<article>: It defines a certain part of a web page that contains some particular information.<section>It defines a particular section of a web page. Thesectiontag usually contains a heading and some content specific to it.<footer>: It contains information like quick links, copyright information or additional resources.
Where can I learn HTML?
HTML is the first step to Web development since it’s the building block of the web page as a web page is a hypertext document on the World Wide web. There are many online platforms to learn HTML. Some of the popular and most-used ones are:
Frequently Asked Questions about HTML
Is HTML Easy to Learn?
Yes, HTML is the basic skill to learn for web development. Its simple structure and accessibility make it easy to learn and use. In fact, it’s the easiest programming language to learn and has many free online courses
Which Type of Language Is HTML?
HTML stands for Hypertext Mark-up Language and it’s used to format web page content. It is not in any case a dynamic programming language but rather a markup language.
Why Should I Learn HTML?
If you want to learn Web development, then HTML is a good beginning. HTML is also used for Game development. If you want to learn how the internet works then you need to also learn HTML as it’s part of the Internet.
Can I Find a Job with HTML Skills?
It is possible to get a Job like HTML Coder, given you have excellent HTML skills. HTML is also used in Web documentation. However, it’s recommended to learn HTML along with CSS and basic JavaScript as those languages are mostly used together today.
Do I need to Learn a Complementary Language for HTML?
Yes, I recommend you learn HTML along with CSS or CSS and JavaScript. It’s good to have a particular skill. But it’s always better to have more than one skill.
Who Develops HTML?
The WC3 together with the WHATWG( Web Hypertext Application Technology Working Group) develops and maintains HTML
Conclusion
HTML is a markup language doe describing web pages. It has a series of elements to create and maintain the structure of a web application. HTML is one of the easiest languages to learn and has many free resources and online courses. To add style to your web page or web application, you need to combine it with CSS and also JavaScript for dynamic functionalities.
I hope this article will or has helped you learn the basics of HTML, what it does and how it does it. After learning HTML, you could continue with CSS or even CSS Frameworks and JavaScript to start building your career as a Frontend developer or Technical content writer.
