What is HTML ?
HTML stands for Hyper Text Markup Language. In short with this language you write the skeleton or structure of a webpage. Keep in mind that HTML is a UI or markup language not a programming language. The current version of HTML we use is 5 and its called as HTML5 also.
Full Picture ::
Now HTML5 is only responsible for creating the structure of webpage not for making it beautiful or creating the UI in 2 columns or 3 columns layout or aligning the text right or left or center or background images or colors or modifying the font sizes etc.
Now that is why we use css3. Go to CSS3 tutorial to learn to use.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<meta charset="UTF-8">
<!-- Add more meta tags or link CSS stylesheets here -->
</head>
<body>
<!-- Your page content goes here -->
</body>
</html>The above code snippet is the very basic structure of a HTML file.
It has 2 things to observe.
1. Doctype tag (<!DOCTYPE html>)
2. html tag (<html> </html>)
Doctype tag is the first instruction in any html file. It informs web browsers about the version of html in which the page is developed so that all the browser reads the page consistently.
HTML5 is the latest version but before it we had : v1, v2, v3 and v4 too.
Read more on this here: History of HTML
html tag is the starting tag of html file. Now this html tag has two childs::
1. head tag (<head> </head>), where you have title and meta tags.
2. body tag (<body> </body>), where you have all the pages UI, or you write div or span or literally any tags to structure your UI.
It has 2 things to observe.
1. Doctype tag (<!DOCTYPE html>)
2. html tag (<html> </html>)
Doctype tag is the first instruction in any html file. It informs web browsers about the version of html in which the page is developed so that all the browser reads the page consistently.
HTML5 is the latest version but before it we had : v1, v2, v3 and v4 too.
Read more on this here: History of HTML
html tag is the starting tag of html file. Now this html tag has two childs::
1. head tag (<head> </head>), where you have title and meta tags.
- title tags is used to define the title of that specific webpage. For each html file, it will be different.
- meta tags are used to add extra information about this html file or page. Even SEO info is defined using this meta tags.
2. body tag (<body> </body>), where you have all the pages UI, or you write div or span or literally any tags to structure your UI.
What is this html tags we have been reading above ?
We all know that in science, matters are made up of atoms or group of atoms, a term we use is building block or the smallest block. Same is the case here, html tags are the smallest blocks which make up the html pages. Normally more than one tags in combinations make up the whole page.
Some examples are: div, p, span, header, nav, footer, main, aside, section, article.
Now hold your breathe, we need to understand 6 things at this phase::
Now these 6 things we will cover in next sections and trust me if you understand all these 6 things you basically know HTML well and in a good shape to go to css tutorials with solid foundations.
Note::
To give you an idea, this fifth and sixth item, mentioned above is the information you hardly find anywhere on web and if found, it will be on some random blogs, where some senior dev shares their experience. Mostly it is expected that without reading or knowing about it you have to master it at workplace and it is one of the most complex thing if you do not know about it and directly get into coding.
Some examples are: div, p, span, header, nav, footer, main, aside, section, article.
Now hold your breathe, we need to understand 6 things at this phase::
- HTML Tags vs elements vs attributes.
- Block vs Inline block vs inline elements.
- Semantic vs Non-semantic tags
- How a particular tag is used in html ?
- Why a particular tag is used in html ?
- How to create a structure of a webpage in html ?
Now these 6 things we will cover in next sections and trust me if you understand all these 6 things you basically know HTML well and in a good shape to go to css tutorials with solid foundations.
Note::
To give you an idea, this fifth and sixth item, mentioned above is the information you hardly find anywhere on web and if found, it will be on some random blogs, where some senior dev shares their experience. Mostly it is expected that without reading or knowing about it you have to master it at workplace and it is one of the most complex thing if you do not know about it and directly get into coding.