Here in this section of tutorial we will see the essential parts of a well-structured HTML document. A well-structured HTML document will have below three sections.
- A head that identifies a document as HTML and establishes its title.
- A body that contains the content for a Web page. This part holds all displayed text on a page, as well as most links to graphics, multimedia, locations inside the same file, and to other Web documents.
- A footer that labels a page by identifying its author, date of creation, and version number, etc.
Introduction to basic HTML element
HTML file optionally can start with an
<!DOCTYPE> declaration. It is highly recommended to add this element to make user understand the version of html your webpage is using.
<!DOCTYPE> is not an html tag.
<!DOCTYPE> doesn’t require and closing tag and also it is not case sensitive.
HTML document starts and ends with an
<HTML> tag. Once you open an
<HTML> tag you are expected to close it by calling </HTML> tag.
- This element defines certain information about an HTML document, such as what its title is, who the author is, and reference information about the document, etc.
- To create a head element, start with
< HEAD>tag, then include all of the elements you want in your head section, then end the head element with a
- If your website is using some scripts or styles of your own or third party library, they are declared in this section.
- The titles for a webpage is displayed are displayed by browsers on the top of the page, usually in the title bar (Refer below image). Every HTML document must have a title contained in a
<TITLE>start tag and a
The real content for any HTML document occurs in the body section, which is enclosed between
</BODY> tags. Two Categories of Body Elements There are two basic categories of HTML elements used in the body section:
- Block-Level Elements
- Text-Level Elements
Block level elements
Block-level elements are used to define groups of text for a specific role. They include tags that position text on the page, begin new paragraphs, set heading levels and create lists. Some commonly used block-level elements and their tags are:
- Paragraph: < P> and </P>
- Heading, level one: < H1 > and </H1 >
- Heading, level two: <H2> and </H2>
- Horizontal rule: <HR>
- Centering: <CENTER>
Text level Elements
Text-level elements are for markup bits of text, including creating links, inserting things like images or sounds, and changing the appearance of text. Some commonly used text-level elements are:
- Bold: <B> and </B>
- Italic: <I> and </I>
- Line-break: < BR>
- Link anchor: <A HREF = “URL”> and </A>
- Image: <IMG SRC = “URL”>
Technically speaking, HTML does not include a separate tag to denote a page footer. But it is recommended because a good footer helps to identify a document’s vintage and contents and let interested readers contact the author if they spot errors or want to provide feedback.
<HTML> <HEAD> <TITLE> Javatechig | Resources for Developers. </TITLE> </HEAD> <BODY> <H1> Welcome to Javatechig! </H1> <H2> Fabulous development tutorials </H2> Our website, <A HREF = ''http://javetechig.com/"> Javatechig.com</A> provides some of the finest tutorials on <B> Android </B>, <B> Java</B>, <B> Web Technologies (<I>HTML</I>, <I>Sencha Touch</I>, etc.)</B> and related mobile technlogies. <HR> <CENTER> Why not visit <A HREF = http://javatechig.com/> Javatechig.com </A> </CENTER> </BODY> </HTML>