HTML is not a programming language, as you cannot write logical or conditional statements in it.
- HTML is a markup language
- Its sole purpose is to add content to a page
- The building blocks if HTML are:
- Elements
- Tags
- Attributes
Elements are the basic building blocks of HTML, they are used to present different types of content such as p tag, IMG tag, article tag, etc. an attribute on another hand provides different values to an element.
Setting up a standard document
A plain text editor saved with a .html extension creates your desired file to write HTML tags on.
Once you open your text editor, add some text and save it, you will be able to view that content.
But that content has no meaning/value. To make it meaningful and allow google to rank your pages, you've got to follow the given protocol by adding tags within.
Therefore we have to set up a standard Html doc. and save the desired information within the appropriate tags to get your webpage ranked better
the doctype tag basically tells you the standard version of HTML
The lang='en' present in the root tag tells us the language of the content used on the page
head tag is responsible for holding metadata and links to the corresponding files such as script or style
body holds all visible content
What is Semantics?
It's basically the practice of giving content exact meaning/structure by using proper elements regardless of its style. It plays a very important role in Search Engine optimization.
ex. of semantic tags Section
header
nav
footer
aside
article...etcex. of non-semantic tags
div
span
###Div and span tag
the div tag is a block tag that is usually used to contain a large number of elements with it.
while the span tag is usually used to group text within a block-level element
Structure-Based Elements
Many web sites contain HTML code like:
<div id="nav"> < div class="header"> < div id="footer">
to indicate navigation, header, and footer. In HTML there are some semantic elements that can be used to define different parts of a web page: such as
<footer> <header> <main> <aside>
etc
Header tag
It can be placed either on top of the page or inside aside, main, section, or article or any other division of a page. It wraps introductory text and even major navigations
nav
It groups all navigation links and it is intended only for the significant blocks of navigation, and not necessarily all of the links on the given page.
###main It wraps all the main content of the body eg. section, article, aside, etc. It should not include the main navigation links which are present separately in the header along with logos and footers
section
used to define different sections on a page. Using sections help us to build a better hierarchical structure. sections should not be used as a generic container.
article
as the name dictates it is used to represent an article. The content of the article may be independent of the content of the site eg. blog post
aside
It defines a section that is indirectly related to the main content such as the sidebar. most commonly used to add a left/right sidebar. we position the article using CSS
footer
It Identifies the content that comes to the bottom of the page, document, section, or article. It is usually used to wrap content such as copyright or author's name.