HTML Layout
HTML Layout
All HTML documents should start with the tag: <!DOCTYPE html>
. This shows us and browser that this is an HTML document
The actual HTML document starts with <html>
and ends with </html>
.
The frontend visible part of the HTML document is between <body>
and </body>
.
The <!DOCTYPE> Declaration
The declaration tells browsers the type of document it is, ensuring that web pages are shown correctly.
This tag should appear once at the top of the page, before any other HTML tags.
The declaration is not sensitive to uppercase or lowercase letters.
The code snippet for declaring HTML5 is <!DOCTYPE>
HTML Headings
HTML headings are defined with the <h1>
to <h6>
tags.
<h1>
has the highest priority and biggest size. <h6>
has the lowest priority and smallest size:
HTML Paragraphs
HTML paragraphs are created using the tag <p>
tag:
HTML Links
HTML links are created by using <a>
tag:
HTML link's destination address is specified in the href
attribute.
HTML Images
In HTML images are defined with the <img>
tag.
This is the source file of the image (src
), alternative text is used to show description of text (alt
),
width
and height
are provided as attributes:
How to View HTML Source
View HTML Source Code:
To view source of HTML document Right-click in an HTML page and from option 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.
Inspect an HTML Element:
To examine the composition of an element or view its underlying HTML and CSS, right-click on the element (or a vacant space) and select "Inspect" or "Inspect Element." This action will open the developer tools, displaying the Elements or Styles panel, where you can inspect and modify the HTML or CSS code in real-time.