Looking for Expert Opinion? Show
Let us have a look at your work and suggest how to improve it! Get a Consultant
in Page Structure Tutorial
Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation. Page ContentsNest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section. Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section. Exception for fixed page sectionsIn fixed sections of the page, for example in sidebars, the heading ranks should not change depending on the ranks in the content area. In those cases, consistency across pages is more important. Organize passages of textIn the following example, headings are used to only organize passages of text on a page, for example the main content: Example
 Headings that reflect the page organizationHeadings are useful for labeling page regions. Use aria-labelledby to associate headings with their page region, as described in the label page regions section of this tutorial. If the headings are visible, the regions are easy to identify for all users. Main heading before navigationIn this first example, the heading with the rank 1 is the first heading in the document. All other headings for structuring the page (Navigation Menu, Sidebar, Footer) are one rank lower, and so is the heading for the main content. Example
View a complete code example to see headings used like this. Main heading after navigationIn this second example, the main heading is not the site name but the content heading, which is rank 1. The subheadings in the content are rank 2 as are all the other structural headings. Example
The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>. The HTML <head> ElementThe <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information. The HTML <title> ElementThe <title> element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. The <title> element is required in HTML documents! The content 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. The <title> element:
So, try to make the title as accurate and meaningful as possible! A simple HTML document:
<!DOCTYPE html> <html><head> <title>A Meaningful Page Title</title> </head> <body> The content of the document...... </body> </html> The HTML <style> ElementThe <style> element is used to define style information for a single HTML page:
<style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style> Try it Yourself »The HTML <link> ElementThe <link> element defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets:
<link rel="stylesheet" href="mystyle.css"> Try it Yourself »
Tip: To learn all about CSS, visit our CSS Tutorial. The HTML <meta> ElementThe <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings. The metadata will not be displayed on the page, but is used by browsers (how to display content or reload page), by search engines (keywords), and other web services. ExamplesDefine the character set used: Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript"> Define a description of your web page:
<meta name="description" content="Free Web tutorials"> Define the author of a page:
<meta name="author" content="John Doe"> Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30"> Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Example of <meta> tags:
<meta charset="UTF-8"><meta name="description" content="Free Web tutorials"><meta name="keywords" content="HTML, CSS, JavaScript"><meta name="author" content="John Doe"> Try it Yourself »Setting The ViewportThe viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen. You should include the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.
Without the viewport meta tag
With the viewport meta tag The HTML <script> ElementThe <script> element is used to define client-side JavaScripts. The following JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":
<script>function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> Try it Yourself »
Tip: To learn all about JavaScript, visit our JavaScript Tutorial. The HTML <base> ElementThe <base> element specifies the base URL and/or target for all relative URLs in a page. The <base> tag must have either an href or a target attribute present, or both. There can only be one single <base> element in a document!
Specify a default URL and a default target for all links on a page: <head><base href="https://www.w3schools.com/" target="_blank"></head> <body><img src="images/stickman.gif" width="24" height="39" alt="Stickman"><a href="tags/tag_base.asp">HTML base Tag</a></body> Try it Yourself »Chapter Summary
HTML head Elements
|
What element is used to configure the headings for a web page document or section of a web page document?
Pos Terkait
Copyright © 2024 ketiadaan Inc.
