Let's Start with HTML

HTML (Hypertext Markup Language) is the code that is used to structure and display a web page and its content. For example, content could be structured within a set of paragraphs,  a list of bulleted points, or using images and data tables.  As the title suggests, this article will give you a basic understanding of HTML and what its function is.

HTML is not a programming language; it is a markup language, and is used to 
tell your browser how to display 
the webpages you visit. 
It can be as complicated or as simple as the web designer wishes it to be. 
HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or an image a hyperlink to somewhere else, can italicize words,and can make font bigger or smaller, and so on. 

 For example, take the following line of content:

HTML element

The main parts of our element are:

1. The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins, or starts to take effect — in this case where the start of the paragraph is.
2. The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the end of the paragraph is. Failing to include a closing tag is one of the common beginner errors and can lead to strange results.
3. The content: This is the content of the element, which in this case is just text.
4. The element: The opening tag plus the closing tag plus the content equals the element.

HTML Attributes👇👇

Attributes contain extra information about the element that you don't want to appear in the actual content. Here, class is the attribute name, and editor-note is the attribute value. The class attribute allows you to give the element an identifier that can be later used to target the element with style information and other things.

An attribute should always have:

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 equals sign.
3. Opening and closing quote marks wrapped around the attribute value.    

HTML document

That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our index.html example .

Here we have:

•  — the doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days no one really cares about them, and they are really just a historical artifact that needs to be included for everything to work right. For now, that's all you need to know.
•  — the element. This element wraps all the content on the entire page, and is sometimes known as the root element.
•  — the element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keyword and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
•  — the element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.
•  — this element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.

Marking up text

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

Headings

Heading elements allow you to specify that certain parts of your content are headings — or subheadings — of your content. In the same way that a book has a main title, chapter titles and subtitles, an HTML document can too. HTML contains six heading levels,

 although you'll commonly only use 3–4 at most:

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

Paragraphs

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

<p>This is a single paragraph

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 two 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, like a shopping list. These are wrapped in a 
    element.
2. Ordered lists are for lists where the order of the items does matter, like a recipe. These are wrapped in an 
   element.

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

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

<p>helloo.dear anurag it's a paragraph .. </p>

We could modify the markup to this:

<p>helloo.dear anurag it's a paragraph </p>

    
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

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

Links

Links are very important — they are what makes the web a web! To add a link, we need to use a simple element —  — the "a" being short for "anchor". To make text within your paragraph into a link, follow these steps:

1. Choose some text. We chose the text "Mozilla Manifesto".
2. Wrap the text in an  element, like so:

1. <a>www.google.com</a>

2. Give the  element an hrefattribute, like so:

   <a href="">www.google.com</a>

3. Fill in the value of this attribute with the web address that you want the link to link to:

   <a href="https://www.google.com/en-US/about/manifesto/">google </a>