a abbr acronym b bdo big br button cite code dfn em i img input kbd label map object output q samp script select small span strong sub sup textarea time tt var
length Percent Baseline Super Text Top Bottom top sub Text-bottom Middle
<address> < > < > < > < > < > article aside blockquote canvas dd div dl dt fieldset figcaption figure footer form h1-h6 header hr li main nav noscript ol p pre section table tfoot ul video

What is HTML?

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • 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 elements label pieces of content such as "This is a heading", "this is a paragraph", "this is a link", etc.

visualization

<!DOCTYPE html>    declaration defines that this document is an HTML5 document

<html>                            element is the root element of an HTML page
<head>              element contains meta information about the HTML page

<title>            Inside the <head> tags </title>  element contains a title for the HTML page, shown in
                      browser's title bar or in the page' tab.

</head>              Closing tag for the <head> tag
<body>

element defines the document's body, and is a container for all the visitable contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

 

<h1> This element defines a large heading start and stop tag </h1>

<p> This element defines a paragraph start and stop tag.  </p>

<p> This Is another paragraph </p>

 

</body> is the closing tag for <body>

</html> is the closing tag for <html>

HTML Layout Elements

<Header

<nav>

<section>

<article>

 

 

 

<footer>
  • <header> Defines a header for a document or a section
  • <nav> Defines a set of navigation links
  • <section> Defines a section in a document
  • <article> Defines independent, self-contained content
  • <aside> Defines content aside from the content like a sidebar
  • <footer> Defines a footer for a document or a section
  • <details> Defines addition details that the user can open and close on demand
  • <summary> Defines a heading for the <details> element

Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>
Page title
</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>

Explained

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root elemtn 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 will show in the browser's title bar or in the page's tab.
  • The <body> element defines the document's body, is a container for all the visible contents, such as headings, paragraphs, images, heperlinks, tables, lists, etc.
  • The <h1> element defines a large heading.
  • The <p> element defines a paragraph

What is an HTML Element?

  • Defined by a start tag <html>
  • Add some content
      • My very first web page
  • Then you add an end tag </html>

It will look like this in code. <html> My very first web page </html>

This on your page My very first web page