Define Titles and Links in HTML Page Head Element
Within the HTML element in a page you are building for your website, there are two main, defining elements. The visible content of the page is enclosed in the <body> tag, and then everything else goes in the head element.
The HTML document head section is where the page title is defined and also where links to files on which the HTML page depends are defined. The HTML elements within the head element communicate important information, such as the name of the site, a description of the site content, and the linked style sheet. This information is used by the browser, search engines, and the site’s visitors.
The head section of an HTML typically includes:
The page title
Links to the CSS style sheet file(s) that are used to format the page
Keywords and other metadata used in search engines
Titles summarize page content
A page title displays in the title bar of a browser or browser tab and also in most search engine results lists. Page titles are essential — they should be succinct, but yet summarize page content.
Here’s sample code for a page title:
<title>Welcome to the Web Collective!</title>
Links to CSS style sheet(s)
Links to style sheets also belong in the head element of an HTML page. Remember that formatting is supplied to modern web pages via external, distinct, separate, linked files. Here’s how that code looks:
<link rel=stylesheet href=style1.css type=text/css />
The syntax for a linked style sheet is a bit confusing, so break it down. The tag that links a style sheet to an HTML page is an example of a non-container element (sometimes referred to as a void element). In other words, there is only an opening tag and no closing tag. Instead, this link tag opens with < and closes with />.
Elements, attributes, and values
By the way, or maybe not so by-the-way, HTML elements have attributes, and those attributes are defined with syntax that follows the model of attribute name = value.
To stick with the example of a linked style sheet, the link element had rel, href, and type attributes. Those attributes have both attribute names (like rel, href, or type) and values (the specific information in quotes that follows the attribute name).
The (less, but still relevant) role of meta tags
Meta tags are optional elements within a head element that convey additional information about a page, including the following:
Descriptions and keywords used by search engines.
Additional information about the page, like author.
Like everything else in HTML, the role and value of meta tags is evolving. In earlier eras, meta tags for keywords played a more significant role in search engine optimization (SEO; prominent and accurate display in search engine results).
However, modern search engines (and additional new tags in HTML5) provide alternate and more complex and sophisticated channels for identifying page content and indexing that content in search engines. Still, using meta tags for author, description, and keywords (still sometimes useful for search engines) can still be an important part of HTML head content.
Take a look at what a typical opening for an HTML page, including the head element, might look like.
<!DOCTYPE HTML> <head> <title>Welcome to the Web Revolution</title> <meta name=Keywords content=web,Web Design,New York City /> <meta name=Description content=The Web Collective designs Webs in New York City/> <link rel=stylesheet href=style1.css type=text/css/> </head>
The HTML elements within the head element communicate important information, such as the name of the site, a description of the site content, and the linked style sheet. This information is used by the browser, search engines, and the site’s visitors.
The figure reveals how the pieces of the head element communicate information to the world. You can see the HTML source code for the New York City version of craigslist.com (upper left), along with the defined title, displayed in the title bar of a browser (upper right) and the defined description as it shows up in Google’s search result (lower right).