H1 vs Header vs Head

These 3 titles can become confusing when creating Web Pages. The 3 tags sound similar but actually support different functions when constructing a web page.

H1 Tag

The <h1> tag is an inline style tag that is useful to change the font size on a web page.  This tag is often utilized to create a heading on a web page.  In a magazine or newspaper article, the heading would be at the top of the article to draw attention to the story.   In html the <h1> tag provides a similar function to draw attention to the content below.

headlline

See the Pen Heading Types by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Note:  Web Designers should be strategic with their content within a heading tag.

  • Search Engines will review the <h1> tag on your web page and reference the contents for search results.
  • Add keywords within your <h1> tag that you want to connect to possible searches.
  • The <h1> should help the visitors on your page.
  • Only use 1 <h1> tag on each web page.
  • Use <h2> – <h6> for the remaining headings.

Header Element

  • The <header> element is an Html5 structural element.
  • The <header> functions as a container for the heading tags referenced above, banners, logos, and navigational links.
  • You are allowed to use multiple <header> elements on a web page.

See the Pen header-element by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Head Element

  • The <head> element is another Html structural element.
  • The <head> element stores and directs information that is related to the Html document.
  • Information within the <head> element are not displayed visually on a web page.
  • The <title> within the <head> element will display on the tab of the browser
  • The <head> element stores links to external pages and resources that provide: style (css), interactivity/events (javascript), character sets, doctype declaration, etc.

See the Pen head-tag by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Questions