HTML basics

Introduction

Basic structure of an HTML document:


<!DOCTYPE html>
<html lang"en">
<head>
<title> Your Title </title>
<meta>
<style>
</style>
</head>
<body>
<h1> My Heading </h1>
<p> My Paragraph </p>
</body>
</html>

<html> Is the container element for all other elements.
<head> Contains Title, Coding standards, links to external style sheets and scripting code.
<body> This section holds the content the user can see in the browser.

Metadata Content

These are the elements that reside in the head section of the document, such as <title>, <script> and <style>. These elements contain the document metadata, which is information about the document itself, such as how to present the document or what other documents are related to this one, for instance; the style sheets.


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Flow Content

Flow content elements are most of the elements that are used within the <body> section of the document. This category includes all of the standard HTML tags such as <p>, <div> and <blockquote> as well as the newer page layout elements introduced in HTML5 such as; <article>, <header> and <footer>

Element	Description
<article>	A section of content that forms an independent part of a document or web site.
<header>	Header of a section
<footer>	Contains footer content.
<p>	Marks the beginning of a new block of text
<div>	Indicates a division within the document
<blockquote>	Indents text on both the left and right margins

Embedded Content

Embedded content elements load external content into the web page. This content can be an image, video or audio file. The <img> element as well as <audio> and <video> elements are part of this category.


<iframe width="560" height="315" src="https://www.youtube.com/embed/v4sjagpSs-A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Phrasing Content

Phrasing content includes elements that are used within lines of text in a document. These include <em>, <strong> and <span> (in HTML4 they were called inline elements).

Below is an example of inline style; "structured language" will have a yellow background:

Html is a markup language, a <span style="backround-color: yellow;"> structured language </span> that lets you identify common sections.

The <em> tag italicize the text in the body and is used to separate the text from the rest of the body


  <em>This text will be emphazised from the rest of the text in the body</em>

Basic Rules

For creating syntactically correct code, 5 basic rules must be followed:

Documents must be well formed.
All tags must nest properly and not overlap.
Use all lowercase for element names.
Always use closing tags.
Attribute values must be contained in quotation marks.

incorrect nesting:


    <p><strong>Hello World!</p></strong>

correct nesting:


     <p><strong>Hello World!</strong></p>