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.
- Course Introduction
- Introducing HTML
- 2a. Introducing XHTML
- 2b. Introducing HTML5
- Basic page structure
- Formatting page content
- Structuring content
- List - Creating Lists
- Link - Creating Links
- Table - Working with Table
- Form - Dealing with Forms
- HTML Layout
- What's the next step?
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- HTML is an acronym that stands for
HyperText Markup Languagewhich 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 ie. document
- HTML is an acronym that stands for
-
CSS (Cascading Style Sheet) - Style Sheet language, page design / presentation / layouts / styling / formattings, look and feel, creative part of web pages
- CSS is a stylesheet language that allows you to control the appearance (look and feel) of your webpages
-
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
- JavaScript is a `scripting language of the web that allows you to do interactivity with the user, implement conditions and validations, dynamic updates in a web page, etc.
Syntax & Example:
<html>
<head>
<title>02.01.intro.html</title>
</head>
<body>
<h1>This is Intro HTML file</h1>
This line will displayed on browser / web page.
</body>
</html>- 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 languagerather than a programming language - HTML describes the structure of Web pages using
markup - HTML
elements/tagsare 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> = tableetc..
- HTML is an acronym that stands for
HyperText Markup Languagewhich is used for creatingweb 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.
- HyperText simply means
- 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.
- A markup language is a computer language that is used to
- 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.
- Hyper Text:
- Text Editor/HTML Editor -
NotePad, NotePad++, SublimeText, Atom, Brackets, Coda, Visual Studio Code, DreamWeaveretc.- 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.
- Browsers To view output of .html pages -
Google Chrome, Mozilla Firefox, Internet Explorer, Safarietc.- Once the .html/.htm file is created and saved, we can see its output in any latest web browser.
Syntax & Example:
<!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>- HTML tags are like keywords which defines that how web browser will format and display the content
<p>, <h1>, <table>, <strong> - HTML is a markup language and makes use of various tags to format the content
- Tags are enclosed within angle braces
<Tag> - Except few tags, most of the tags have their corresponding closing tags.
<Tag> </Tag> , <Tag />, <p> </p>, <h1> </h1>, <br />, <hr /> <link /> - When a web browser reads an HTML document, browser reads it from top to bottom and left to right
- HTML tags are used to create HTML documents and render their properties
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>- HTML attributes are special words that
provide additional information about the elementsor attributes are the modifier of the HTML element - Each element or tag can have attributes, which defines the
characteristics/behaviorof that element - Attributes should always be applied with start-tag
- All attributes are made up of two parts − a name and a value, Attributes usually come in name/value pairs like
name="value" - Attribute names and attribute values are case-insensitive
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>- An HTML file is made of elements
- Elements are responsible for creating web pages and define content in that webpage
- An element in HTML usually consist of a
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>- HTML Syntax is very simple easy to learn
- HTML Contents/Documents ie files are nothing but a simple text files only with
.htmor.htmlextention - HTML page consists of
DTD & TAGSfor different visual aspects - HTML uses
TAGSto markup and identify page content <start_tag> Some content here </end_tag>Example:<p> p is paragraph tag used to create paragraphics text.</p>- An HTML Element =
<tag attribute="attribute value"> content: whole together is an element </tag > - We can create contents with
nested elementslike<tag1><tag2>Some Content </tag2></tag1>Example:<p><strong>I am bold paragraphic text</strong></p>
- Informative Attribute - gives extra information about an element. Example: lang="en", class="header", id="container1"
- Functional Attribute - very important who perform some activities. Example: href="index.html", src="script.js"
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)
- W3C (World Wide Web Consortium)
- WHATWG (Web Hypertext Application Technology Working Group)
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:
- https://www.w3.org/TR/html53/
- https://www.w3.org/TR/2010/WD-html5-20100624/
- https://html.spec.whatwg.org/multipage/
- https://webplatform.github.io/docs/html/
- https://developer.mozilla.org/en-US/
- Any modern Text Editor can work (Not a word editor)
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:
- auto-text
- auto type of code
- Indentation style
- syntax highlighting,
- auto code completion (Intelligent code completion)
- Spell checker
- autosave
- live preview etc.
The web development world has two types of HTML editing programs:
-
Text-based HTML editor
- Text editors are more often used for writing code
- Developer Prefers
- It is better to have little programming to knowledge to type code
- Initially, more coding needed
- Example: Adobe Brackets, SublimeText, Atom, Notepad, Notepad++
-
Visual WYSIWYG, wizzy-wig OR What You See Is What You Get editor
- Visual editors tend to be used for quick content creation, editing, and styling
- Designer Prefers
- Programming knowledge is not required, anyone can create web content/web pages
- Faster so helps to publish content at high speed
- Example: Adobe DreamWeaver, WordPress 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.
- XHTML stands for Extensible Hypertext Markup Language
- XHTML is almost identical/similar/same as HTML but it is more important to create your code correctly, because XHTML is stricter than HTML in syntax and case sensitivity
- XHTML is introduced to set Browser Compatibility and display similar O/P in various browsers as per Web 2.0 standards. Also to create and follow stricter/standard/well-formed code standards
- XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000
- XHTML is HTML redesigned as XML. It helps you to create better formatted code on your site
There are some changes in XHTML as compared to HTML. These changes can be categorized in below parts (The Most Important Differences from HTML):
- Changes in Document Structure
- All documents must have a DOCTYPE (XHTML DOCTYPE is mandatory)
- Changes in XHTML Tags (XHTML Elements)
- XHTML documents must have one root element
- XHTML elements must always be closed/properly nested
- XHTML elements must be in lowercase
- Changes in XHTML Attributes
- All XHTML attributes must be quoted and added properly
Syntax & Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>xhtml document</title>
</head>
<body>
some xhtml content
</body>
</html>HTML5 is the next generation of HTML.
Before learning HTML5, you must have a basic knowledge of HTML, XHTML, CSS.
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).
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)
- HTML5 Semantic elements:
<header>, <footer>, <nav>, <section>, <article>, <aside> - Graphic elements:
<svg>, <canvas> - Multimedia/Interactive elements:
<audio>, <video>
- New Form 2.0 attributes: number, date, time, calendar, color, file, range
- HTML Geolocation
- HTML Local Storage
- HTML Application Cache
- HTML Drag and Drop
- HTML Web Workers
Syntax & Example:
<!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:
- Open any existing .html file in the browser, in our case open
structure.html - Check the page source or Inspect page with Debugger utilities like:
FireBug, Inspect/ Inspect Element(in browser -> Right Click on page -> choose Inspect Element -> Check/observe actual HTML code/tags).
- First line of an HTML document -
!DOCTYPE html - It instructs Browsers/User Agents which version of html used for rendering
- All external references in the form of styles, scripts, and third-party plug-ins themes, etc.
- Also consists of additional instructions on how the document will render on different devices
- HEAD section contains non-visible instructions, non-visual elements
- All page contents which are visible on the page in the browser
- Body section consists of visible instructions, visual elements
- Example: paragraph, images, list, tables, links, etc.
- Usually the first line of an HTML page, its an instruction to the web browser about what version of HTML the page is written and rules to parse/render.
- Browsers use a DOCTYPE at the beginning of the document to decide whether to handle it in quirks mode (non-standard behavior in the browser)or standards mode (supports all behavior).
- The <!DOCTYPE> declaration is not case sensitive.
- Different Doctype Declarations:
| 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:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>page title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head><BODY> section/element contains all contents visible in browser window/ on web page.
Syntax & Example:
<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- Block Level elements -
- Block level element own next line, always shows output on next line
- Block level element starts on a new line, and create a line break before and after the element
- Example Tags:
<p>, <div>, <form>, <header>, <nav>, <ul>, <li>, and <h1>
- In-line elements -
- Inline elements are comes in flow of document, content shown in same line
- Inline elements displays output in same line, it only take up the amount of space the content occupies
- Example Tags:
<a>, <span>, <strong>, <em>, <u>, <b>, <i> <font>, <center>
- Block Level elements -
Closing- Container Tags / Paired Tags -
- Container Tags usually travel in pairs
- A container tag is one which has to be closed
- Example Tags:
<html>, <head>, <title>, <body>, <p>, <h1> to <h6>, <strong>
- Stand-alone / Unclosed Tags / Empty Tags / Non-Container Tags -
- A few tags are don't contains any content - they are stand alone.
- Some HTML tags are not closed with end tag, they start and close at the same place
- Example Tags:
<br />, <hr />, <link /> <img />
- Container Tags / Paired Tags -
Content Models / Tag Content Modeldefines the type of content expected inside an element, and also control syntax rules such as element structure/nesting (DOM)- Website:
- other tag types are:
- phrasing content :
<canvas>, <code>, <data>, <label>, <mark> - interactive content :
<a>, <button>, <select>, <textarea>, <audio>, <video>, <menu> - metadata content :
<title>, <link>, <script>, <noscript>, <meta> - sectioning content :
<header>, <footer>, <nav>, <section>, <article>, <aside> - heading content :
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup> - embedded content :
<audio>, <canvas>, <embed>, <img>, <video>, <math> - flow content :
<address>, <article>, <aside>, <table>, <template>
- phrasing content :
- HTML Formatting is a process of formatting text for better look and feel, visibility
- Formatting elements were designed to display special types of text without using CSS
| 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 |
- Headings are used to structure pages and determine content hierarchy.
- Headings/Heading Sectioning Elements are defined with the
<h1> to <h6>tags. <h1>defines the most important/largest/biggest heading.<h6>defines the least important/smallest heading.
- The HTML
<p>element represent/defines a paragraph - Paragraphs are block-level elements (always goes to next line), and will automatically close if another block-level element is parsed before the closing
</p>tag. - Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or the first-line indentation
- We use
<br />in case we want a line break (a new line) without starting a new paragraph - Sometimes we need to have Hard-Return in our content (poems, quotes) without starting a new paragraph, there line break
<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- For Screen Readers or Accessibility purpose
<strong> & <em>semantic tags are playing an important role
- HTML Entity represents special characters like &, copyright sign, a registered sign
- Entities are frequently used to display reserved characters
- Also, we can use Entities in place of other characters that are not available on the keyboard/difficult to type with a standard keyboard
- Entity always start with & ampersand sign and ends with; semicolon (Example: <)
- https://dev.w3.org/html5/html-author/charref
Note: 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 | ™ |
™ |
- By default, browsers ignore the white spaces inserted in content after 1st space
non-breaking space entity is used to insert extra white space
Note: Default only 1 space is identified/rendered by the browser Note: Many browsers blocks
entity considering junk/spam, advisable to use CSS and apply margin/padding accordingly
- BMP (Bitmap)
- GIF (Graphics Interchange Format)
- JPEG / JPG (Joint Photographic Experts Group)
- PNG (Portable Network Graphic)
- SVG (Scalable Vector Graphics)
- Images are one of the most important and integral parts of a web page used to improve the design and the appearance of a web page
- In HTML, images are embedded/defined/imported/placed with the
<img>tag. - The
srcattribute is required, it specifies/contains the path (the URL/web address) of the image you want to embed - The
altattribute contains/provides/describe the image a textual description (alternate text) of the image, isn't mandatory but is incredibly useful for accessibility (screen readers) - The
<img>tag is a standalone/empty tag, it contains attributes only, and does not have a closing tag.
- Fonts play a very important role in making a website more user-friendly and increasing content readability
- HTML
<font>tag is used to define the font style for the text contained within it - The font tag is having three attributes called
face, size, and color - The
<font>tag defines/specifies the font face, font size, and color of the text
- HTML allows us to structure the document as per the meaning of the content
- Div, Table tags are used to create structure, layout but its not semantic
- HTML Semantic Tags - Structure of the webpage to show meaning, not just layout
- HTML Semantic Structural/Sectioning Elements helps to create pages more readable, accessible, better search engine results-oriented, easy to modify/update
- A semantic element clearly describes its meaning to both the browser and the developer
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 |
- Earlier with HTML, developers used/created their own id/class names to style elements like header, footer, top nav, bottom nav, main menu, nav - navigation, main left right top bottom container, content, left article, right-sidebar, etc.
- This made it difficult and impossible for search engines to identify the correct web page content also a developer to the browser and edit content
- With the new HTML5 semantic/meaningful elements like (
<header> <footer> <nav> <section> <article> <aside>), this will become easier - HTML5 semantic/meaningful elements make pages more readable for machines as well users with accessibility, search engine results, more consistent and easier to use, and style
-
According 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:
- Preferably you should just
use a single <h1> per page— this is the top-level heading, and all others sit below this in the hierarchy. - Make sure you use the headings in the correct order in the hierarchy. Don't use
<h3>sto represent subheadings, followed by<h2>sto represent subheadings — that doesn't make sense and will lead to weird results.
- Users looking at a web page tend to scan quickly to find relevant content. If they can't see anything useful within a few seconds, they'll likely get frustrated and go somewhere else.
- Search engines indexing your page consider the contents of headings as important keywords for influencing the page's search rankings. Without headings, your page will perform poorly in terms of
SEO (Search Engine Optimization). - Visually impaired people often don't read web pages; they listen to them instead. If headings are not available, they will be forced to listen to the whole document read out loud.
- The div tag is known as
Division, Divider tag - The HTML Content Division element (
<div>) is the generic container for flow content - Before HTML5 Semantic Tags, the Div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc)
- The
<div>tag is an empty container tag, which defines a division or a section by specifying child elements - With HTML5 Semantic Tags, Div a powerful tag also used for structuring, dividing, Layout, Sectioning page/content with CSS or manipulated with scripts
- The
<div>tag is a block-level element, so a line break is placed before and after it - The Div is the most usable tag in web development because it helps us to separate data in the web page and we can create a particular section
- It is used to the group of various tags of HTML so that sections can be created and style can be applied to them
- HTML uses Semantic Elements, Headings, Semantic Tags to generate/describe the Document Outline of page content (Document Outline = Topics, Table of Contents, Index)
- Document Outline is used by devices/browsers to scan & search content, navigate to a particular/specific section, also to determine how contents relate to each other
- HTML5 Outliner is used to understand & know the exact outline ie page structure of the HTML page/document
- Use outliner utility: https://gsnedders.html5.org/outliner/
- Text Editor like Brackets uses a
Document Outliner Plugin/extensionto show proper document outline/table of contents/topics/Indexing of page - Brackets -> View menu -> Show Document Outline
- HTML lists are used to specify lists of information (bulleted/unordered or numbered/ordered content)
- HTML list is an incredible/useful way to represent organized content
HTML offers three types/ways for specifying lists of information. All lists must contain one or more list elements
| 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 |
- An Unordered List is a collection of related items that have no special order or sequence
- Unordered List is created by using HTML
<ul>tag. Each item in the list<li>is marked with a bullet/rendered as a bulleted list <li>List Item,typeattribute helps to specify the type of bulletdisc/circle/square/none
- The HTML
<ol>element represents an ordered list of items, typically rendered as a numbered list - Ordered List is created by using HTML
<ol>tag. Each item in the list<li>is marked with a number or an order in ascending/descending <li>List Item,typeattribute helps to specify the type of order1/A/a/I/i
- Description List or Definition List represents entries list like in a dictionary or encyclopedia
- Description List or Definition List is the ideal way to present a glossary, list of terms, or another name/value list
- A description list is a list of terms, with a description of each term
- The
<dl>tag defines the description list, the<dt>tag defines the term (name), and the<dd>tag describes each term
- A webpage can contain various links/hyperlinks that take you directly to other pages and even specific parts of a given page
- Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images.
- A link is specified using HTML tag
<a>, also is calledanchor tag - The HTML
<a>(anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL. - The
hrefattribute is the most important attribute which specifies links to destination page or URLhref="url path" targetattribute Specifies where to display the linked URL.target="_blank"titleattribute makes the anchor links more accessible, semantic, meanigful,title="Click to visit"relattribute 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:
<a href="./07.01.link.anchor.html"title="visit links" >Links example 1</a> <br/> <br/>
<a href="../08. Working with Table/08.01.table.basic.html"title="Click to visit Table" >Table example 1</a> <br/>- Ability to download some file or resource
Syntax & Example:
<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"- #Anchors helps to jump to a specific section of current (within)/other linked URL/file
- Need to Define and linked to the ID of the specific element
- The HTML tables allow arranging data like text, images, links, into rows and columns of cells
- In HTML
<table>tag is used structure data in tabular form - HTML table tag display data in tabular form (row * column). There can be many columns in a row
- We can create a table to display data in tabular form, using
<table>element, with the help of<tr> , <td>, and <th>elements - Table row is defined by
<tr>tag, the table header is defined by<th>, and table data cells is defined by<td> - HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section, etc.
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:
<table>
<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>
</table>- 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 thetypeattribute
Syntax & Example:
<form name="enrollmentForm" action="#" method="post">
<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</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<center>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset" />
</center>
</td>
</tr>
</table>
</form>- Web page layout is an essential part of creating well-formed, well-structured, semantically rich websites
- A well-designed, colorful, and neat HTML page helps to establish a good user experience
- Creating a website layout is the activity of positioning the various elements that make a web page in a well-structured manner and give an appealing look to the website
- Creating an HTML Web layout is not difficult at all. All you need to know are a few tags that help in constructing an eye-catching design for a new website
- Advanced website layouts can be achieved using a combination of HTML and CSS
- Most modern websites and blogs consist of an HTML5 Semantic tag-based layout like header, footer, navbar, perhaps another sidebar, the main content area
- HTML has several elements that can be used to define each of these areas. These include the main, header, footer, nav, aside, and article elements.
- Also, the div element is a generic block-level element that can be used for grouping HTML elements to create Web layout
There are different ways to create multicolumn layouts. Each way/layout technique has its pros and cons:
- HTML Layout using Tables
(not recommended)- Use Table, tr, td tag to create a whole layout
- Table-based layouts are not at all flexible and difficult to manage and modify
- Layouts using Div and Span
(CSS float property)- You can use
Div - the block level elementto create a complete web layout with CSSfloatproperty - It is a common and widely used technique to create entire web layouts using the CSS float property (float - helps to align block-level elements)
- Floating elements are tied to the document flow, which may harm the flexibility, and sometimes it's difficult to manage the whole layout
- You can use
- HTML5 Semantic Tags based Layout
(CSS float property)- You can use HTML5 semantic tags like main, header, nav, section, article, aside, footer, etc. to create a fully functional web layout
- It is a common and widely used technique to create entire web layouts using the CSS float property (float - helps to align block-level elements)
- CSS flexbox Layout
- Flexbox is a new layout mode in CSS3
- CSS framework
- Create layout faster and quicker by using a framework like Bootstrap,W3.CSS or so
- CSS grid Layout
- The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
- The CSS grid layout is a new layout model optimized for two-dimensional layouts.
- It's ideal for website layouts, forms, image galleries, and anything that requires precise and responsive positioning.
- The purpose of the
<table>element is to display tabular data - The simplest and most popular way of creating layouts is using HTML
<table>tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like. - The
<table>element was not designed to be a layout tool! Before the introduction to Div tag, web designers/developers use to follow table-based layout
Note: Do not use tables for your page layout! They will make code length, tedious and brings a mess into your code
Brilliant job! You have done it! Thank You for looking into HTML5 Essentials/Fundamentals. I hope now you have better understandings of how HTML5 works. To learn more about HTML5 specifications visit Latest HTML5 specifications and https://html.spec.whatwg.org/. Your next step could be Mastering HTML5 Advanced features or look into designing & styling with CSS3 fundamentals. Best of Luck! Happy Learning!