A HTML5 tutorials for beginners, An introduction to HTML5 building blocks, step-by-step guide to HTML5
HTML is the language that powers the web. With HTML you can create your web pages/website. This course provides an in-depth look at the essentials: the syntax of HTML and best practices for writing and editing your code. Will learn HTML, Document structure, block and inline-level tags, floating images, controlling white space, phrase and font markup, list, links, and tables.
There are no prerequisites as such for current courses/lessons. It’s an added advantage if you know basic concepts like Web, Internet, web page, URL, images, etc. It’s advisable to view Web Design Development Foundations-Web Technology Fundamentals before dive deeper into HTML5 content.
Hi All, I’m Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional, I wanna welcome you to HTML5 Essentials. This course will take an in-depth look at HTML/HTML5, will learn Syntax and Semantics of HTML. Will also focus on best practices to implement while writing and editing HTML. Here will start by learning what is HTML, Basic HTML Document/Page structure, How to write and format page content, creating a list, link, table, and many more things.
HTML (HyperText Markup Language) - Markup language, essential page structure/content, readable and convey structure to the user, text layout model, page mark-up, text, tags, data, details for pages, images, tables, anchor links, forms
HyperText Markup Language which is used for creating `web pages and web applicationsCSS (Cascading Style Sheet) - Style Sheet language, page design / presentation / layouts / styling / formattings, look and feel, creative part of web pages
JavaScript (JS) - Scripting language, dynamic page behavior, logics, conditions and validations, events (mouse click, hover), interactivity with the user/events, dynamic updates in a web page
Syntax & Example:
```html
### 2.2. HTML (HyperText Markup Language)- HTML stands for `HyperText Markup Language`- The Standard/foundation/gateway/most widely used language used for developing/creating/structuring content on the web- We can create a static website by HTML only- Technically, HTML is a `Markup language` rather than a programming language- HTML describes the structure of Web pages using `markup`- HTML `elements/tags` are the building blocks of HTML pages, which represented by `<tag>content</tag>`- NO HTML = NO WEB PAGE :)- HyperText Markup Language, used to MARK the content what exactly it is ie `<p> = Paragraph, <header> = Header, <table> = table` etc..### 2.3. What is HTML?- HTML is an acronym that stands for `HyperText Markup Language` which is used for creating `web pages and web applications`.- HTML is not a programming language; it is a markup language that defines the structure of your content- **Hyper Text**:- HyperText simply means `"Text within Text."` A text that has a link within it, is a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each other.- Hypertext refers to the way in which/how `Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext.- **Markup language**:- A markup language is a computer language that is used to `apply layout and formatting conventions to a text document`. Markup language makes the text more interactive and dynamic. It can turn text into images, tables, links, lists, headings, etc.- HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display.- **Web Page**:- A web page is a document that is commonly written in HTML and translated by a web browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic type. With the help of HTML only, we can create static web pages.### 2.4. Prerequisites of using HTML (HyperText Markup Language)#### Tools for building web sites-web pages/writing HTML1. **Text Editor/HTML Editor** - `NotePad, NotePad++, SublimeText, Atom, Brackets, Coda, Visual Studio Code, DreamWeaver` etc.- An HTML file (.html / .htm) is a text file itself consists of HTML tags/elements, so to create/modify an HTML file we can use any text editors.2. **Browsers To view output of .html pages** - `Google Chrome, Mozilla Firefox, Internet Explorer, Safari` etc.- Once the .html/.htm file is created and saved, we can see its output in any latest web browser.<p><figure><img src="./_examples-html5-essentials/assets/images/browers_all_2.png" alt="Widely used modern browsers image" title="Widely used modern browsers" width="400" border="2" /><figcaption> Image - Widely used modern browsers</figcaption></figure></p>### 2.5. Basic HTML Document> **Syntax & Example**:```html<!DOCTYPE html><html><head><title>02.05.basic.html</title></head><body><h1>Heading: Welcome Welcome to HTML</h1><p>Paragraph: This is my first HTML page</p><li>Bullet List Item</li> <br /><button>Click me</button></body></html>
An HTML document consist of its basic building blocks:
| Name / Item | Description |
|---|---|
| Tags | An HTML tag surrounds the content and applies meaning to it. It is written between < and > brackets. |
| Attribute | An attribute in HTML provides extra information about the element, and it is applied within the start tag. An HTML attribute contains two fields: name & value / key & value |
| Elements | An HTML element is an individual component of an HTML file. In an HTML file, everything written within tags is termed as HTML elements |
Syntax & Example:
<tag attribute="attribute value"> content: whole together is an element </tag >Syntax & Example:
<h1 align="right">Heading 1 aligned to right </h1>
<p>, <h1>, <table>, <strong><Tag><Tag> </Tag> , <Tag ></Tag>, <p> </p>, <h1> </h1>, <br />, <hr /> <link />Syntax & Example:
<tag> content </tag >Syntax & Example:
<h1>HTML Tags: Various tags used to develope web page.</h1><h3>Heading: Welcome Welcome to HTML</h3><p>Paragraph: This is my first HTML page</p><hr /> Horizontal Rules<br /> Line Break<strong> Bold Strong Text </strong><li> list item bulletted list </li>
provide additional information about the elements or attributes are the modifier of the HTML elementcharacteristics/behavior of that elementname="value"Syntax & Example:
<tag attribute="attribute value"> content </tag >Syntax & Example:
<h1 class="headings" id="heading1"> Heading 1 </h1 ><p align="right"> Paragraphic text </p><hr size="20" width="500"/> Horizontal Rules<br /> Line Break<strong style="color:red;"> Bold Strong Text </strong><center><h2 title="Title attribute: Heading 2">Heading 2: Hover Me</h2></center>
start tag <tagName>, close tag </tagName> and content inserted between them Syntax & Example:
<tag attribute="attribute value"> content: whole together is an element </tag >Syntax & Example:
<h1 align="right">Heading 1 aligned to right </h1>
.htm or .html extentionDTD & TAGS for different visual aspectsTAGS to markup and identify page content<start_tag> Some content here </end_tag> Example: <p> p is paragraph tag used to create paragraphics text.</p><tag attribute="attribute value"> content: whole together is an element </tag > nested elements like <tag1><tag2>Some Content </tag2></tag1> Example: <p><strong>I am bold paragraphic text</strong></p>The Web is changing very fast and so HTML
| Year | History |
|---|---|
| 1990 | Specification Drafted in Mid 90s by Tim Berners Lee |
| 1991 | Tim Berners Lee published document called “HTML Tags” |
| 1995 | HTML 2.0 (‘standard’ HTML) |
| 1997 | HTML 3.2 (proprietary browser companies developed many features) |
| 1999 | HTML 4.0 W3C Web standards support |
| 2000 | XHTML 1.0 (HTML move towards XML)-Extensible Markup Language |
| 2001 | 2009 - XHTML 2.0 |
| 2004 | WHATWG formed (Web HyperText Application Technology Working Group, they continued with development of HTML 5.0) |
| 2007 | 2008 - W3C adopts WHATWG’s HTML5 Web Application 1.0 specification and drafts |
| 2009 | XHTML 2.0 drops/stops |
| 2014 | W3C Recommendation: HTML5 |
There are two specifications of HTML: (Not much changes with syntax)
There is no good reason not to learn the HTML5 syntax. Focus on learning the elements and syntax first. Gradually learn the new capabilities in HTML5, once you become comfortable with writing clean HTML.
Some important and valuable references / resorces:
Note: A good code/HTML/text editor can speed up the process of writing and editing code, also highlights syntax errors.
Code/HTML/Text Editor Features: The latest text editors must-have features like:
The web development world has two types of HTML editing programs:
Text-based HTML editor
Visual WYSIWYG, wizzy-wig OR What You See Is What You Get editor
XHTML is HTML written/defined as an XML application. XHTML stands for Extensible Hypertext Markup Language.
Before learning XHTML, you must have a basic knowledge of HTML.
There are some changes in XHTML as compared to HTML. These changes can be categorized in below parts (The Most Important Differences from HTML):
Syntax & Example:
```html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head><title>xhtml document</title></head><body>some xhtml content</body>
Section 2b. Introducing HTML5=====================HTML5 is the next generation of HTML.#### PrerequisiteBefore learning HTML5, you must have a basic knowledge of HTML, XHTML, CSS.### 2b.1. What is HTML5?HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages. HTML5 is a co-operation of W3C (World Wide Web Consortium) and WHATWG(Web Hypertext Application Technology Working Group).### 2b.2. Why HTML5?There are many features related to DTD, Tags, Elements, attributes, APIs introduced in HTML:- It allows you to play a video and audio file- It facilitates you to design better forms (form 2.0)- Reduce the usage of the external plugin (Features added in the browser so that no need to use external plugins like SWF player, java applets or so)#### New HTML5 Tags/Elements- HTML5 Semantic elements: `<header>, <footer>, <nav>, <section>, <article>, <aside>`- Graphic elements: `<svg>, <canvas>`- Multimedia/Interactive elements: `<audio>, <video>`#### New HTML5 Form attributes- New Form 2.0 attributes: number, date, time, calendar, color, file, range#### New HTML5 API's (Application Programming Interfaces)- HTML Geolocation- HTML Local Storage- HTML Application Cache- HTML Drag and Drop- HTML Web Workers### 2b.3. HTML5> **Syntax & Example**:```html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML5 document</title></head><body>some HTML5 content</body></html>
Let’s have a look and observe an HTML source code in the browser:
structure.htmlFireBug, Inspect/ Inspect Element (in browser -> Right Click on page -> choose Inspect Element -> Check/observe actual HTML code/tags).!DOCTYPE html| HTML Version | DTD |
|---|---|
| HTML5 | Document Type Declaration (<!DOCTYPE html>) |
| XHTML | Document Type Definition (.DTD file) <!DOC TYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| HTML4 | Document Type Definition (.DTD file) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
<HEAD> section of document contains functional information which is not visible on document.The <head> element contains meta information about the document
Syntax & Example:
```html
### 3.4. Body`<BODY>` section/element contains all contents visible in browser window/ on web page.> **Syntax & Example**:```html<body><h1>Basic HTML Page Structure</h1>Lets have a look and observe different section/parts of HTML page:<ul><li>1. Doctype</li><li>2. HEAD</li><li>3. BODY</li></ul></body>
Tags are divided into different categories based on:
Output<p>, <div>, <form>, <header>, <nav>, <ul>, <li>, and <h1><a>, <span>, <strong>, <em>, <u>, <b>, <i> <font>, <center>Closing<html>, <head>, <title>, <body>, <p>, <h1> to <h6>, <strong><br />, <hr />, <link /> <img />Content Models / Tag Content Model defines the type of content expected inside an element, and also control syntax rules such as element structure/nesting (DOM)<canvas>, <code>, <data>, <label>, <mark> <a>, <button>, <select>, <textarea>, <audio>, <video>, <menu><title>, <link>, <script>, <noscript>, <meta><header>, <footer>, <nav>, <section>, <article>, <aside><h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup><audio>, <canvas>, <embed>, <img>, <video>, <math><address>, <article>, <aside>, <table>, <template>| Tag | Use |
|---|---|
<strong> |
Bold Important text |
<b> |
Bold text |
<em> |
Emphasized text |
<i> |
Italic text |
<u> |
Underline text |
<mark> |
marked or highlighted text: |
<sub> |
Subscript text |
<sup> |
Superscript text |
<big> |
increase font size by one conventional unit |
<small> |
Small text |
<del> |
Deleted text |
<tt> |
monospaced font |
<h1> to <h6>tags.<h1> defines the most important/largest/biggest heading. <h6> defines the least important/smallest heading.<p> element represent/defines a paragraph</p> tag.<br /> in case we want a line break (a new line) without starting a new paragraph<br /> is useful.<br />is a standalone tag, which means we need to start and close at the same place like: <br /><b> bold tag simply means bold text without any extra importance just a presentation<strong> tag have meaning like strongly emphasizing Bold Important text<i> element defines the italic text, without any extra importance<em> element defines the emphasized text, with added semantic importance<strong> & <em> semantic tags are playing an important roleNote: Browsers may not support all entity names
| String/Character | Description / Note | Entity Name | Entity Number |
|---|---|---|---|
| & | and OR ampersign OR ampersand | & |
& |
| non-breaking space | |
|
|
| < | less than | < |
< |
| > | greater than | > |
> |
| ⟨ | left-pointing angle bracket | ⟨ |
〈 |
| ⟩ | right-pointing angle bracket | ⟩ |
〉 |
| € | euro | € |
€ |
| £ | pound | £ |
£ |
| © | copyright | © |
© |
| ® | registered trademark | ® |
® |
| “ | double quotation mark | " |
" |
| TM | Trade Mark sign | ™ |
™ |
non-breaking space entity is used to insert extra white spaceNote: Default only 1 space is identified/rendered by the browser
Note: Many browsers blocksentity considering junk/spam, advisable to use CSS and apply margin/padding accordingly
img tag<img> tag.src attribute is required, it specifies/contains the path (the URL/web address) of the image you want to embedalt attribute contains/provides/describe the image a textual description (alternate text) of the image, isn’t mandatory but is incredibly useful for accessibility (screen readers)<img> tag is a standalone/empty tag, it contains attributes only, and does not have a closing tag.<font> tag is used to define the font style for the text contained within itface, size, and color<font> tag defines/specifies the font face, font size, and color of the text Note: HTML5 semantic elements are supported in all modern browsers.
h1 to h6 (total 6 headings are available)
| Tag | Use |
|---|---|
<main> |
Specifies the main content of a document |
<header> |
Specifies a header for a document or section |
<nav> |
Defines navigation links |
<section> |
Defines a section in a document |
<article> |
Defines an article |
<aside> |
Defines content aside from the page content |
<footer> |
Defines a footer for a document or section |
<header> <footer> <nav> <section> <article> <aside>), this will become easierAccording to the W3C, a Semantic Web: “Allows data to be shared and reused across applications, enterprises, and communities.”
It’s really up to you what exactly the elements involved represent, as long as the hierarchy makes sense. You just need to bear in mind a few best practices as you create such structures:
use a single <h1> per page — this is the top-level heading, and all others sit below this in the hierarchy.<h3>s to represent subheadings, followed by <h2>s to represent subheadings — that doesn’t make sense and will lead to weird results.SEO (Search Engine Optimization).Division, Divider tag<div>) is the generic container for flow content<div> tag is an empty container tag, which defines a division or a section by specifying child elements<div> tag is a block-level element, so a line break is placed before and after itDocument Outliner Plugin/extension to show proper document outline/table of contents/topics/Indexing of page| Tag | Meaning / Use / Description |
|---|---|
<ul> |
An Unordered List or bulleted list. List items using plain bullets |
<ol> |
An Ordered List or numbered list. Uses different schemes of numbers to list your items |
<dl> |
A Description List or Definition List. This arranges your items in the same way as they are arranged in a dictionary, header item, and description |
| Tag | Meaning / Use / Description |
|---|---|
<ul> |
Defines an Unordered List or bulleted list |
<ol> |
Ordered List or numbered list |
<li> |
Defines List Item |
<dl> |
Defines Description List or Definition List |
<dt> |
Defines a term/item/heading in a description list |
<dd> |
Describes the term in a description list |
<ul> tag. Each item in the list <li> is marked with a bullet/rendered as a bulleted list<li> List Item, type attribute helps to specify the type of bullet disc/circle/square/none<ol> element represents an ordered list of items, typically rendered as a numbered list<ol> tag. Each item in the list <li> is marked with a number or an order in ascending/descending<li> List Item, type attribute helps to specify the type of order 1/A/a/I/i<dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term<a><a>, also is called anchor tag<a> (anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.href attribute is the most important attribute which specifies links to destination page or URL href="url path"target attribute Specifies where to display the linked URL. target="_blank"title attribute makes the anchor links more accessible, semantic, meanigful, title="Click to visit"rel attribute describes relationship of current linked object and target object, rel="next/downnload/help/author"Syntax & Example:
<a href="url-path" title="accessible" target="_blank" rel="next/prev/help/download">Content</a>Syntax & Example:
<a href="http://www.google.com" title="Click to visit Google">Visit Google.com</a>
Syntax & Example:
```html
Links example 1
### 7.3 download links- Ability to download some file or resource> **Syntax & Example**:```html<a href="help.pdf" title="download help pdf" download>Download Help PDF</a>replace the name of the file while downloading<a href="_help123.pdf" title="download help pdf" download="html_help">text</a>in this scenario, "_help123.pdf" will be renamed with "html_help.pdf"
<table> tag is used structure data in tabular form<table> element, with the help of <tr> , <td>, and <th> elements<tr> tag, the table header is defined by <th>, and table data cells is defined by <td>Note: But it is recommended to use a div tag over the table to manage the layout of the page
| Tag | Meaning / Use / Description |
|---|---|
<table> |
Defines a table |
<tr> |
Defines a table row |
<td> |
Defines a table cell |
<th> |
Defines a header in table |
<tbody> |
Group the body content in a table |
<thead> |
Group the header content in a table |
<tfoot> |
Group the footer content in a table |
Syntax & Example:
```html
<tr><td>Sr.</td><td>Name</td><td>Address</td><td>Contact Number</td></tr><tr><td>1.</td><td>Dinanath</td><td>India</td><td>91-1234567890</td></tr><tr><td>2.</td><td>Dino</td><td>USA</td><td>1-0987654321</td></tr><tr><td>3.</td><td>Ambar</td><td>UK</td><td>44-01234567890</td></tr><tr><td>4.</td><td>Anthony</td><td>India</td><td>91-0223344556</td></tr>
```Section 9. Dealing with Forms
- HTML forms are a very powerful tool for interacting with user/user data
- HTML Forms are required, when you want to collect some data from the site visitor
- HTML Forms are one of the main points of interaction between a user and a website or application. They allow users to send data to the website
- An HTML form is a section of a document that contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, etc.
- An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc.
- The
<form>tag is used to create an HTML form to take input from a user- The
<input>element is a fundamental form element that creates different form components with thetypeattribute9.1. Creating Basic Form
Syntax & Example:
```html
<table border="1" width="800" cellspacing="5" cellpadding="5"><th colspan="2"><h1>Enrollment Form </h1></th><tr><td>First Name:</td><td><Input type="text" name="firstNameText" id="firstNameText1" /> </td></tr><tr><td>Last Name:</td><td><Input type="text" name="lastNameText" id="lastNameText1" /></td></tr><tr><td>Password:</td><td><Input type="password" name="password" id="password1" /></td></tr><tr><td>Gender:</td><td><input type="radio" name="gender" id="male" value="male" /> Male<input type="radio" name="gender" id="female" value="female" /> Female<input type="radio" name="gender" id="other" value="other" /> Other</td></tr><tr><td>Hobby:</td><td><input type="checkbox" name="reading" id="reading" value="reading" /> Reading<input type="checkbox" name="music" id="music" value="music" /> Music<input type="checkbox" name="dance" id="dance" value="dance" /> Dance<input type="checkbox" name="sports" id="sports" value="sports" /> Sports</td></tr><tr><td>Country:</td><td><select name="country" id="country"><option value="india">India</option><option value="usa">USA</option><option value="uk">UK</option><option value="nz">NZ</option></select></td></tr><tr><td>Comments:</td><td><textarea cols="40" rows="5">Enter Comments