HTML 5
_
Introduction
HTML stands for Hyper Text Markup Language. HTML Code
describes the Content & Structure of the Web Page and tells the
Web Browser how to display it on different devices.
Basic Structure of HTML Code
<doctype>
<html>
<head>
Meta Data
</head>
<body>
Page Content
</body>
</html>
-
Defines HTML Version
HTML Code Start
Head Start
Data about the Data
Head End
Body Start
Body End
HTML Code End
HTML Elements
The HTML code is made up of HTML Elements. They are used to
describe the web page's structure and are usually made up of two
tags: an opening tag and a closing tag. Each HTML element tells the
web browser something about the content between its tags.
HTML elements can be Nested. This means that elements can
contain other elements.
Empty HTML Elements
HTML elements with no content are called empty elements. They
don’t have a closing tag.
HTML Tags
They are characters or keywords surrounded by angle brackets. The
closing tag has an extra forward slash in it.
<tag>
</tag>
<tag />
-
Opening Tag
Closing Tag
Empty Element
Document Type Declaration (DTD)
All HTML documents must start with a DTD, which is not an HTML
element. DTD tells the Web Browser about the version of HTML we
are using. In HTML 5, the declaration is simple: <!DOCTYPE html>
HTML Attributes
Attributes describe features of an element, and are made up of two
parts: name and value, separated by an equals sign (=). They should
always specified in the opening tag of the element. Multiple
attributes can be separated by blank space.
The name indicates what kind of information you are specifying
about the element's content. It should be written in lowercase. The
value is the information for the attribute and should be placed in
double quotes.
For Normal HTML Element:
<tag name=”value” name2=”value2”>CONTENT</tag>
For Empty Element:
<tag name=”value” name2=”value2” />
Ravi Chaitanya Yalamala
URLs in HTML
URL stands for Uniform Resource Locator. A URL is the address of a
particular resource (file). Such resource can be HTML File, CSS File,
JavaScript File, Image etc.
There are two ways to specify the URL in the HTML:
1. Absolute URL
Links to an external resource that is already hosted on the Web.
2. Relative URL
Links to a resource within the Website. Generally, it will be on
our Computer only. It’s better to save all those files we use on
the website in a folder and its subfolders. That folder is called
as Root Folder.
HTML File Paths
File Path describes the location of a file in a website's root folder
structure. It’s used for linking to a Relative URL. In the examples, we
use the SRC attribute name to link to the file called sample.png
File Path Examples in different cases:
1. <tag src=”sample.png”>
When the file is located in the same folder as the page
2. <tag src=”folder/sample.png”>
When the file is located in another folder in the current folder
3. <tag src=”../sample.png”>
When the file is located in a folder one-level-up from the current
folder
Note: We can use like folder/folder or ../.. when there are multiple
levels.
<html> Element
The <html> element is the container for all other elements. We can
include the lang attribute with it to declare the language of the web
page, to assist search engines & web browsers. Ex: <html lang=”en”>
<head> Element
The <head> element is a container for metadata (data about data)
and is placed above the <body> element. The following elements can
be placed inside the <head> element:
●
<title>
●
<meta>
●
<style>
●
<script>
●
<link>
<title> Element
The <title> tag defines the Title of the Document, and it is shown in
the browser's title bar or in the page's tab. It is required in all HTML
documents. Ex: <title>Title of the Document</title>
<meta> Element
Metadata is data about the HTML document and is not displayed.
We use various attributes to describe different kinds of metadata.
●
To Describe Charset (Default is UTF-8):
<meta charset=”UTF-8” />
●
To Describe Document’s Description:
<meta name=”description” content=”Type the Description” />
●
To Describe Document’s Keywords (Max 15 words):
<meta name=”keywords” content=”word1, word2, word3” />
●
To Describe Document’s Author:
<meta name=”author” content=”Developer / Company Name” />
●
To Refresh Page Automatically:
<meta http-equiv="refresh" content="30" />
●
To Make Document Responsive:
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
|1
<style> Element
The <style> element is used to define internal CSS for a document.
<style>
CSS Code Here
</style>
<script> Element
The <script> element is used to embed JavaScript.
<script>
JavaScript Code Here
</script>
<link> Element
The <link> element defines the relationship between the current
document and an external resource.
<link rel="Relationship" href="Path to the External Resource">
<body> Element
The <body> element contains all the content of an HTML document.
It supports Global Attributes and Event Attributes.
Types of HTML Attributes
1. Data Attributes
They are specific to particular elements and not specific to the
HTML version.
2. Global Attributes
The Global Attributes can be used with all HTML elements.
3. Event Attributes
HTML can let events trigger actions in a browser when a
particular event takes place (Ex: A user clicks on an element).
The Event Attributes can be added to HTML elements to define
event actions.
HTML Comments
Comments in HTML are not displayed in the browser, but they can be
used as Notes for other programmers who read our code. We can
add HTML Comments anywhere in the <body> element like below:
<!-- Write your comments here -->
HTML Comments can also be used to hide content temporarily from
the Browser.
HTML Element Types by Display Property
We can separate HTML Elements into two types by their default
display properties.
1. Block-Level Elements
A block-level element always starts on a new line, and the
browser automatically adds some margin before and after the
element. That always takes up the full width available.
2. Inline Elements
An inline element does not start on a new line and that only
takes up as much width as necessary.
Note:
A block-level element can contain an inline element but an inline
element cannot contain a block-level element. The default display
property of an HTML element can be changed by the CSS.
Box Model
In this model, all HTML elements are considered as boxes. You can
imagine that every kind of content will be placed in a box, and all
those boxes are situated in a BIG BOX. We generally use <div>
element to define a box.
Note:
Even though this concept is generally taught with CSS, it’s better to
learn along with HTML.
Ravi Chaitanya Yalamala
HTML Element Types by The Meaning of Their Names
We can separate HTML Elements into two types by the meaning of
their names.
1. Non-Semantic Elements
Names of the Non-Semantic Elements tell nothing about their
content. In other words, we can’t understand or guess the type
of content by the container element’s name.
Ex: <div>, <span> etc.
2. Semantic Elements
Names of the Semantic Elements tell exactly what type of
content they contain. In other words, we can accurately
understand or guess the type of the content by the container
element’s name.
Ex: <p>, <img> etc.
There are a few new Semantic Elements introduced with HTML 5, to
use instead of the <div> element in the box model. Here are a few of
them:
1. <header>
The <header> element represents a container for the TOP
MOST SECTION of the web page, generally containing the
Name/Logo of the Organization or Person.
2. <nav>
The <nav> element represents a container for a set of
navigation links. Note that all links of a web page needn’t to be
inside the <nav> element.
3. <main>
The <main> element is used to specify the main content of the
web page. It should be unique to the page and there shouldn’t
be more than one <main> element. Importantly, it shouldn’t be
inside of an <article>, <aside>, <footer>, <header> or <nav>
element..
4. <section> and <article>
These <section> and <article> elements are used to define a
section in a web page. We can use them both interchangeably
and can contain each other.
5. <aside>
The <aside> element is used to specify the content aside from
the primary content. It is often placed as a sidebar on a web
page.
Note: The <aside> element doesn’t put the content as a sidebar
automatically. It is just the name as it is a Semantic Element.
However, we can use the CSS to style the element.
6. <footer>
The <footer> element represents a container for the BOTTOM
MOST SECTION of the web page. Typically it contains info on
the Author, Copyright, Contact etc. We can have multiple
<footer> elements on a web page.
HTML Headings
HTML headings are titles or subtitles that we want to display on a
web page. They are defined with the <h1> to <h6> elements, with
<h1> defining the most important heading and <h6> defining the
least important subheading. It’s important to use HTML Headings as
Search engines use them to index the structure and content of our
web page.
Note: If we want BIGGER HEADING than <h1>, we can specify the
size with CSS later.
HTML Paragraphs
The <p> element defines a paragraph. A paragraph always starts on
a new line.
Note: If we want a new line without starting a new paragraph, we can
use <br /> element for a Line Break.
|2
0
