W3C Designer

basics of html

5/16/2021
Hacker
HTML basics


HTML basics

HTML is used to structure a web pages and its contents.

HTML Documents

All HTML documents must begin with a declaration of the document type: <! DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. <body> and </body> the visible parts of the HTML document. Is between.

HTML Page Structure

Html Page Structure

Note : The content inside the <body> section (white area above) will be displayed in a browser. The content inside the <title> element will be displayed in the title bar of the browser or in the tab of the page.

A Simple HTML Document

Simple Html Document

Description of Simple HTML Document

The <!DOCTYPE> Declaration

It defines the document type or it instructs the web browser about the version of HTML. The <! DOCTYPE> declaration defines the document type, and help browser's to show web pages correctly. Declaration appears only once, at the top of the webpage before any HTML tag. Announcement <! DOCTYPE> is not case sensitive.

  • <html> : This tag notifies the browser that it is an HTML document. The text between the HTML tags describes the web document. This <! DOCTYPE> Is a container for all other elements of HTML except
  • <head> : It should be the first element inside the <html> element, which contains metadata (information about the document). It should be closed before the body tag is opened.
  • <title> : As its name suggests, it is used to add the title of an HTML page that appears at the top of the browser window. It should be placed inside the head tag and closed immediately. (Alternative)
  • <body> : The text between the body tags describes the main content of the page that is visible to the end user. This tag Include the main content of the HTML document.
  • <h1> : The text between the <h1> tag describes the title of the first level of the webpage.
  • <p> : The text between the <p> tags describes the paragraph of the webpage.

Building blocks of HTML

An HTML document has its basic building blocks which are:

  • Tags : Tags are always surrounded by angle brackets (less than/greater than characters), as in <body>. Read Html Tags
  • Attribute : An attribute in HTML provides additional information about the element, and is implemented within the start tag. An HTML attribute consists of two fields: name and value. Read Html Attributes
  • Elements : An HTML element is an individual component of an HTML file. In an HTML file, everything written within the tag is called an HTML element. A HTML element is defined via start tag,  end tag and some contents.
Start tag Element content End tag
<h1> W3C Heading </h1>
<p> W3C Paragraph </p>
<br />

Note : Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

if you forget to close the last tag, Some HTML elements will shows rightly. However, never rely on it! Unintended consequences and errors can occur if you forget the last tag!

HTML elements can be nested which means elements can consist another elements. All HTML documents contains nested HTML elements.

HTML Tag vs. Element

An HTML element is explained by an opening tag. If the element contains other content, it ends with a closing tag. For example, <h1> is starting tag of a heading and </h1> is closing tag of same heading but <h1> this is heading </h1> is a heading element.

Syntax of Html Building blocks

<tag name attribute_name= " attr_value"> content </ tag name>

Example of Html Building blocks

Html Building Blocks

HTML Editors

HTML file is a normal text based file, so we can use any text editor to create an HTML file. Text editors are programs those allow to writing text and editing of written text on text based file. so to create web pages we need to write our code in text editor. There are a variety of text editors available for your device that you can download directly, but for beginners, the best text editor is Notepad (Windows) and TextEdit (Mac).

W3code Designer - Free Online Html Editor

With our online editor, you can write your HTML code and view results in your browser. This is the perfect tool when you want to test code faster. This Editor also has color coding and the capability to save and share code with another's:


No comments:

Post a Comment