What is Html

HTML (HyperText Markup Language) is a markup language that tells web browsers how to structure the web pages you visit. HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way

Anatomy of an HTML element

tag

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 paragraph begins.
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 paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
The content: This is the content of the element, which in this case, is just text.
The element: The opening tag, the closing tag, and the content together comprise the element.

attribute

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 a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things. Some attributes have no value, such as required.

Creating your first HTML document

Let's create a basic HTML file, and have a look at what it is made up of:

Inside your web-projects folder, create another new folder called first-website.
Inside first-website, Create a new file called index.html, and insert the following code into the file exactly as shown:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<meta charset="utf-8"> — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of 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.
<meta name="viewport" content="width=device-width"> — This viewport element ensures the page renders at the width of viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down.

Marking up text

Paragraph

<p> elements are for containing paragraphs of text.

<p>This is a paragraph of information.</p>
<p>This is another paragraph.</p>

Headings

HTML contains 6 heading levels, <h1> - <h6>, although you'll commonly only use 3 to 4 at most:

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

Lists

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.
Ordered lists are for lists where the order of the items does matter, such as a list of cooking instructions in a recipe. These are wrapped in an <ol> element.

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

<p>I love summer fruits and mostly: </p>
<ul>
  <li>Mango</li>
  <li>Banana</li>
  <li>Strawberry</li>
</ul>

Line breaks

Used where breaks in lines are critical: Poem, address, etc.

<p>Line of poem<br>
  Another line of the poem</p>

Strong importance

An item is strongly important relative to surrounding text. Text is generally rendered bold, but this is not a reason to use this tag.

<p>Putting your hand on a hot stove <strong>will get you burned</strong>. Don't do it!</p>

Emphasized text

An item is emphasized relative to surrounding text. Text is generally rendered in italics, but this is not a reason to use this tag.

<p>You simply <em>must</em> try this new coffee shop!</p>

Links

To add a link, we need to use a specific element — <a> — "a" being the short form for "anchor". Links can go anywhere: to pages on your site, to pages on other sites, or to files (like a PDF).

<a href="http://www.google.com">Go to Google</a>

Image

Displays an image on your page. Image formats include JPG, GIF, PNG. You may see SVG elements as well. The src (source) attribute is required. Also consider adding an alt attribute.

JPG, GIF, PNG = raster images (a bunch of pixels)

SVG = vector image (a mathematical equation)

src = image source (a file path to the image)

alt = alternative text. Displays if the image does not. Read by search engines and screen readers. It should fully describe the image, so you could imagine what the image looked like if you could not see it.

<img src="https://placecats.com/350/400" alt="A cat." />

Result

Nested 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>

Void elements

Some elements have no content and are called void elements. Take the <img> element that we already have in our HTML page:

<img src="https://placecats.com/350/400" alt="A cat." />

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.