HTML
HTML
➢ Hypertext Markup language
➢ The standard markup language for Web pages.
➢ Version: 4,5
Frist project
A Simple HTML Document
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:
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
The Head
The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>,
and <base>.
The <title> element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the
page's tab.
The <title> element is required in HTML documents!
The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine
algorithms to decide the order when listing pages in search results.
The <title> element:
• defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search engine-results
The <style> element is used to define style information for a single HTML page:
The <link> element defines the relationship between the current document and an external resource.
The <link> tag is most often used to link to external style sheets:
The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and
viewport settings.
The metadata will not be displayed on the page but are used by browsers (how to display content or reload page), by search
engines (keywords), and other web services.
The <script> element is used to define client-side JavaScripts.
The <base> element specifies the base URL and/or target for all relative URLs in a page.
The <base> tag must have either an href or a target attribute present, or both.
There can only be one single <base> element in a document!
Comments
Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Headings Are Important
- Search engines use the headings to index the structure and content of your web pages.
- Users often skim a page by its headings. It is important to use headings to show the document structure.
- <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.
Paragraphs
- The HTML <p> element defines a paragraph.
- A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after
a paragraph.
- you cannot change the display by adding extra spaces or extra lines in your HTML code.
- The browser will automatically remove any extra spaces and lines when the page is displayed:
Attributes
- All HTML elements can have attributes
- Attributes provide additional information about elements
- Attributes are always specified in the start tag
- Attributes usually come in img pairs like src=”value”
Global Attributes
- The global attributes are attributes that can be used with all HTML elements like class
Formatting elements
b => Bold
strong => Bold(Important Text)
I => Italic
em => Emphasized
mark => Marked Text Or Highlighted Text
u => Underline
small => Smaller text
del => Deleted Text
ins => Inserted Text
sub => Subscript
sup => Superscript
Links - Hyperlinks
- HTML links are hyperlinks.
- You can click on a link and jump to another document.
- When you move the mouse over a link, the mouse arrow will turn into a little hand.
- _blank - Opens the document in a new window or tab
- title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the
mouse moves over the element.
- Link to a page located in the html folder on the current web site
- mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email)
Images
- src - Specifies the path to the image
- alt - Specifies an alternate text for the image
Lists
HTML lists allow web developers to group a set of related items in lists.
ul => Unorderd List
li => List Item
ol => Ordered List
dl => Description List
dt => Term
dd => Description Term
Unordered List:
Ordered List:
Separator:
Description List:
Tables
HTML tables allow web developers to arrange data into rows and columns.
- The <table> tag defines an HTML table.
- Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.
- By default, the text in <th> elements are bold and centered.
- By default, the text in <td> elements are regular and left-aligned.
- Tag <caption>
- colspan
Span & br & hr
Div
- The <div> tag defines a division or a section in an HTML document.
- The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.
- The <div> tag is easily styled by using the class or id attribute.
- Any sort of content can be put inside the <div> tag!
Layout with Div And Classes
Entities
- To use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.
- Character entities are used to display reserved characters in HTML.
Result Description Entity Name Entity Number
< less than < <
> greater than > >
& ampersand & &
" double quotation mark " "
' single quotation mark ' '
(apostrophe)
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® registered trademark ® ®
Ex:
Semantic elements
- A semantic element clearly describes its meaning to both the browser and the developer.
- Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
- Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
- We can consider it as a div, but with an expressive name
Tag Description
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos,
code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
Layout with semantic elements
Audio
The HTML <audio> element is used to play an audio file on a web page.
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will
use the first recognized format.
To start an audio file automatically, use the autoplay attribute
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
To muted an audio file automatically, use the muted attribute
use the loop attribute : A song that will start over again, every time it is finished:
Video
The HTML <video> element is used to show a video on a web page.
The controls attribute adds video controls, like play, pause, and volume.
The <source> element allows you to specify alternative video files which the browser may choose from. The browser will
use the first recognized format.
To start video file automatically, use the autoplay attribute File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
The text between the <video> and <video> tags will only be displayed in browsers that do not support the <video> element.
To muted video file automatically, use the muted attribute
use the loop attribute : A video that will start over again, every time it is finished:
The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button.
Width & height in video
The <track> tag specifies text tracks for <audio> or <video> elements.
This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.
Tracks are formatted in WebVTT format (.vtt files).
Form
The HTML <form> element is used to create an HTML form for user input
The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons,
submit buttons, etc.
Input Types And Label
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one
of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero
or more of many choices)
<input type="submit"> Displays a submit button (for submitting
the form)
<input type="button"> Displays a clickable button
The different input types are covered in: https://www.w3schools.com/html/html_form_input_types.asp
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the
user focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or
checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
Required, Placeholder, Value
The required attribute specifies that an input field must be filled out before submitting the form.
<input required>
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g., a
sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
value
The value attribute specifies the value of an <input> element.
The value attribute is used differently for different input types:
Action
The action attribute specifies where to send the form-data when a form is submitted.
Name, Method
The name attribute specifies the name of an <input> element.
The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
The method attribute specifies how to send form-data (the form-data is sent to the page specified in the action attribute).
The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").
<form method="get or post"> Get Default. Appends the form-data to the URL in name/value
pairs: URL?name=value&name=value
Post Sends the form-data as an HTTP post transaction
Hidden
The <input type="hidden"> defines a hidden input field.
A hidden field let web developers include data that cannot be seen or modified by users when a form is submitted.
A hidden field often stores what database record that needs to be updated when the form is submitted.
Note: While the value is not displayed to the user in the page's content, it is visible (and can be edited) using any browser's
developer tools or "View Source" functionality. Do not use hidden inputs as a form of security!
Reset
The <input type="reset"> defines a reset button which resets all form values to its initial values.
Color
The <input type="color"> defines a color picker.
Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control).
Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the attributes below.
❑ max - specifies the maximum value allowed
❑ min - specifies the minimum value allowed
❑ step - specifies the legal number intervals
❑ value - Specifies the default value
Number
The <input type="number"> defines a field for entering a number.
ReadOnly, Disabled, Autofocus
The ReadOnly attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
The readonly attribute can be set to keep a user from changing the value until some other conditions have been met (like
selecting a checkbox, etc.)
Disabled <input readonly>
The disabled attribute specifies that the <input> element should be disabled.
A disabled input element is unusable and un-clickable.
The disabled attribute can be set to keep a user from using the <input> element until some other condition has been met
(like selecting a checkbox, etc.)
Autofocus <input disabled>
The autofocus attribute specifies that an <input> element should automatically get focus when the page loads.
<input autofocus>
Minlenght & Maxlenght
The minlength attribute specifies the minimum number of characters required in an input field.
The maxlength attribute specifies the maximum number of characters allowed in the <input> element.
<input minlenght=“10” maxlenght=“100”>
Radio
The <input type="radio"> defines a radio button.
Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button
in a group can be selected at the same time.
The radio group must have share the same name (the value of the name attribute) to be treated as a group. Once the radio group is created,
selecting any radio button in that group automatically deselects any other selected radio button in the same group. You can have as many
radio groups on a page as you want, as long as each group has its own name.
Checkbox
The <input type="checkbox"> defines a checkbox.
The checkbox is shown as a square box that is ticked (checked) when activated.
Checkboxes are used to let a user select one or more options of a limited number of choices
Select
The <select> element is used to create a drop-down list.
The <select> element is most often used in a form, to collect user input.
The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down
list will be submitted).
The id attribute is needed to associate the drop-down list with a label.
The <optgroup> tag is used to group related options in a <select> element (drop-down list).
The multiple attribute specifies that multiple options can be selected at once.
The selected attribute specifies that an option should be pre-selected when the page loads.
Select
The <textarea> tag defines a multi-line text input control.
The <textarea> element is often used in a form, to collect user inputs like comments or reviews.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
The size of a text area is specified by the <cols> and <rows> attributes (or with CSS).
The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the text area will
be submitted).
The id attribute is needed to associate the text area with a label.
File, Search, URL, Date, Time
The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
To define a file-select field that allows multiple files to be selected, add the multiple attribute.
The <input type="search"> defines a text field for entering a search string.
The <input type="url"> defines a field for entering a URL.
The input value is automatically validated before the form can be submitted.
The <input type="date"> defines a date picker.
The resulting value includes the year, month, and day.
The <input type="month"> defines a month and year control.
he <time> tag defines a specific time (or datetime).
The datetime attribute of this element is used translate the time into a machine-readable format so that browsers can offer to
add date reminders through the user's calendar, and search engines can produce smarter search
Data List
The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.
The <datalist> tag specifies a list of pre-defined options for an <input> element.
The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as
they input data.
The <datalist> element's id attribute must be equal to the <input> element's list attribute (this binds them together).
Novalidate
The novalidate attribute specifies that the form-data (input) should not be validated when submitted.
<form action="" method="" novalidate">
Target
The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
The target attribute defines a name of, or keyword for, a browsing context (e.g. tab, window, or inline frame).
<form action="" method="" target="_blank">
Q, BlockQuote, Wbr
The <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
The <blockquote> tag specifies a section that is quoted from another source.
Browsers usually indent <blockquote> elements (look at example below to see how to remove the indentation).
The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.
Bdi, Button
BDI stands for Bi-Directional Isolation.
The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it.
This element is useful when embedding user-generated content with an unknown text direction.
The <button> tag defines a clickable button.
Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.).
That is not possible with a button created with the <input> element!
Tip: Always specify the type attribute for a <button> element, to tell browsers what type of button it is.
iFrame, Pre, Code
The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text
will be displayed exactly as written in the HTML source code.
The <code> tag is used to define a piece of computer code. The content inside is displayed in the browser's default
monospace font.
Accessibility
HTML Accessibility : Always write HTML code with accessibility in mind!
Provide the user a good way to navigate and interact with your site. Make your HTML code
as semantic as possible.
Semantic HTML
Semantic HTML means using correct HTML elements for their correct purpose as much as possible. Semantic elements are
elements with a meaning; if you need a button, use the <button> element (and not a <div> element).
Semantic HTML gives context to screen readers, which read the contents of a page out loud.
With the button example in mind:
• buttons have more suitable styling by default
• a screen reader identifies it as a button
• focusable
• Clickable
A button is also accessible for people relying on keyboard-only navigation; it can be clickable with both mouse and keys, and it
can be tabbed between (using the tab key on the keyboard).
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
