What is html document structure

What is the Structure of HTML Document?

Javascript Course - Mastering the Fundamentals

HTML is a web language. It is used to design web pages or to arrange a website’s page layouts. HTML stands for HYPERTEXT MARKUP LANGUAGE, and as the name implies, it is a markup language rather than a programming language. So, no such error can occur during the execution of HTML code. HTML code was rendered by the browser. It was not compiled or interpreted.

HTML uses specified tags and attributes to instruct browsers on how to display text, which includes what format, style, font size, and pictures to display. HTML is a case-insensitive language. Case insensitive means that there is no distinction between upper and lower case (capital and small letters), which are both viewed as the same; for example, ‘P’ and ‘p’ are both the same here. In HTML, tags are classified into two types:

  • Paired tags: These tags come in pairs. They have both opening( < >) and closing( ) tags. For eg,

    .

  • Empty tags: These tags do not come in pairs and contain no information. For eg,

paired and empty tags

An HTML document is divided into two parts:

  • Head part— The title and metadata of a web document are contained in the head element.
  • Body part— The body element includes the information that you wish to display on a web page. To make your web pages HTML 4 compatible, include a document type declaration (DTD) before the HTML element. When you create a new web page, many web publishing software will automatically add DTD and basic tags. The first tag on a web page shows the markup language used for the document. The tag offers information about the web page. Finally, the content appears in the tag.
Читайте также:  font

Basic Structure of HTML

An HTML document’s basic structure consists of 5 elements:

The tag in HTML is used to inform the browser about the HTML version used in the web page. It is referred as the document type declaration (DTD). It is not really a tag/element but rather an instruction to the browser regarding the document type. It is a null element that does not have a closing tag and must not contain any content.

Actually, there are various types of HTML e.g. HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1, etc.

Since HTML 4.01 was based on SGML, the declaration relates to the Document Type Declaration (DTD) in HTML 4.01. However, HTML 5 is not based on SGML (Standard Generalized Markup Language).

Syntax of

Example: In the given example, we are going to use the tag to declare the version of HTML the page is written in. It is an empty tag and does not contain any information.

DOCTYPE tag

The tag in HTML is used to specify the root of HTML and XHTML pages. The tag informs the browser that this is an HTML document. It is the second outer container for everything in an HTML document, followed by the tag. The tag requires a beginning and ending tag.

Syntax of the Tag

Example: In the given example, we are going to use the tag to show how it contains the contents of an HTML document.

HTML tag

Output:

The tag in HTML is used to contain metadata (data about data). It is used between the and tags.

The head of an HTML document is a section of the document whose content is not displayed in the browser when the page loads. It only contains HTML document metadata, which specifies information about the HTML document.

Depending on our needs, an HTML head might contain a lot of metadata information or can have very little or no metadata information. However, the head section of an HTML document plays an essential role in the creation of a website.

The document title, character set, styles, links, scripts, and other meta information are defined by metadata.

The following is a list of metadata tags:

Syntax of the Tag

Example: In this example, we are going to use the tag containing the (to add CSS to our content) and (to add title to our webpage) tag.

Head Tag

Output:

This tag in HTML displays the title of a web page and can help in higher rankings in search results if appropriate keywords are included.

The most significant meta element to add to our webpage is the element. It gives a relevant title to the full HTML content. It appears at the top of the browser window and gives the webpage a fitting name when saved as a favorite or bookmark. A solid web page title will guarantee a higher rank in search results. Thus, we must constantly utilize relevant keywords.

It can be found in all HTML/XHTML documents. The element must be positioned between the element, and there can only be one title element per document.

Syntax of the Tag

Example: In this example, we are going to use the tag to add a title to our webpage.

title tag output

Output:

The tag in HTML specifies the main content of an HTML document that appears on the browser. It can contain headings, text, paragraphs, photos, tables, links, videos, etc.

The tag must come after the tag, or it must be inserted between the and tags. This tag is essential for all HTML documents and should only be used once throughout the document.

