Scribd
Upload
12 views16 pages

What Is HTML

Uploaded by

vihs7777
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views16 pages

What Is HTML

Uploaded by

vihs7777
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

what is Html ?

HTML is a “Hypertext Markup Language”. It is a basic structure of web page.


Hypertext- Text contains links to other text in web pages.
Markup- Markup stands for content.
Language- It is a method to write the code.

<h1> <h1>
<div>Hello world</div> <div>Hello world</h1>
</h1> </div>

correct code wrong code

Technologies that drive the WEB are ➖


1. HTML- It provides Structure to the web page

2. CSS- It provides Style to the Web page.

3. JavaScript- It provides Behavior to the web page.

Basic HTML Document Structure


<html>
<head>
<title>
............
</title>
</head>
<body>
............
</body>
</html>

what is Html ? 1
The DOCTYPE declaration tells the modern browsers that this document is
interpreted in html5 language.

The <html> element is know as the root element since all the elements are
withing this element and most probably it is not within other tags.

The <head> is the tag that contains the links to css and scripts this area also
contains the meta data.

Meta data is the information about the document here it describes the
character
set of the document, meta data can also contain the data such as author
information publishing status and the information that can be used by the
search
engine.

In the head element the main element is the title element it is said that every
html document must contain a title element
the body element contains everything that you want to show up in the
browser.

Good title is also impt since search engines rely on them.

The real purpose of HTML


HTML must be used to give meaning and structure to the content it should not be
used
to give style to the content it is done by css for example h1 must be used for the
most important heading in your content no matter how it looks it can be easily
changed using CSS.
Initially the HTML was meant to do the same but back in those days since there
were no style sheets present dev added some font color etc. type of
functionalities
but from now keep in mind that html means meaning and structure style is done
by
css.

Anatomy of an HTML Tag

what is Html ? 2
Every content in html starts with opening tag and ends with closing tag expect
in some case.

ex- <P> content </p>

Every html can have pre-defined Attributes. Every Attribute must be written in
opening tag.

ex- <P id=”my id no”></P>

here, id - Attribute name

my id no - Attribute value

Content Models
There are two types of elements in content Models. They are-

Block-Level Elements Inline Elements


1).Render to begin on a new line 1).Render on the same line
(by default) (by default)
2).May contain inline or other 2).May only contain other inline
block-level elements elements
3).Roughly Flow Content 3).Roughly Phrasing Content
(HTML5 category) (HTML5 category)
4).Ex-
4).Ex- <span></span>
<div></div>

<!DOCTYPE html>
<html>
<head>
<title>my first program</title>
</head>
<body>
<div>
hello everyone this me
</div>
<span>welcome to my channel</span>

what is Html ? 3
<div>your famous actor<span> the natural star</span>
</div>
</body>
</html>

hello everyone this me


welcome to my channel
your famous actor the natural star

Types of contents

HTML5
3.2.5 Content models Each element defined in this specification
has a content model: a description of the element's expected
contents. An HTML element must have contents that match the
https://www.w3.org/TR/2011/WD-html5-20110525/content-
models.html

Semantic html elements


Element that implies some meaning to
the content

Human and/or machine can understand meaning of


content surrounded by a semantic element better

May help search engine ranking, i.e., SEO

Well chosen content of HI element is crucial to SEO

Semantic elements allow for a more meaningful


expression of the structure of our HTML page

Ex: <H1></H1>
<H2><H2>

<section></section>

Validating Your Document

what is Html ? 4
These are software's that are used to validate the html code they usually check for
the following

If you do not include the doctype in the code it does not know the html version
it
should validate the document.

It checks for nesting errors


the inclusion of required rules and attributes.

Non-standard elements

Mismatched tags

Nesting errors

Typos and minor errors

HTML Tags
HTML Lists Tags
Unordered list-

<ul style="list-style-type:square">
<li>science</li>
<ul>
<li>biology</li>
<li>chemistry</li>
<li>physics</li>
</ul>
<li>math</li>
<li>social<li>
<li>kannada</li>
<li>Hindi</li>
</ul>

ordered list-

