HTML
YouTube

YouTube videos can be embedded into website by using either the iframe or object HTML tags.

YouTube by Iframe

Below example will demonstrate the basic architecture of HTML Comments.

<!doctype html>  
<html>
    <head>
        <title>YouTube by Iframe</title>
    </head>

    <body>
        <iframe src="https://youtu.be/XDYn3ML3beA" width="560" height="315" frameborder="0" allowfullscreen></iframe>
    </body>
</html>

YouTube by Object

Below example will demonstrate the basic architecture of HTML Comments.

<!doctype html>  
<html>
    <head>
        <title>YouTube by Object</title>
    </head>

    <body>
        <object data="https://youtu.be/XDYn3ML3beA" width="560" height="315"></object>
    </body>
</html>


HTML
Video

The HTML <video> tag is used to embed a media player which supports video playback into the website.

Video Breakdown

Here is the breakdown of HTML Video.

Video Attributes

AttributeDescription
srcIt specifies the URL
widthIt specifies the width
autoplayIt specifies that the video will play automatically
controlsIt specifies that the video controls get displayed
heightIt specifies the height
loopIt specifies that the video will start again every time after finish
mutedIt specifies that the audio should be muted
posterIt specifies the image to be shown while the video is downloading
preloadIt specifies how and when the video file should load

Video Example

Below example will demonstrate the basic architecture of HTML Video.

<!doctype html>  
<html>
    <head>
        <title>HTML Comment Example</title>
    </head>
  
    <body>
        <video controls>
            <source src="intro.webm" type='video/webm;codecs="vp8, vorbis"'/>
        </video>
    </body>
</html>


HTML
Tables

Tables are utilized in HTML documents (web pages) to present tabular data. The HTML tables allow website authors to arrange data or record like text, links, images, other tables, etc. into rows and columns of cells.

In HTML, we create tables using the <table> tag, in conjunction with the <tr> and <td>.

Each set of <tr> tags (opening and shutting tags) represents a row within the table that they’re nested in. And each set of <td> tags represents a table data cell among the row that they’re nested in.

You can conjointly add table headers using the <th> element.

Breakdown

Here is the breakdown of HTML Table

Table Example

Below example will demonstrate the basic architecture of Table

<!doctype html>  
<html>
    <head>
        <title>Table Example</title> 
    </head>
  
    <body>
        <table>
            <tr>
                <th>Heading</th>
            </tr>
       
            <tr>
                <td>Content</td>
            </tr>
        </table>
    </body>
</html>


HTML
SVG

The <svg element is a container which is used to define a new coordinate system and viewport.

SVG Breakdown

Here is the breakdown of HTML SVG

SVG Circle

Example by Code

<!doctype html>  
<html>
    <head>
        <title>SVG Circle</title>
    </head>

    <body>
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" stroke="#212529" stroke-width="5" fill="#f5f2f0" />
        </svg>
    </body>
</html>

SVG Rectangle

Example by Code

<!doctype html>  
<html>
    <head>
        <title>SVG Rectangle</title>
    </head>

    <body>
        <svg width="200" height="100">
            <rect width="200" height="100" style="fill:#f5f2f0;stroke-width:10;stroke:#212529" />
        </svg>
    </body>
</html>

SVG Rounded Rectangle

Example by Code

<!doctype html>  
<html>
    <head>
        <title>SVG Rounded Rectangle</title>
    </head>

    <body>
        <svg width="400" height="180">
            <rect x="50" y="20" rx="20" ry="20" width="110" height="110” style="fill:#f5f2f0;stroke:#212529;stroke-width:5;opacity:0.5" />
        </svg>
    </body>
</html>

SVG Star

Example by Code

<!doctype html>  
<html>
    <head>
        <title>SVG Star</title>
    </head>

    <body>
        <svg width="300" height="200">
            <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:#f5f2f0;stroke:#212529;stroke-width:5;fill-rule:evenodd;" />
        </svg>
    </body>
</html>


HTML
Span

<span> tag provides an additional structure to HTML document. It is used to group and apply styles to inline elements.

Span Breakdown

Here is the breakdown of HTML Span.

Span Example

Below example will demonstrate the basic architecture of HTML Span.

<!doctype html>  
<html>
 
    <head> 
        <title>Span Example</title> 
    </head>
  
    <body> 
        <span>You can learn programming languages from PHPDocs.</span>
    </body>

</html>


HTML
Blockquote

The blockquote element is used to indicate the quotation of a large section of text from another source.

Browsers generally render blockquote text as indented text.

Blockquote Breakdown

Here is the breakdown of HTML Blockquote

Blockquote Example

Below example will demonstrate the basic architecture of HTML Blockquote.

<!doctype html>  
<html>
 
    <head> 
        <title>HTML Blockquote Example</title> 
    </head>
  
    <body> 
        <blockquote>
            Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.
        </blockquote>
    </body>

</html>


HTML
Paragraphs

Paragraphs are used to add text to a document in such a way that it will automatically adjust the end of line to suit the window size of the browser.

HTML automatically adds an extra blank line before and after a paragraph.

Paragraph Breakdown

Here is the breakdown of HTML Paragraph.

Paragraph Example

Below example will demonstrate the basic architecture of HTML Paragraph.

<!doctype html>  
<html>
 
    <head> 
        <title>Paragraph Example</title> 
    </head>
  
    <body> 
        <p>You can learn programming languages from PHPDocs.</p>
    </body>

</html>


HTML
List

HTML can display different items in the form of lists. Lists are used to present text in more readable form.

List Breakdown

Here is the breakdown of HTML List

Ordered List

An ordered list is a list of items in which each item is marked with a number or letter. Ordered list is also known as numbered list.

<ol> tag creates an ordered list and <li> tag is used with each item in the list.

Example

<!doctype html>  
<html>
  <head> 
      <title>Ordered List</title> 
  </head>
  
  <body> 
      <h3>Initial Web Development includes the languages:</h3>
      <ol>
          <li>HTML</li>
          <li>CSS</li>
      </ol>
  </body>
</html>

Unordered List

An unordered list is a list of items in which each item is marked with a symbol. Unordered list is also known as unnumbered list.

<ul> tag creates an unordered list and <li> tag is used with each item in the list.

Example

<!doctype html>  
<html>
    <head> 
        <title>Unordered List</title> 
    </head>
  
    <body> 
        <h3>Initial Web Development includes the languages:</h3>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </body>
</html>


HTML
Links

Links are a significant part of HTML, which are used to define a relationship between two resources on the web. In general, these links, jointly with browsers’ functionalities, enable users to move from one document to another in a direct way.

There are two major ways of performing Links in HTML.

  1. The ‘a’ Element / Hyperlink / Anchor Text
  2. The Link Element / Link Tag

HTML
Line Break

<Line Break> tag provides an additional structure to HTML document. It is used to group and apply styles to inline elements.

Line Break Example

Below example will demonstrate the basic architecture of HTML Line Break.

<!doctype html>  
<html>
 
    <head> 
        <title>Line Break</title> 
    </head>
  
    <body> 
        Section One. <br>
        Section Two
    </body>

</html>