tag classification

Syntax of the Tag

Example: In the given example, we are going to use the tag to add a heading, paragraph, and image to our webpage.

Output of the above code:

body tag example

Learn more

Conclusion

  • Every HTML document must begin with a declaration. It is not an HTML element or HTML tag but serves as information to the browser about the type of document to expect.
  • The tag is the root of an HTML document and contains all other HTML elements (excluding the !DOCTYPE> tag).
  • The tag in HTML is a container for metadata (it is the data about the HTML document that is not displayed) and is inserted between the and tags.
  • The tag in HTML is used to define the title of the webpage. The title must be text-only and appear in the browser’s title bar or the page’s tab.
  • The tag in HTML holds all of the main content of a webpage, such as headings , texts , paragraphs , images , tables , etc.

Источник

HTML Course | Structure of an HTML Document

As we all know HTML is a language of the web. It’s used to design the web pages or we can say structure the page layouts of a website. HTML stands for HYPERTEXT MARKUP LANGUAGE, as its full form suggests it’s not any programming language, a markup language. So, while the execution of HTML code we can’t face any such error. In real HTML code wasn’t compiled or interpreted because HTML code was rendered by the browser. which is similar to the compilation of a program. Html content is parched through the browser to display the content of HTML.

Course Navigation

HTML DOCUMENTS STRUCTURE

Html used predefined tags and attributes to tell the browser how to display content, means in which format, style, font size, and images to display. Html is a case insensitive language. Case insensitive means there is no difference in upper case and lower case ( capital and small letters) both treated as the same, for r example ‘D’ and ‘d’ both are the same here.
There are generally two types of tags in HTML:

  1. Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing() tags.
  2. Empty Tags: These tags do not require to be closed.

Below is an example of a () tag in HTML, which tells the browser to bold the text inside it.

Tags and attributes: Tags are individuals of html structure, we have to open and close any tag with a forward slash like this . There are some variations with the tag some of them are self-closing tag which isn’t required to close and some are empty tag where we can add any attributes in it. Attributes are additional properties of html tags that define the property of any html tags. i.e. width, height, controls, loops, input, and autoplay. These attributes also help us to store information in meta tags by using name, content, and type attributes. Html documents structured mentioned below:

An HTML Document is mainly divided into two parts:

  • HEAD: This contains the information about the HTML document. For Example, the Title of the page, version of HTML, Meta Data, etc.
  • BODY: This contains everything you want to display on the Web Page.

Let us now have a look at the basic structure of HTML. That is the code that is a must for every webpage to have:

HTML

Every Webpage must contain this code. Below is the complete explanation of each of the tags used in the above piece of HTML code:
: This tag is used to tells the HTML version. This currently tells that the version is HTML 5.0
: is a root element of html. It’s a biggest and main element in complete html language, all the tags , elements and attributes enclosed in it or we can say wrap init , which is used to structure a web page. tag is parent tag of and tag , other tags enclosed within and . In tag we use “lang” attributes to define languages of html page such as here en represents English language. some of them are : es = Spanish , zh-Hans = Chinese, fr= french and el= Greek etc.
: Head tag contains metadata, title, page CSS etc. Data stored in the tag is not displayed to the user, it is just written for reference purposes and as a watermark of the owner.

 Note: for better understanding refer above code of html. = to store website name or content to be displayed. = To add/ link css( cascading style sheet) file. = 1. to store data about website, organisation , creator/ owner 2. for responsive website via attributes 3. to tell compatibility of html with browser = to add javascript file.

: A body tag is used to enclose all the data which a web page has from texts to links. All the content that you see rendered in the browser is contained within this element. Following tags and elements used in the body.

1 . , , to
2.

3. and
4. , and
5.
,

    and
    .
    6. , , and
    7. , and.
    8.
    9. and others……….
    To learn more about an HTML Document structure, please visit:

HTML is the foundation of web pages, and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

Источник

Оцените статью