what is Html ? 5
<ol>
<li>science</li>
<ol>
<li>biology</li>
<li>chemistry</li>
<li>physics</li>
</ol>
<li>math</li>
<li>social<li>
<li>kannada</li>
<li>Hindi</li>
</ol>

Description Lists-

1.A description list

<dl>..</dl>

2.A name, such as a term or label

<dt>..</dt>
3.A value, such as a description or definition

<dd>…</dd>

Lists provide a natural and commonly used grouping of


content

Very often, lists are used for structuring navigation


portions of the web page.

what is Html ? 6
Heading tag
It is an block element

They range from h1 to h6

Horizontal Rule
Also known as thematic break, these indicate the end of a topic, paragraph or a
page
without introducing a new heading in older HTML versions it was rendered as a 3d
shaded line but with html5 it adds a semantic meaning and as mentioned several
times if all you wanted was a decorative line then use css to make it

Block line element

Used to indicate the end of a topic page or a para.

DO NOT use as a decorative line.

Other Content Tags


Blockquote tag
These tags are used to add the long quotations or if you pick a content from other
sources it is recommended that we use other elements to markup the content in

what is Html ? 7
the
blockquotes tag.

<blockquote>
<p>Our alphabet hasn't changed in eons; there isn't much lati
tude in
what a designer can do with the individual letters.</p>
<p>Much like a piece of classical music, the score is written
down. It's not something that is tampered with, and yet, each
conductor interprets that score differently. There is tension
in
the
</blockquote>

Preformatted text
Sometimes when you are using code examples or writing a poem in your site then
white spaces are semantically significant then you can use the <pre> element to
print the text as it is typed the white spaces and carriage returns in the pre are not
ignored.

Figure and Figcaption tag


These tags are used when a content illustrates or supports the text in the main
flow the
figure tag may contain anything within it, may be a image, a code snippet, a video
or
a table

The content withing figure element must be self contained it means if the
figure is removed from the main content even then the main content and the
figure should still make sense

If you want to provide a text caption to the image then you can use the
figcaption tag.

<figure>
<pre>

what is Html ? 8
ccode>
body {
background-color :
color: red;
</code>
</pre>
#000 ;
<figcaption>Samp1e CSS rule.</figcaption>
</figure>

Main tag <main>..</main>


Webpages these days are loaded with ton of different contents like mastheads,
sidebars, ads, footers etc.….
So this tag is used to define the main content of the page

used to define the main content of the page.

The content in the main element must be unique to that page it should not
contain the elements that are shared between pages.

A page should contain only one main and it should not nest within article,
aside, header, footer, nav.

Header Tag <header></header>


This is used to mark introductory material usually present at the top of the site
or at the top of an article or a section.

When using it in an individual article it might contain this like author name
published date etc...

Nesting of a header within a header is not allowed.

Footer Tag <footer></footer>


Comes usually at the end of the page it contains info such as navigation
copyright info etc..

The footer may be for the whole body or just a particular section such as
section, aside, article etc..

what is Html ? 9
Section tag <section></section>
Long documents are easier to maintain when they are divided into smaller
sections for example books are divided into several chapters and a
newspaper is divided into several sections such as local news, sports news
etc..

The section tag is an aptly named and is used to group elements that have
something in common.

Article tag <article></article>


• An article can comprise of several sections or there might be a section which
is a collection of articles.
• Article can be nested in a section and a section can be nested in a article.
• If the content is self contained and can appear out of the current context then
it is best marked-up in article.

Aside tag <aside></aside>


• The aside tag is used when the content is separate form the content but is
tangentially related to the content
• It can be used for pull quotes, call outs, list of links, background information
etc..
• It is used to mark content that is associated with the content but not crucial to
the content
• It has no default rendering

Nav tag <nav></nav>


This element is used to mark the links used for primary navigation of site.

This is very useful from the accessibility perspective.

address tag <address></address>


• This tag is used to mark the author contact information.
• The address tag would feel right at home when used in the footer element.

div tag <div></div>

what is Html ? 10
• It is a generic block level element, if the content you have cannot be defined
using any available block level elements then you can use div tag and use the
class and id attributes to name them.

span tag <span></span>


• It is an generic inline element if the existing inline elements can not be used to
mark the content.

Improving accessibility using ARIA


(accessible rich internet application)
The elements like heading lists have implicit meaning but the element like div
and
span do not have any implicit meaning and the name you give them is not
enough.

So developers can add attributes like roles, state and properties, dev can add
it to
give richer semantic information.

role attribute
This is used to define the element more precisely it acts as a landmark.

HTML Character Entity References


Some character such as <,>,& cannot be used directly in the html so, we use
Escape Characters.

what is Html ? 11
what is Html ? 12
Links
Anchor tag <a></a>
• Linking is the most important thing in the internet after-all liking is what makes
the
web.
• To make any text a link we enclose it within <a></a> tags.
• href attribute is used to provide the url to the target website

Types of links
I. Absolute links
2 Relative links
•
Absolute links are used when you url points to another site that is not in your
server it contains the protocol and also the pathname.
•
Relative links this is used when the files are within your server it only contains
the path name and there is no need for the protocol
.) when using relative links you can use two types relative and root relative
.) In relative .Jings.jpg the directory is specified with respect to the current
directory.
.) In root relative /ings.img the directory is specified with respect to the root
directory.

