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.