</HTML> back to the basics

</HTML> back to the basics

Start fresh.jpg

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

2020-11-28 (29).png

  • 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.

  1. ex. of semantic tags Section
    header
    nav
    footer
    aside
    article...etc

  2. ex. 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

2020-11-28 (22).png 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

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.