HTLM Definitions 2
(xhtml) The Most Important Differences from HTML
<!DOCTYPE> is mandatory The xmlns attribute in <html> is mandatory <html>, <head>, <title>, and <body> are mandatory Elements must always be properly nested Elements must always be closed Elements must always be in lowercase Attribute names must always be in lowercase Attribute values must always be quoted Attribute minimization is forbidden
inline elements in HTML
<a <abbr <acronym <b <bdo <big <br <button <cite <code <dfn <em <i <img
block-level elements in HTML
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
Semantic Elements in HTML
<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
HTML Uniform Resource Locators
A URL is another word for a web address. A URL can be composed of words (e.g. w3schools.com), or an Internet Protocol (IP) address (e.g. 192.68.20.50). Most people enter the name when surfing, because names are easier to remember than numbers.
Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). The <div> element is a block-level element.
Difference Between Class and ID
A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:
Non-breaking Space
A commonly used entity in HTML is the non-breaking space: A non-breaking space is a space that will not break into a new line. Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive. Examples: § 10 10 km/h 10 PM Another common use of the non-breaking space is to prevent browsers from truncating spaces in HTML pages. If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the character entity.
HTML Style Guide and Coding Conventions
A consistent, clean, and tidy HTML code makes it easier for others to read and understand your code. Here are some guidelines and tips for creating good HTML code.
Combining Diacritical Marks
A diacritical mark is a "glyph" added to a letter. Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents. Diacritical marks can appear both above and below a letter, inside a letter, and between two letters. Diacritical marks can be used in combination with alphanumeric characters to produce a character that is not present in the character set (encoding) used in the page.
HTML File Paths
A file path describes the location of a file in a web site's folder structure. A file path describes the location of a file in a web site's folder structure. File paths are used when linking to external files, like: Web pages Images Style sheets JavaScripts <img src="picture.jpg"> The "picture.jpg" file is located in the same folder as the current page <img src="images/picture.jpg"> The "picture.jpg" file is located in the images folder in the current folder <img src="/images/picture.jpg"> The "picture.jpg" file is located in the images folder at the root of the current web <img src="../picture.jpg"> The "picture.jpg" file is located in the folder one level up from the current folder
Relative File Paths
A relative file path points to a file relative to the current page. In the following example, the file path points to a file in the images folder located at the root of the current web:
The ANSI Character Set (Windows-1252)
ANSI is identical to ASCII for the values from 0 to 127. ANSI has a proprietary set of characters for the values from 128 to 159. ANSI is identical to UTF-8 for the values from 160 to 255.
The ASCII Character Set
ASCII uses the values from 0 to 31 (and 127) for control characters. ASCII uses the values from 32 to 126 for letters, digits, and symbols. ASCII does not use the values from 128 to 255.
From ASCII to UTF-8
ASCII was the first character encoding standard. ASCII defined 128 different characters that could be used on the internet: numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( ) @ < > . ISO-8859-1 was the default character set for HTML 4. This character set supported 256 different character codes. HTML 4 also supported UTF-8. ANSI (Windows-1252) was the original Windows character set. ANSI is identical to ISO-8859-1, except that ANSI has 32 extra characters. The default character set for HTML5 is UTF-8, which covers almost all of the characters and symbols in the world!
Why Semantic Elements?
According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities."
Responsive Web Design - Frameworks
All popular CSS Frameworks offer responsive design. They are free, and easy to use
Always Declare Document Type
Always declare the document type as the first line in your document. The correct document type for HTML is <!DOCTYPE html>
Always Specify alt, width, and height for Images
Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be displayed. Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image before loading.
HTML Iframe Syntax
An HTML iframe is used to display a web page within a web page. The HTML <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is
Omitting <html> and <body>?
An HTML page will validate without the <html> and <body> tags: However, we strongly recommend to always add the <html> and <body> tags! Omitting <body> can produce errors in older browsers. Omitting <html> and <body> can also crash DOM and XML software
XHTML - <!DOCTYPE ....> Is Mandatory
An XHTML document must have an XHTML <!DOCTYPE> declaration. The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document.
Absolute File Paths
An absolute file path is the full URL to a file
Iframe - Target for a Link
An iframe can be used as the target frame for a link. The target attribute of the link must refer to the name attribute of the iframe
Inline Elements
An inline element does not start on a new line and it only takes up as much width as necessary. This is a <span> element inside a paragraph.
Bootstrap
Another popular CSS framework is Bootstrap. Bootstrap uses HTML, CSS and jQuery to make responsive web pages.
Iframe - Remove the Border
By default, an iframe has a border around it. To remove the border, add the style attribute and use the CSS border property With CSS, you can also change the size, style and color of the iframe's border
Different Elements Can Share Same Class
Different HTML elements can point to the same class name. In the following example, both <h2> and <p> points to the "city" class and will share the same style:
Blank Lines and Indentation
Do not add blank lines, spaces, or indentations without a reason. For readability, add blank lines to separate large or logical code blocks. For readability, add two spaces of indentation. Do not use the tab key.
Emoji Characters
Emojis are also characters from the UTF-8 alphabet: 😄 is 128516 😍 is 128525 💗 is 128151
What are Emojis?
Emojis are characters from the UTF-8 character set: 😄 😍 💗 Emojis look like images, or icons, but they are not. They are letters (characters) from the UTF-8 (Unicode) character set.
scheme://prefix.domain:port/path/filename
Explanation: scheme - defines the type of Internet service (most common is http or https) prefix - defines a domain prefix (default for http is www) domain - defines the Internet domain name (like w3schools.com) port - defines the port number at the host (default for http is 80) path - defines a path at the server (If omitted: the root directory of the site) filename - defines the name of a document or resource
steps for a bookmark
First, create a bookmark with the id attribute <h2 id="C4">Chapter 4</h2> Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page: <a href="#C4">Jump to Chapter 4</a> Or, add a link to the bookmark ("Jump to Chapter 4"), from another page: <a href="html_demo.html#C4">Jump to Chapter 4</a>
Always Quote Attribute Values
HTML allows attribute values without quotes. However, we recommend quoting attribute values, because: Developers normally quote attribute values Quoted values are easier to read You MUST use quotes if the value contains spaces
Use Lowercase Attribute Names
HTML allows mixing uppercase and lowercase letters in attribute names. However, we recommend using lowercase attribute names, because: Mixing uppercase and lowercase names looks bad Developers normally use lowercase names Lowercase look cleaner Lowercase are easier to write
Use Lowercase Element Names
HTML allows mixing uppercase and lowercase letters in element names. However, we recommend using lowercase element names, because: Mixing uppercase and lowercase names looks bad Developers normally use lowercase names Lowercase looks cleaner Lowercase is easier to write
Spaces and Equal Signs
HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.
HTML Bookmarks with ID and Links
HTML bookmarks are used to allow readers to jump to specific parts of a webpage. Bookmarks can be useful if your page is very long. To use a bookmark, you must first create it, and then add a link to it. Then, when the link is clicked, the page will scroll to the location with the bookmark.
Multiple Classes
HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified. In the following example, the first <h2> element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes
HTML Symbol Entities
HTML entities were described in the previous chapter. Many mathematical, technical, and currency symbols, are not present on a normal keyboard. To add such symbols to an HTML page, you can use the entity name or the entity number (a decimal or a hexadecimal reference) for the symbol.
File Extensions
HTML files should have a .html extension (.htm is allowed). CSS files should have a .css extension. JavaScript files should have a .js extension.
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web page: <header> - Defines a header for a document or a section <nav> - Defines a set of navigation links <section> - Defines a section in a document <article> - Defines an independent, self-contained content <aside> - Defines content aside from the content (like a sidebar) <footer> - Defines a footer for a document or a section <details> - Defines additional details that the user can open and close on demand <summary> - Defines a heading for the <details> element
The ISO-8859-1 Character Set
ISO-8859-1 is identical to ASCII for the values from 0 to 127. ISO-8859-1 does not use the values from 128 to 159. ISO-8859-1 is identical to UTF-8 for the values from 160 to 255.
Using the width Property
If the CSS width property is set to 100%, the image will be responsive and scale up and down
Using the max-width Property
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:
CSS Frameworks
If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.
Close Empty HTML Elements?
In HTML, it is optional to close empty elements.If you expect XML/XHTML software to access your page, keep the closing slash (/), because it is required in XML and XHTML.
Close All HTML Elements
In HTML, you do not have to close all elements (for example the <p> element).
XHTML Attribute Minimization is Forbidden
In XHTML, attribute minimization is forbidden
XHTML Attribute Names Must be in Lowercase
In XHTML, attribute names must always be in lowercase
XHTML Attribute Values Must be Quoted
In XHTML, attribute values must always be quoted
XHTML Elements Must be in Lowercase
In XHTML, element names must always be in lowercase
XHTML Elements Must Always be Closed
In XHTML, elements must always be closed
XHTML Elements Must be Properly Nested
In XHTML, elements must always be properly nested within each other,
XHTML Empty Elements Must Always be Closed
In XHTML, empty elements must always be closed
Media Queries
In addition to resize text and images, it is also common to use media queries in responsive web pages. With media queries you can define completely different styles for different browser sizes. Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stacked vertically on small screens
Best Practice for absolute and relative paths
It is best practice to use relative file paths (if possible). When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.
CSS Float Layout
It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility.
The HTML script Tag
JavaScript makes HTML pages more dynamic and interactive. The HTML script tag is used to define a client-side script (JavaScript). The script element either contains script statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. To select an HTML element, JavaScript most often uses the document.getElementById() method. This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo"
UTF-8 Characters
Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers): A is 65 B is 66 C is 67
Semantic Elements in HTML
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer. In HTML there are some semantic elements that can be used to define different parts of a web page: <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time>
HTML Entities
Reserved characters in HTML must be replaced with character entities. Some characters are reserved in HTML. If you 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. A character entity looks like this: &entity_name; OR &#entity_number; To display a less than sign (<) we must write: < or <
What is Responsive Web Design?
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)
Responsive Images
Responsive images are images that scale nicely to fit any browser size
HTML Responsive Web Design
Responsive web design is about creating web pages that look good on all devices! A responsive web design will automatically adjust for different screen sizes and viewports.
What are Semantic Elements?
Semantic elements = elements with a meaning. 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.
HTML Comments
Short comments should be written on one line, like this: <!-- This is a comment --> Comments that spans more than one line, should be written like this: <!--This is a long comment example. This is a long comment example.This is a long comment example. This is a long comment example.--> Long comments are easier to observe if they are indented with two spaces.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg". Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg". If you use a mix of uppercase and lowercase, you have to be aware of this. If you move from a case-insensitive to a case-sensitive server, even small errors will break your web! To avoid these problems, always use lowercase file names!
HTML Symbols
Symbols that are not present on your keyboard can also be added by using entities.
HTML <article> Element
The <article> element specifies independent, self-contained content. An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site. Examples of where an <article> element can be used: Forum post Blog post Newspaper article
Nesting <article> in <section> or Vice Versa?
The <article> element specifies independent, self-contained content. The <section> element defines section in a document. Can we use the definitions to decide how to nest those elements? No, we cannot! So, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.
HTML <aside> Element
The <aside> element defines some content aside from the content it is placed in (like a sidebar). The <aside> content should be indirectly related to the surrounding content.
The HTML <base> Element
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!
The <div> Element
The <div> element is often used as a container for other HTML elements. The <div> element has no required attributes, but style, class and id are common. When used together with CSS, the <div> element can be used to style blocks of content:
HTML <figure> and <figcaption> Elements
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element. The <img> element defines the actual image/illustration.
HTML <footer> Element
The <footer> element defines a footer for a document or section. A <footer> element typically contains: authorship information copyright information contact information sitemap back to top links related documents You can have several <footer> elements in one document.
HTML <header> Element
The <header> element represents a container for introductory content or a set of navigational links. A <header> element typically contains: one or more heading elements (<h1> - <h6>) logo or icon authorship information Note: You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element.
The HTML <link> Element
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 HTML <meta> Element
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
HTML <section> Element
The <section> element defines a section in a document. According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading." A web page could normally be split into sections for introduction, content, and contact information.
The <span> Element
The <span> element is an inline container used to mark up a part of a text, or a part of a document. The <span> element has no required attributes, but style, class and id are common. When used together with CSS, the <span> element can be used to style parts of the text:
The HTML <style> Element
The <style> element is used to define style information for a single HTML page
The HTML <title> Element
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> tag 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 So, try to make the title as accurate and meaningful as possible!
Never Skip the <title> Element
The <title> element is required in HTML. 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 So, try to make the title as accurate and meaningful as possible
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.
HTML <code> For Computer Code
The HTML <code> element is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.
The HTML <head> Element
The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, script, and <base>. The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information.
Omitting <head>?
The HTML <head> tag can also be omitted. Browsers will add all elements before <body>, to a default <head> element.However, we recommend using the <head> tag.
HTML <kbd> For Keyboard Input
The HTML <kbd> element is used to define keyboard input. The content inside is displayed in the browser's default monospace font.
Show Different Images Depending on Browser Width
The HTML <picture> element allows you to define different images for different browser window sizes. Resize the browser window to see how the image below change depending on the width
HTML <samp> For Program Output
The HTML <samp> element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.
HTML <var> For Variables
The HTML <var> element is used to defines a variable in programming or in a mathematical expression. The content inside is typically displayed in italic
The HTML noscript Tag
The HTML noscript tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support scripts
Using The class Attribute
The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name. In the following example we have three <div> elements with a class attribute with the value of "city". All of the three <div> elements will be styled equally according to the .city style definition in the head section:
Use of The class Attribute in JavaScript
The class name can also be used by JavaScript to perform certain tasks for specific elements. JavaScript can access elements with a specific class name with the getElementsByClassName() method
Using The id Attribute in JavaScript
The id attribute can also be used by JavaScript to perform some tasks for that specific element. JavaScript can access an element with a specific id with the getElementById() method:
Using The id Attribute
The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id. The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}. In the following example we have an <h1> element that points to the id name "myHeader". This <h1> element will be styled according to the #myHeader style definition in the head section:
The HTML script Element
The script element is used to define client-side JavaScripts
Responsive Text Size
The text size can be set with a "vw" unit, which means the "viewport width". That way the text size will follow the size of the browser window
Setting The Viewport
The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen. You should include the following <meta> element in all your web pages <meta name="viewport" content="width=device-width, initial-scale=1.0"> This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag
Setting The Viewport - style guide
The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen. You should include the following <meta> element in all your web pages: <meta name="viewport" content="width=device-width, initial-scale=1.0"> This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
HTML Layout Techniques
There are four different techniques to create multicolumn layouts. Each technique has its pros and cons: CSS framework CSS float property CSS flexbox CSS grid
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions! Both will be treated as HTML by any web browser and web server.
The Syntax For Class
To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:
Setting The Viewport - web responiveness
To create a responsive website, add the following <meta> tag to all your web pages This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
The HTML charset Attribute 2
To display an HTML page correctly, a web browser must know the character set used in the page.
The HTML charset Attribute
To display an HTML page correctly, a web browser must know the character set used in the page. This is specified in the <meta> tag:
HTML Encoding (Character Sets)
To display an HTML page correctly, a web browser must know which character set to use.
Meta Data
To ensure proper interpretation and correct search engine indexing, both the language and the character encoding <meta charset="charset"> should be defined as early as possible in an HTML document:
URL Encoding
URLs can only be sent over the Internet using the ASCII character-set. If a URL contains characters outside the ASCII set, the URL has to be converted. URL encoding converts non-ASCII characters into a format that can be transmitted over the Internet. URL encoding replaces non-ASCII characters with a "%" followed by hexadecimal digits. URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign, or %20.
The UTF-8 Character Set
UTF-8 is identical to ASCII for the values from 0 to 127. UTF-8 does not use the values from 128 to 159. UTF-8 is identical to both ANSI and 8859-1 for the values from 160 to 255. UTF-8 continues from the value 256 with more than 10 000 different characters.
CSS Flexbox Layout
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
Using Style Sheets
Use simple syntax for linking to style sheets (the type attribute is not necessary): <link rel="stylesheet" href="styles.css"> Short CSS rules can be written compressed, like this: p.intro {font-family:Verdana;font-size:16em;} Long CSS rules should be written over multiple lines Place the opening bracket on the same line as the selector Use one space before the opening bracket Use two spaces of indentation Use semicolon after each property-value pair, including the last Only use quotes around values if the value contains spaces Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the type attribute is not necessary):
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe. The height and width are specified in pixels by default: Or you can add the style attribute and use the CSS height and width properties
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors. These two JavaScript statements will produce different results:
W3.CSS
W3.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default. W3.CSS is smaller and faster than similar CSS frameworks. W3.CSS is designed to be a high quality alternative to Bootstrap. W3.CSS is designed to be independent of jQuery or any other JavaScript library.
URL - Uniform Resource Locator
Web browsers request pages from web servers by using a URL. A Uniform Resource Locator (URL) is used to address a document (or other data) on the web. A web address like https://www.w3schools.com/html/default.asp follows these syntax rules:
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm". If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html." However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want. ❮ PreviousNext ❯
Avoid Long Code Lines
When using an HTML editor, it is NOT convenient to scroll right and left to read the HTML code. Try to avoid too long code lines.
HTML Versus XHTML
XHTML is a stricter, more XML-based version of HTML.
What is XHTML?
XHTML stands for EXtensible HyperText Markup Language XHTML is a stricter, more XML-based version of HTML XHTML is HTML defined as an XML application XHTML is supported by all major browsers
Why XHTML?
XML is a markup language where all documents must be marked up correctly (be "well-formed"). XHTML was developed to make HTML more extensible and flexible to work with other data formats (such as XML). In addition, browsers ignore errors in HTML pages, and try to display the website even if it has some errors in the markup. So XHTML comes with a much stricter error handling.
Add the lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
ASCII Encoding Examples
Your browser will encode input, according to the character-set used in your page. The default character-set in HTML5 is UTF-8.
Common URL Schemes
http - HyperText Transfer Protocol- Common web pages. Not encrypted https - Secure HyperText Transfer Protocol - Secure web pages. Encrypted ftp - File Transfer Protocol - Downloading or uploading files file - A file on your computer
Some Useful HTML Character Entities
non-breaking space   < less than < < > greater than > > & ampersand & & " double quotation mark " " ' single quotation mark (apostrophe) ' ' ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ € euro € € © copyright © © ® registered trademark ® ® Note: Entity names are case sensitive.
examples of Combining Diacritical Marks
̀aàà ́aáá̂ aââ ̃aãã ̀OÒÒ ́OÓÓ̂ OÔÔ ̃OÕÕ
