HTML stands for Hypertext Markup Language which is the basic building block of the web. Whatever you see on the web today is written in HTML. It is the standard markup language for documents designed to be displayed in a web browser.
This HTML course provides a solid overview to we developers, from novice to expert-level HTML. If you're completely new to HTML, you will learn how to build structurally sound content. If you've been building websites for years, this course may fill in gaps in knowledge that you didn't even know you had.
Let's start this chapter with a question. What was before HTML? Stop reading, and think about this question for a moment with your eyes closed. Don’t know? No worries, @dsabyte is here to help you.
Before HTML, there were various attempts to create a standard for document structure and presentation on the early Internet. One such example is "SGML" (Standard Generalized Markup Language), which served as a foundational markup language for defining the structure of documents. HTML itself is a simplified derivative of SGML.
Enough, let me explain to you in plan language.
The invention of HTML was done along with the invention of the World Wide Web which is known more commonly as WWW(W3). So, it's important to understand how W3 came into the picture before we start learning HTML.
This chapter will give you an overview of the history of HTML and how it was invented, it won’t go into too much detail.
Before the invention of HTML (Hypertext Markup Language), which was first introduced in 1991 by Tim Berners-Lee, the World Wide Web as we know it today did not exist. The web was a very different place, and accessing and sharing information were not as seamless and user-friendly as they are now.
Let's assume that there is no HTML and World Wide Web (www), how would you access the information stored on someone else computer?
There were two friends, Rahul and Bob. Rahul lives in India, while Bob lives in the USA. As friends, they frequently exchange information. Whenever Bob travels to India, he carries his documents, images, etc. Upon his return, he asks Rahul to share Rahul's information.
Imagine how difficult would it be for us to live in such a world where you needed to travel 13.5 km just to share a few pieces of information and now we do it with a few clicks within a minute. Back then it wasn’t an issue to travel 13.5 km to share some information as the goal was still being achieved. It would be horrible to assume, that Bob forgot one important document while travelling to India and he needed to travel once again. Wouldn’t it be frustrating?
Place yourself next to Bob, and think about the situation with your eyes closed for the moment
There were several problems with the existing information exchange system
Tim Berners-Lee On 12 March 1989, he submitted a memorandum, titled
"Information Management: A Proposal", to the management at CERN. The proposal used the term web and was based on a large hypertext database with typed links.
He considered several names, including Information Mesh, The Information Mine or Mine of Information, but settled on the World Wide Web.
Berners-Lee aimed to marry hypertext to the internet. In the process, he developed three essential technologies:
He published a more formal proposal on 12th November 1990 to build a hypertext project called the World Wide Web (W3) to be viewed by browsers using a client-server architecture.
By December 1990, Tim Berners-Lee and his work team had built all the tools necessary for a working Web.
Here is a nice blog about the world’s first website (The World's First Website)
HTML is a standard markup language for creating web pages. It enables you to define and organise elements for any web page using tags to denote various elements such as headings, paragraphs, images, links, forms, and more.
If you have ever read a book or newspaper, you might have noticed how they organise their content on paper with various formatting. Newspapers usually have a big headline on the very top, they used to have multiple columns. Less important news is kept at the bottom with smaller size headline than the main headline.
HTML also follows a pretty much similar concept, it allows you to define the structure of the webpage. An HTML page consists of a series of elements and elements tell the browser how to display the content. HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
Here is a basic HTML snippet that just prints "Hello, @dsabyte!" heading.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You can see the output in below code pen example
You'll learn more about HTML in the next sections of the HTML chapter
HTML elements are written in a text file with extension
.html. These files are kept on a server accessible via the Internet. End users use the browser to access html files located on the server. The browser downloads those HTML files and it displays the content of the file on the screen for the user.
There are a lot of other things happening in the background for rendering HTML and surely we'll learn them later in this chapter.
We'll learn the fundamental of HTML. We'll learn what are HTML elements and its attributes, HTML document structure that constitute the backbone of HTML (Hypertext Markup Language). As you embark on your journey to master web development, understanding these core concepts is crucial for creating well-structured and semantically meaningful web pages.
An HTML document is a tree of nodes, including HTML elements and text nodes. HTML elements provide the semantics and formatting for documents, including creating paragraphs, lists and tables, and embedding images and form controls. We'll learn about the HTML elements in this article.
The structure of an HTML document is a crucial framework that defines how information is organized and presented on a web page. This structure is recommended to ensure consistency, accessibility, and proper rendering across different devices and browsers. Although the browser doesn’t throw any error if an HTML document does not follow any structure, it's recommended to follow the structure. Let's learn the key components of HTML document structure.
We'll see some HTML editors that can be used to write HTML code. Any simple source code editor can be used to write HTML but that wouldn’t be suitable for professional use. Simple source code editor lacks syntax highlighting and autocompletion features.
In this article, we'll cover the process of creating an HTML page using a source online code editor and a web browser. In this article we have introduced HTML meta tags, and some document-level attributes, for example, lang, charset etc. We'll also see a live example of the HTML page.
In this article we will learn about different HTML quotations and citing elements. HTML quotation and citing refer to the markup used in HTML documents to display quotations and citations. They are essential for indicating when content is quoted from another source, providing proper attribution, and maintaining academic integrity.
Hyperlinks refer to the HTML links. They are used to move from one webpage to another, link an image or another HTML element. The above task is accomplished with the help of <a> tag. HTML hyperlinks helps in creating multipage websites and linking different websites.
Images are used to enhance visual appeal and convey information effectively. Images and text help to communicate better and improve user-experience. It also helps to improve search engine optimization if relevant images and proper alt text (discussed later in the article) is used.
Bookmarks are a way to remember the website. HTML bookmarks help to scroll down to a specific part of the webpage. If the webpage is very long, and we want the reader to jump to the location of the specified bookmark, we can link to that part of the webpage using its id.
The HTML <picture> element gives the developer the flexibility to load different images for different screen sizes or different devices. It helps in delivering a better user experience by delivering the most appropriate image as per the user's device.
HTML lists are fundamental components of HTML markup, offering a structured format to organize and display information either in an ordered or unordered manner. They serve as a fundamental tool for presenting data in a clear and organized way. They to organize information, navigate menus and format text.
Join the "News Later" community by entering your email. It's quick, it's easy, and it's your key to unlocking future tech revelations.
Every week, we curate and deliver a collection of articles, blogs and chapters directly to your inbox. Stay informed, stay inspired, and stay ahead in the fast-paced world of technology.
Rest assured, we won't clutter your inbox with unnecessary emails. No spam, only meaningful insights, and valuable content designed to elevate your tech experience.