DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for HTML basics structure
EOluwaseun
EOluwaseun

Posted on • Updated on

HTML basics structure

1️⃣ The DOCTYPE

Every first Line of any HTML document must begins with a Declaration that identifies the Document Type.

document type illustration

The Declaration lets the browsers know in advance the kind of document they will be processing, Enabling them to modify their processing procedures accordingly

  • The document type is formatted asπŸ‘‡
<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode
  • This tag informs the browser that the Language used to create the markup on the page is HTML

➑️ Hint: There is no Case difference in
<!DOCTYPE > declaration

!DOCTYPE Declaration commonmistakes

2️⃣ Html Element

HTML tag appears immediately after the document type declaration at the top☝of the page.

  • html illustration

The Opening and Closing HTML tags act as the building blocks for our Webpage, with the majority of Other tags nested inside of them.

πŸ‘‰ NOTE: An opening HTML tag must have a corresponding closing tag to specify the ending of the HTML Page.

open and closing html illustration

3️⃣ HEAD TAG

The Open head tag comes next after open html tag .The head is also a pair tag i.e it must be Closed.

opening and closing head tags

The head tag contains important instructions for our browser, and the most frequently found elements in the head tag includes

  • TITLE

  • META

  • STYLE

  • LINKS,etc.

➑️ TITLE

The title of the page is Firstly defined by the head tag.
Specified with both open and closing tags. these tags. then display the real title of the page in the browser's tab or title bar.

<title>MY FIRST WEBPAGE</title>
Enter fullscreen mode Exit fullscreen mode

The resultπŸ‘‡

title of Webpage

➑️ META

The meta tags are the next set of tags in our Head tag following the title.

meta in html

What's meta❓
meta is an HTML tag that provides information about document's metadata.

πŸ‘‰ Metadata is simply an information about data.

Metadata are hidden from displayed on the Webpage, but the main goal of it, Is to give the browser and search engines valuable information about your website

  • The first meta tag is known as the meta name description . The description is then Followed by the content .
<meta name= "description" content=" ........ " />
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Description is an HTML tag that summarises the page’s content.

πŸ‘‰The contentπŸ€”β“
Content is the sample of text that appears below the link of your search results

The purpose of the meta description is to entice searchers to visit your website. And it informs them of the page's content.

Example belowπŸ‘‡

 description on websites

The next tag indicates theπŸ‘‡

< meta charset = β€œutf-8" >

Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Charset is an HTML attribute,that defines character encoding which browser uses when displaying website's content

β€’ The value of the charset is β€œUTF-8”

  • What's About "utf-8"πŸ€”β“

"utf-8" is a character encoding that converts machine code into text that can be read by humans and vice versa.

πŸ‘‰Any language can be displayed using
"utf-8". Additionally, it expands upon the previous encoding scheme ASCII , which uses 7-bit code points to encode 128 unique characters .

While utf-8 uses 8-bit code points, supports up to 256 distinct characters , and introduces a number of extra international characters like Chinese and Arabic that ASCII does not.

What are machine codeπŸ€”β“

Machine code is a collection of binary numbers or bits that computers can comprehend.

Since binary is the only language that a computer could understand, utf-8's primary function is to translate our text file into that format.

  • And Lastly we have the meta viewport πŸ‘‡
<meta name="Viewport"content="width=device-width, scale-initial=1"/>

Enter fullscreen mode Exit fullscreen mode

What's ViewportπŸ€”β“

πŸ‘‰ Viewport is the viewers visible portion of the webpage πŸ–₯.

Viewport meta tag inform the browser how to regulate the size of the pages. And the size changes depending on the device πŸ’»πŸ“².
Example below πŸ‘‡

Viewport description

πŸ‘‰The open and closing style tags are the following tag in our head tag

  • All Code that is included in the style tag are refer to as style rules,Also, it defines the Cascading Style Sheet (CSS) for pages

The Cascading Style can be used to format any HTML element, including font , colors , line , height , and more.
However, because of how frequently it is used, CSS is the subject of a whole course.

πŸ‘‰ The body

  • The body serves as the primary content region of an HTML document.

  • It is also referred to as the last child of an HTML tag and contains a starting tag and an ending tag that are both enclosed within the HTML tag.

html documentdescription

Top comments (0)

12 Rarely Used Javascript APIs You Need

>> Check out this classic DEV post <<