All HTML documents must start with a <!DOCTYPE> declaration.<\/p>\n\n\n\n
The declaration is not an HTML tag. It is an \u201cinformation\u201d to the browser about what document type to expect.<\/p>\n\n\n\n
In HTML 5, the declaration is simple:<\/p>\n\n\n\n
<!DOCTYPE html><\/code><\/pre>\n\n\n\n
Make a new text file and save it as index.html, add the code as we go along in this page. The filename index.html is used to represent the home page of a site for most webservers by default.<\/p>\n\n\n\n
\n\n\n\n
The <html> tag represents the root of an HTML document.<\/p>\n\n\n\n
The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).<\/p>\n\n\n\n
Note: 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.<\/p>\n\n\n\n
Here we’ve used a link to add a stylesheet that will control how the page will look. We’ll cover this more in next week’s lessons on CSS. For now just create an empty text file and save it as style.css in the same folder as this index.html file.<\/p>\n\n\n\n
\n\n\n\n
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.<\/p>\n\n\n\n
<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.<\/p>\n\n\n\n
Metadata will not be displayed on the page, but is machine parsable.<\/p>\n\n\n\n
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.<\/p>\n\n\n\n
Create a new empty text file in the same folder and save it as script.js. We’ll cover this in the week on Javascript.<\/p>\n\n\n\n
\n\n\n\n
The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser\u2019s title bar or in the page\u2019s tab.<\/p>\n\n\n\n
The <title> tag is required in HTML documents!<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
The <title> element:<\/p>\n\n\n\n
defines a title in the browser toolbar<\/li>
provides a title for the page when it is added to favourites<\/li>
displays a title for the page in search-engine results<\/li><\/ul>\n\n\n\n
Note: You can NOT have more than one <title> element in an HTML document.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <link rel=\"stylesheet\" href=\"\/style.css\">\n <script type=\"text\/javascript\" src=\"\/script.js\"><\/script>\n <meta charset=\"UTF-8\">\n <meta author=\"Your name here\">\n <title>My first webpage<\/title>\n <\/head>\n<\/html><\/code><\/pre>\n\n\n\n\n\n\n\n
The <body> tag defines the document\u2019s body.<\/p>\n\n\n\n
The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.<\/p>\n\n\n\n
Note: There can only be one <body> element in an HTML document.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <link rel=\"stylesheet\" href=\"\/style.css\">\n <script type=\"text\/javascript\" src=\"\/script.js\"><\/script>\n <meta charset=\"UTF-8\">\n <meta author=\"Your name here\">\n <title>My first webpage<\/title>\n <\/head>\n <body>\n This is my first web page!\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Example output of the code<\/figcaption><\/figure><\/div>\n\n\n\n
![\"Example](\"https:\/\/blogs.glowscotland.org.uk\/es\/public\/software\/uploads\/sites\/4063\/2023\/03\/08121017\/html1.png\")