HTML Introduction

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.

  • HTML stands for Hyper Text Markup Language
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content

HTML Document Structure

Before you can start adding content to your document, there's a basic structure you need to set up in your file.This structure isn't only required for your document to be compliant but will also allow you to provide useful information about your document.

The basic structure of any HTML document consists of the following sections or elements:

  • The DTD (!DOCTYPE declaration).
  • The main container (html element).
  • The head section (head element).
  • The body section (body element).

Basic Page Structure

                    
                       
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document Title </title>
</head>
<body>

<h1> PAGE CONTENT GOES HERE </h1>

</body>
</html>

HTML Elements

An HTML element is an individual component of an HTML (Hypertext Markup Language) document or web page.[vague] HTML is composed of a tree of HTML nodes, such as text nodes. Each node can have HTML attributes specified. Nodes can also have content, including other nodes and text. Many HTML nodes represent semantics, or meaning. For example, the <title> node represents the title of the document.

An HTML element usually consists of the following essentials:

  • It has a start tag and an end tag
  • A content is inserted in between them
  • They can be nested

A Typical HTML Element Illustrations!

                    
<h1>This is an h1 element </h1>
<p> This is an paragraph element </p>
<a> This is an anchor element for making links </a>
<title> Title elements are useful in SEO </title>

HTML Attributes

HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of an HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to an HTML start tag.

Several basic attributes types have been recognized, including: (1) required attributes, needed by a particular element type for that element type to function correctly; (2) optional attributes, used to modify the default functionality of an element type; (3) standard attributes, supported by many element types; and (4) event attributes, used to cause element types to specify scripts to be run under specific circumstances.

Attributes provide additional information about HTML elements.

  • All HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value"

Using of HTML Attributes

                    

<a href="#"> Visit w3schools </a>

HTML Headings

HTML5 headings make it easy to syndicate and reuse content, without breaking the heading hierarchy. Using HTML5 headings and keeping the heading hierarchy backwards compatible proves unexpectedly complicated though. The HTML5 specification has a solution, but is it the right one?

HTML5 uses sectioning content to break a page up into chunks. The <article>, <aside>, <nav> and <section> elements can be used to explicitly create sections. Here’s what the HTML5 specification says about sectioning content:

Sectioning content is content that defines the scope of headings and footers… Each sectioning content element potentially has a heading and an outline.

Headings Example

                    
                           
<h1>This is an h1 element </h1>
<h2>This is an h2 element</h2>
<h3>This is an h3 element</h3>
<h4>This is an h4 element</h4>
<h5>This is an h5 element</h5>
<h6>This is an h6 element</h6>

HTML Paragraphs

The HTML <p> element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing

  • The HTML <p> element defines a paragraph:
  • With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code

How to use Paragraphs in a Webpage

<p>My name is Daniel Narh, and I am a React Developer, and a Disease Control Officer </p>

HTML Styling

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax: 

                    
                                       
<tagname style="property:value;" />

Using the Style Attribute for Html Styling

                    
                       
<body style="background: midnightblue">

HTML Formatting

In the previous chapter, you learned about the HTML style attribute. HTML also defines special elements for defining text with a special meaning. HTML uses elements like <b> and <i> for formatting output, like bold or italic text. Formatting elements were designed to display special types of text:

  • <b> - Bold Text
  • <strong> - Strong Text
  • <i> - Italic Text
  • <em> - Emphasis Text
  • <mark> - Mark Text
  • <ins> - Inserted Text
  • <sub> - Subscript Text
  • <sup> - Superscript Text

HTML Quotations

Here is a quote from WWF's website

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

The HTML <q> element defines a short quotation. Browsers usually insert quotation marks around the <q> element

Using the Quote Element

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.WWF's></q> <p>

HTML Comments

Comment tags are used to insert comments in the HTML source code.You can add comments to your HTML source by using the following syntax:

< !-- Write your comments here -- >

HTML Colors

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values

Tomato
Orange
DodgerBlue
Violet

HTML Images

Images can improve the design and the appearance of a web page.

Using Images in a Webpage

                    
<img src="img/html-logo.png" alt="logo"/>

HTML image logo