Did you ever wonder how to bring your Ideas to life?
You may have seen many eye-catching, aesthetic websites, and want to learn more about how these websites work. For that the first thing you need to learn is HTML. The very first step of Web Development. In fact, all the information you are reading now is simply data that has been stored in an HTML file and sent to your browser.
To build a basic webpage you need to implement three things.
- HTML, CSS, JAVASCRIPT.
For today we will only focus on HTML.
What is HTML?
HTML stands for Hyper Text Markup Language. Hypertext is text which contains links to other texts and that's basically the entire web. Markup means to mark something up, to annotate. Language basically implies that it has its own syntax meaning there's a right and a wrong way to code it.
It is the main file that is loaded first in your browser when you look at a website. You need to know first that HTML is not a programming Language. HTML is the standard language that is used for creating web pages and web applications.
Is it really that much of a deal to learn HTML?
In today's first paced world building a website is no big deal because of the website builders like Wordpress, Wix, Weebly. With the help of their features you can build a website that is both functional and stylish.
But building your own website is an individual skill. Despite how complex the process may be. It enables you to stand out from the crowd, helps you understand and explore the depth of it.
To put it simply, with a basic knowledge of HTML you can build a unique website that you can edit and update yourself.
Different Versions of HTML:
The first version of HTML was developed by physicist Tim Berners-Lee in 1990,Since then, HTML has been updated numerous times to address advances in technology.
HTML 1.0: released in 1991
HTML 2.0: released in 1995
HTML 3.2: released in 1997
HTML 4.01: released in 1999
XHTML: released in 2000
HTML5: released in 2014
The current standardized version is HTML5, which has been in use since 2014. HTML5 is the best version of HTML up till now.HTML5 also provides full support for JavaScript to run in the background.
Structure Of HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>First Website</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<p>This is a Paragraph.</p>
</div>
</body>
</html>
It might not make sense right now, but once you read this article till the end, you’ll start to get it soon.
<!DOCTYPE html>
When HTML standards were first becoming popular, the web was full of pages that were not compliant with the standards. To help browsers render those pages correctly, browsers used the doctype declaration to distinguish between noncompliant and compliant pages.
Every HTML page should start with the doc type or document type declaration. The words doc type or HTML could be lower or upper case. The only thing you have to watch out for is that there shouldn't be any space between less than exclamation point and the word doc type. You can have as much space as you want anywhere else but it just doesn't look that great.
At the core of HTML is the HTML tag. So it's pretty important to understand what HTML tag consists of, and how to properly, syntactically properly, code up an HTML tag. Usually HTML tags have an opening(<>) and a closing tag(</>). And they surround some content.
it's basically a tag that contains the entire html document. After the html tag, goes the head tag. The head tag contains items that describe the main content of the page. Things like what character coding should the browser use for the main content. It can contain the author's description of the page, page title, and whatever other external resources are needed to render the page properly, among other things. The point is it contains some metadata about the main content. Let's write our first metatag to specify the character set in the coding of our webpage. While not absolutely required, it's always a good idea to specify the character set that the browser should know how to interpret the content of the webpage. The most commonly used character set is UTF 8. Also note that the meta tag is a stand alone tag. There is no closing meta tag. Next we'll specify the title of the page. The title is one of the tags that is actually required to be here. Without it, the HTML will be invalid.
After the head tag goes the body tag. The body tag is the root of all content that is visible to the user. It is often referred to as a viewport.
One more note before we move on. When the browser opens an HTML page. It always renders or interprets the HTML code sequentially from top to bottom. So the doctype declaration gets interpreted first, then the HTML tag, then the head tag, and on and on until it hits the last closing HTML tag.
HTML content Models:
The term content model refers to the full behavior the browser applies to the elements belonging to that content model, and to the nesting rules of those elements. HTML elements were either block level or inline elements.. Block level elements render to begin on the new line by default. You could change that with CSS but we're not talking about CSS at this point, yet. So what that means is every time you specify a block-level element in HTML, the browser will automatically place that element on a new line in the flow of the document. Block-level elements are allowed to contain inline or other block-level elements within them. This is in contrast to inline elements, which render on the same line by default. Again you can change that, but by default it renders on the same line. Which means if you put a whole bunch of inline elements next to each other, they will all be going on on the same line, as if there is no new line character present.
Let's talk about the div and span element of HTML.The div element stands for division, and the span element stands for span. The div element is your most generic block-level element, and the span is your super generic, inline element.
How to write HTML code?
To start using HTML, you need a text editor like Notepad++ or SublimeText. Since an HTML file is in standard text format, any basic text editor will work.
For get the proper vibe you can use VS code, Atom etc.
Where to Learn More in depth about HTML?
Here are some best websites for you to explore.
So that's all from me.
I wish you very best in your expedition to the world of WebDEV.
If you like this post let me know in the comments about it and share with others. Thank You.
Top comments (0)