Linking to a fragment in a page


• To link a fragment in the same page first you should name that fragment using
the id attribute.
• Then you can use the href="#id_name" as attribute of <a>
if you need to take the user to a fragment in some different page then you can
use the href="glosarry.html#id_name.

The Target attribute\

what is Html ? 13
This is used to specify where the new link is opened whether it is in the new
tab or new window.

The target is an attribute for the <a> tag.

_black is the value to open in a new tab.

You can name target anything without the _ for example: target="display".

You can reuse the same display window to open other urls.

The Mailto
• You can use the mailto: to specify mails when clicked it will take you to your
default mailing app.
• But be aware that spam bots can use this to send spam mails to avoid this you
can use java script {research on this for more info}
• ex: <a href=”mailto: ………”</a>

The Tel
• This is used to give the functionality when clicked this take you to the dial-pad to
make a call.
• Make sure you include the international code in the ph number ex +91
• Some times android and ios devices detect a string of IO numbers as a ph
number and make them a link to make sure this wont happen you can use the
following.

<mata name="fomat-detection" content="telephone no">

Images
There are two type of images
o the ones that are part of the content these are added in html.
o the ones used for decoration purpose these are added in css.

servers usually have a mime type for each file extension of an image when a
image is requested the server mime data to the browser to the browser so that

what is Html ? 14
the browser can interpret the type of image being received and use a helper
application if required.

It is an empty element no closing tag.

It is called a replaced element unlike other elements the content is not there it
is replaced by other file.

It is an inline element.

By default the text is aligned to the bottom line of the image.

Using an image or any other file from different server is


called
hotlinking and is considered as seriously uncool make sure
you
have written permission and also be aware that you do not
have
any control over the image.

Never forget to use eat attribute It provides text Info about the image It is used
by screen readers and some times when the image is not loaded the text
might be displayed if the image does not mean anything to the content then
you should keep the value of alt null it is done by add nothing between the
double quotes.
ex: alt=""

Adding image is divided into 3 - types:


1. Adding image with the img element.

2. Adding SVG (Scalable Vector Graphics ) images.

3. Adding responsive images.

1.) Adding images with img element


Image with appropriate suffix such as .png, .jpg, .gif, .webp etc can be directly
displayed using img element as shown below. It is a inline element. It is called as
replaced element as it is replaced by an external file when the is displayed.

what is Html ? 15
scr provides locations of the image(url).

alt provides alternative name, if in case image does’nt open.

< img scr="..image location " alt="image name">

2.) Adding SVG images (Scalable Vector Graphics )

SVG does not loss their clarity because they are made up of shapes and path
that are defined mathematically.

HTML as elements like <p>, <figure> etc, Similarly SVG as elements such as
rectangle (rect), circle (circle), paths (path).

SVG is an example, or application, of


XML (Extensible Markup Language),
which provides the rules and standards
for how markup languages should be
written and work together. As a result,
SVG plays well alongside HTML content.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 15


0">
<rect width="250" height="85" fill="yellow" rx="3" ry
="4" />
<text x="10" y="52" fill="red" font-family="Verdana-Bol
d" font-size="72">naga</text>
</svg>

what is Html ? 16

You might also like