revision:
It is the standard markup language for creating web pages, as it describes the structure of a web page. It consists of a series of elements, which 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.
An HTML element is defined by a start tag, some content, and an end tag. The HTML element is everything from the start tag to the end tag.
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.
examples
<tagname > content over here</tagname >
Note: the content inside the<body> section of the HTML page will be displayed in a browser. The content inside the "title" element will be shown in the browser's title bar or in the page's tab.
The opening tag : this consists of the name of the element (e.g. div, a, p, section), wrapped in opening and closing angle brackets (e.g. <div>). This states where the element begins or starts to take effect.
The closing tag : this is the same as the opening tag, except that it includes a forward slash before the element name (e.g. </div>). This states where the element ends. Failing to add a closing tag can lead to strange results.
The content : this is the content of the element.
The element : the opening tag, the closing tag, and the content together comprise the element.
examples
<p class="note" >My dog is sleeping</p>
Here, "class" is the attribute name and "note" is the attribute value. The "class" attribute allows you to give the element a non-unique identifier that can be used to target it (and any other element with the same class value) with style information and other things.
Some attributes have no value, such as "required".
Attributes that set a value always have:
A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
The attribute name followed by an equal sign.
The attribute value wrapped by opening and closing quotation marks.
All HTML documents consist of nested HTML elements.
examples
<p>my dog is <strong>very</strong>grumpy</p>
You have to make sure that the elements are properly nested. In the example above, we opened the <p> element first, then the <strong> element; therefore, we have to close the <strong> element first, then the <p> element.
The elements have to open and close correctly so that they are clearly inside or outside one another.
Some elements have no content and are called void elements.
Empty HTML elements are elements with no content. The <br>tag defines a line break, and is an empty element without a closing tag.
The <img> element can contain attributes, but there is no closing </img> tag and no inner content. This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.
<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.
It is a required preamble and, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things.
However, these days, they don't do much and are basically just needed to make sure your document behaves correctly.
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 declaration is not case sensitive. For HTML5, the declaration is: <!DOCTYPE html>.
The <html> element wraps all the content on the entire page and is sometimes known as the root element. It also includes the "lang" attribute, setting the primary language of the document.
The <head> element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to viewers. This includes things like "keywords" and a page description that you want to appear in search results, CSS to style content, character set declarations, and more.
The <body> element contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.
Inside the <body> element there can be other elements, such as <h1>, <div>, and <p>
Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.
Paragraphs are defined with the <p> tag.
Links are defined with the <a> tag. The link's destination is specified in the "href" attribute.
Lists are ordered (<ol> . . . </ol>) or unordered (<ul> . . . </ul>).
Images are defined with the <img> tag. The source file (src), alternative text (alt), width, and height are provided as attributes.
Attributes are used to provide additional information about HTML elements.
To view HTML source code, right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.
To inspect a HTML element, right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
<!DOCTYPE> - defines the document type.
<a> - defines a hyperlink.
<abbr> - defines an abbreviation or an acronym.
<address> - defines contact information for the author/owner of a document.
<area> - defines an area inside an image map.
<article> - defines an article.
<aside> - defines content aside from the page content.
<audio> - defines embedded sound content.
<b> - defines bold text.
<base> - specifies the base URL/target for all relative URLs in a document.
<bdi> - isolates a part of text that might be formatted in a different direction from other text outside it.
<bdo> - overrides the current text direction.
<blockquote> - defines a section that is quoted from another source.
<body> - defines the document's body.
<br> - defines a single line break.
<button> - defines a clickable button.
<canvas> - used to draw graphics, on the fly, via scripting (usually JavaScript).
<caption> - defines a table caption.
<cite> - defines the title of a work.
<code> - defines a piece of computer code.
<col> - specifies column properties for each column within a<colgroup > element.
<colgroup> - specifies a group of one or more columns in a table for formatting.
<data> - adds a machine-readable translation of a given content.
<datalist> - specifies a list of pre-defined options for input controls.
<dd> - defines a description/value of a term in a description list.
<del> - defines text that has been deleted from a document.
<details> - defines additional details that the user can view or hide.
<dfn> - specifies a term that is going to be defined within the content.
<dialog> - defines a dialog box or window.
<div> - defines a section in a document.
<dl> - defines a description list.
<dt> - defines a term/name in a description list.
<em> - defines emphasized text.
<embed> - defines a container for an external application.
<fieldset> - groups related elements in a form.
<figcaption> - defines a caption for a<figure > element.
<figure> - specifies self-contained content.
<footer> - defines a footer for a document or section.
<form> - defines an HTML form for user input.
<h1> to<h6> - defines HTML headings.
<head> - contains metadata/information for the document.
<header> - defines a header for a document or section.
<hr> - defines a thematic change in the content.
<html> - defines the root of an HTML document.
<i> - defines a part of text in an alternate voice or mood.
<iframe> - defines an inline frame.
<img> - defines an image.
<input> - defines an input control.
<ins> - defines a text that has been inserted into a document.
<kbd> - defines keyboard input.
<label> - defines a label for an<input > element.
<legend> - defines a caption for a<fieldset< element.
<li> - defines a list item.
<link> - Defines the relationship between a document and an external resource (most used to link to style sheets).
<main> - specifies the main content of a document.
<map> - defines an image map.
<mark> - defines marked/highlighted text.
<meta> - defines metadata about an HTML document.
<meter> - defines a scalar measurement within a known range (a gauge).
<nav> - defines navigation links.
<noscript> - defines an alternate content for users that do not support client-side scripts.
<object> - defines a container for an external application.
<ol> - defines an ordered list.
<optgroup> - defines a group of related options in a drop-down list.
<option> - defines an option in a drop-down list.
<output> - defines the result of a calculation.
<p> - defines a paragraph.
<param> - defines a parameter for an object.
<picture> - defines a container for multiple image resources.
<pre> - defines preformatted text.
<progress> - represents the progress of a task.
<q> - defines a short quotation.
<rp> - defines what to show in browsers that do not support ruby annotations.
<rt> - d efines an explanation/pronunciation of characters (for East Asian typography).
<s> - defines text that is no longer correct.
<samp> - defines sample output from a computer program.
<"script"> - defines a client-side script.
<section> - defines a section in a document.
<select> - defines smaller text.
<source> - defines multiple media resources for media elements (<video< and<audio<).
<span> - defines a section in a document.
<strong> - defines important text.
<'style'> - defines style information for a document.
<sub> - defines subscripted text.
<summary> - defines a visible heading for a<details > element.
<sup> - defines superscripted text.
<svg> - defines a container for SVG graphics.
<table> - defines a table.
<tbody> - groups the body content in a table.
<td> - defines a cell in a table.
<template> - defines a container for content that should be hidden when the page loads.
<textarea> - defines a multiline input control (text area).
<tfoot> - groups the footer content in a table.
<th> - defines a header cell in a table.
<time> - defines a specific time (or datetime).
<title> - defines a title for the document.
<tr> - defines a row in a table.
<track> - defines text tracks for media elements (<video< and<audio<).
<u> - defines some text that is unarticulated and styled differently from normal text.
<ul> - defines an unordered list.
<var> - defines a variable.
<video> - defines embedded video content.
<wbr> - defines a possible line-break.
Each technique has its pros and cons: CSS frameworks, CSS float property, CSS flexbox, CSS grid.
CSS frameworks: if you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.
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.
CSS flexbox layout: use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
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.
To make the webpage look good on all devices (desktops, tablets, and phones) various techniques and approaches can be deployed.
Setting the viewport: to create a responsive website, add the following <meta> tag to all web pages: <meta name="viewport" content="width=device-width, initial-scale=1.0">. This will set the viewport of the page, which will give the browser instructions on how to control the page's dimensions and scaling.
Responsive images are images that scale nicely to fit any browser size. If the CSS width property is set to 100%, the image will be responsive and scale up and down. 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.
Show different images depending on browser width: the HTML <picture> element allows you to define different images for different browser window sizes.
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.
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.
Responsive web design - frameworks: all popular CSS frameworks offer responsive design. They are free, and easy to use.
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 and is designed to be a high quality alternative to Bootstrap. W3.CSS is designed to be independent of jQuery or any other JavaScript library.
Bootstrap: another popular CSS framework is Bootstrap. Bootstrap uses HTML, CSS and jQuery to make responsive web pages.
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.
Always declare the document type as the first line in your document. The correct document type for HTML is:<!DOCTYPE html>
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.
Close all HTML elements: in HTML, you do not have to close all elements (for example the <p> element).However, we strongly recommend closing all HTML elements.
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 looks cleaner, lowercase is easier to write.
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.
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.
Spaces and equal signs: HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.
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.
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.
Never skip the <title> element, as it 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.
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.
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.
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.