Scribd
Upload
17 views

What Is HTML

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. HTML describes the structure of a web page using elements like <html>, <head>, <title>, <body>, <h1>, <p>, <img> etc. that define headings, paragraphs, images and other content. Web browsers read HTML documents and display them according to the defined elements.

Uploaded by

Fabiana Uribe
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views

What Is HTML

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. HTML describes the structure of a web page using elements like <html>, <head>, <title>, <body>, <h1>, <p>, <img> etc. that define headings, paragraphs, images and other content. Web browsers read HTML documents and display them according to the defined elements.

Uploaded by

Fabiana Uribe
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

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.

Example

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Example Explained

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

The <html> element is the root element 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 is shown in the browser's title
bar or in the page's tab)

The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading

The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Note: Some HTML elements have no content (like the <br> element). These elements are
called empty elements. Empty elements do not have an end tag!

eb Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and
display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the
document:
HTML Page Structure

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type and helps browsers to display web
pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case-sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>
HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

HTML Links

HTML links are defined with the <a> tag:

<a href="https://www.w3schools.com">This is a link</a>

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

To add a comment in HTML, you should use the following syntax:

<!-- Your comment here -->

Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

Example Explained

The <html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

The <body> element defines the document's body.

It has a start tag <body> and an end tag </body>.


Then, inside the <body> element there are two other elements: <h1> and <p>:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>:

<h1>My First Heading</h1>

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>:

<h1>My First Heading</h1>

It has a start tag <p> and an end tag </p>:

<p>My first paragraph.</p>

Never Skip the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

Example <p>This is a paragraph

Empty HTML Elements

HTML elements with no content are called empty elements.


The <br> tag defines a line break, and is an empty element without a closing tag:

<p>This is a <br> paragraph with a line break.</p>

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags, but W3C recommends lowercase in
HTML, and demands lowercase for stricter document types like XHTML.

HTML Tag Reference

W3Schools' tag reference contains additional information about these tags and their
attributes.

Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings


Basic HTML
Tag Description
<!DOCTYPE>  Defines the document type
<html> Defines an HTML document
<head> Contains metadata/information for the document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!--...--> Defines a comment

Formatting
Tag Description
Not supported in HTML5. Use <abbr> instead.
<acronym>
Defines an acronym
<abbr> Defines an abbreviation or an acronym
Defines contact information for the author/owner of a
<address>
document/article
<b> Defines bold text
Isolates a part of text that might be formatted in a different direction
<bdi>
from other text outside it
<bdo> Overrides the current text direction
Not supported in HTML5. Use CSS instead.
<big>
Defines big text
<blockquote> Defines a section that is quoted from another source
Not supported in HTML5. Use CSS instead.
<center>
Defines centered text
<cite> Defines the title of a work
<code> Defines a piece of computer code
<del> Defines text that has been deleted from a document
<dfn> Specifies a term that is going to be defined within the content
<em> Defines emphasized text 
Not supported in HTML5. Use CSS instead.
<font>
Defines font, color, and size for text
<i> Defines a part of text in an alternate voice or mood
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
Defines what to show in browsers that do not support ruby
<rp>
annotations
Defines an explanation/pronunciation of characters (for East Asian
<rt>
typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<small> Defines smaller text
Not supported in HTML5. Use <del> or <s> instead.
<strike>
Defines strikethrough text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
Defines a container for content that should be hidden when the page
<template>
loads
<time> Defines a specific time (or datetime)
Not supported in HTML5. Use CSS instead.
<tt>
Defines teletype text
Defines some text that is unarticulated and styled differently from
<u>
normal text
<var> Defines a variable
<wbr> Defines a possible line-break

Forms and Input


Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation

Frames
Tag Description
Not supported in HTML5.
<frame>
Defines a window (a frame) in a frameset
Not supported in HTML5.
<frameset>
Defines a set of frames
Not supported in HTML5.
<noframes>
Defines an alternate content for users that do not support frames
<iframe> Defines an inline frame

Images
Tag Description
<img> Defines an image
<map> Defines a client-side image map
<area> Defines an area inside an image map
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
<picture> Defines a container for multiple image resources
<svg> Defines a container for SVG graphics

Audio / Video
Tag Description
<audio> Defines sound content
Defines multiple media resources for media elements (<video>,
<source>
<audio> and <picture>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines a video or movie

Links
Tag Description
<a> Defines a hyperlink
Defines the relationship between a document and an external resource
<link>
(most used to link to style sheets)
<nav> Defines navigation links

Lists
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
Not supported in HTML5. Use <ul> instead.
<dir>
Defines a directory list
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list

Tables
Tag Description
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Specifies column properties for each column within a <colgroup>
<col>
element
<colgroup> Specifies a group of one or more columns in a table for formatting

Styles and Semantics


Tag Description
<style> Defines style information for a document
<div> Defines a section in a document
<span> Defines a section in a document
<header> Defines a header for a document or section
<footer> Defines a footer for a document or section
<main> Specifies the main content of a document
<section> Defines a section in a document
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<summary> Defines a visible heading for a <details> element
<data> Adds a machine-readable translation of a given content

Meta Info
Tag Description
<head> Defines information about the document
<meta> Defines metadata about an HTML document
<base> Specifies the base URL/target for all relative URLs in a document
Not supported in HTML5. Use CSS instead.
<basefont>
Specifies a default color, size, and font for all text in a document
Programming
Tag Description
<script> Defines a client-side script
Defines an alternate content for users that do not support client-side
<noscript>
scripts
Not supported in HTML5. Use <embed> or <object> instead.
<applet>
Defines an embedded applet
<embed> Defines a container for an external (non-HTML) application
<object> Defines an embedded object
<param> Defines a parameter for an object

You might also like