A web page is created via HTML coding. The most basic HTML web page coding needs to include the root element of an HTML document which is the element. The and elements also need to be defined within this root element.
Basic HTML Web Page Coding
The
element contains all the information that pertains to the document that does not form part of the actual content. Information inserted in the element include the document’s title, the keywords used within the document, and other relevant data such as style sheets that do not form part of the document’s content. Elements that are inserted in the element are not rendered as content by Internet browsers.The
element contains the entire document’s content. As regards the presentation of the content, this can either be specified in the body of the document or via style sheets. The latter method is now the preferred method to specify the document’s presentation and thus the attributes relating to presentation have become scarce in the element. Everything relating to content including text, images and graphics is placed in the element.A minimal HTML page follows:
Some Data
The Head Element
Title
The
- Used by search engines
- Should convey all the necessary information in a compact manner
- Ideally not more than 60 characters
- Focus on using main keyword phrases
- Should be written for human readers
Good examples:
-
Section One of the Modern Music Guide -
Cassia Estate | Your Mdina Real Estate Agent
Bad Examples:
-
Section One -
Cassia Estate Broker for Mdina and neighboring towns real estate listings, home buying, selling, leasing and much more
Style
A style sheet (CSS) fragment affecting only a single page can be defined within
Link
The element defines the relationship between two linked documents. It is an empty element as it only contains attributes. The element can appear any number of times linking different resources.
The following are supported attributes that can be included in the element:
- href - The target URL of the resource
- media - on what device the document will be displayed (screen, ttv, tv, projection, handheld, print, braille, aural, all).
- rel - the relationship between the current document and the targeted document (alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection)
- rev - the relationship between the targeted document and the current document (alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection)
- type - the MIME type of the target URL
Metadata
A element in an HTML documents is an important aspect for allowing search engines to recognize the content within the document. The tag is used to identify selected properties of a document including the description of the document, the author along with a list of key words. Meta tags are identified via the name and content attribute.
The name attribute identifies the property and the content attribute specifies the property’s value. For example, the following declaration sets a value for the Author property:
Some common elements are the following:
- description – Page description. Used by some search engines
- keywords – List of comma separated keywords. Ideally not more than 25 keywords. Used by a few search engines
- robots – With a value of NOINDEX, a search engine will not index this page
The Body Element
Spaces in an HTML document are collapsed meaning that any number of spaces count as one. Also, in HTML a new line counts as one space.
All body tags support the following list of core attributes:
- id – the identifier of the element
- class – the CSS class of the element
- title – the title of the element. Used as a tooltip in Internet browsers
- style – inline CSS of the element
All body tags, except br, frame, frameset, hr and iframe support the following list of language attributes:
- dir – the text direction for the element
- lang – the language code
Headings and Horizontal Rule
The
to tags define the headers that are inserted in a document. defines the largest header in a document and this should be used solely for the top-level heading, whereas the defines the smallest header.
defines the largest header in a document and this should be used solely for the top-level heading, whereas the defines the smallest header.
The
tag inserts a horizontal line on the page.
Naturally in the
This post is part of the series: HTML Web Page Coding
This series will guide users through a number of articles that explain basic HTML web page coding starting from the basic elements of an HTML document to advanced HTML coding that includes how to insert a table and build forms in a web page with HTML code.