Basics of html

 HTML-

HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content.

<p>My cat is very grumpy</p>

Element - p(paragraph)

Content of Element -My cat is very grumpy

<p class="editor-note">My cat is very grumpy</p>

Attribute: Attributes are defined by HTML

attribute name - class 

attribute value - editor-note

The attribute's main role is to initializes the DOM properties. So, once the DOM initialization complete, the attributes job is done.

An attribute should always have the following:

1. A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
2. The attribute name followed by an equal sign.
3. The attribute value wrapped by opening and closing quotation marks.
4. Note: Simple attribute values that don't contain ASCII whitespace (or any of the characters  " ' ` = < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.

Nesting Elements

You can put elements inside other elements too — this is called nesting. If we wanted to state that our cat is very grumpy, we could wrap the word "very" in a <strong> element, which means that the word is to be strongly emphasized:

<p>My cat is <strong>very</strong> grumpy.</p>

Empty elements

Some elements have no content and are called empty elements. Take the <img> element

<img src="images/firefox-icon.png" alt="My test image">

This contains two attributes, but there is no closing </img> tag and no inner content. This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.

HTML Property:

Properties are defined by the DOM (Document Object Model).

Property values can change; attribute values can't.

For example, when the browser renders <input type="text" value="Bob">, it creates a corresponding DOM node with a value property initialized to "Bob".

When the user enters "Sally" into the input box, the DOM element value property becomes "Sally". But the HTML value attribute remains unchanged as you discover if you ask the input element about that attribute: input.getAttribute('value') returns "Bob".

The HTML attribute value specifies the initial value; the DOM value property is the current value.

Marking up text

This section will cover some of the essential HTML elements you'll use for marking up the text.

Headings

Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1>–<h6>, although you'll commonly only use 3 to 4 at most:

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Now try adding a suitable title to your HTML page just above your <img> element.

Paragraphs

As explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:

<p>This is a single paragraph</p>

Add your sample text (you should have it from What should your website look like?) into one or a few paragraphs, placed directly below your <img> element.

Lists

A lot of the web's content is lists and HTML has special elements for these. Marking up lists always consist of at least 2 elements. The most common list types are ordered and unordered lists:

1. Unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. These are wrapped in a <ul> element.
2. Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> element.

Each item inside the lists is put inside an <li> (list item) element.

For example, if we wanted to turn the part of the following paragraph fragment into a list

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

We could modify the markup to this

<p>At Mozilla, we’re a global community of</p>
    
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

HTML structure:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body> 

</html> 

The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page <title>, links to CSS (if you choose to style your HTML content with CSS), links to custom favicons, and other metadata (data about the HTML, such as the author, and important keywords that describe the document.

head's job is to contain metadata about the document

The <h1> element appears on the page when loaded in the browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.)

The <title> element is metadata that represents the title of the overall HTML document

Metadata: the <meta> element

Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the <meta> element. 

Specifying your document's character encoding

In the example we saw above, this line was included:

<meta charset="utf-8">

This element simply specifies the document's character encoding — the character set that the document is permitted to use. utf-8 is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it's therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine:

How to structure a HTML page:

Breakdown question :

How to add meta tags?

How to structure navigation?

How to wrap complete page with blocks (div element)?

Page section and their hierarchy?

Relationship with every page blocks?

HTML gets structured based on h1 to h6 and not based on div. TO visualize this better use html outliner extension.