Elements and attributes are used to mark up your content in an HTML document.
An HTML document is a text file with .html file extension.
You can load the file into a browser, either directly from the disk or via a web server. For most the html files you can just drag and drop it to the browser window.
Two elements provide the outer structure of an HTML document:
The following code shows the basic structure of a web document.
<!DOCTYPE HTML> <html> <!-- elements go here --> </html>
DOCTYPE element tells the browser it is dealing with an HTML document.
This is expressed through the HTML boolean attribute:
The start tag of html follows the DOCTYPE element.
HTML documents are text files containing html tags. HTML tags in HTML documents mark up Web pages.
Save the following to a text file named index.htm, and drag and drop it to a browser.
<!DOCTYPE HTML> <html> <body> <h1>My Heading</h1> <p>My paragraph</p> </body> </html>
The HTML document starts with <!DOCTYPE HTML>. <!DOCTYPE HTML> tells the browser this is a html document.
The content between
</html> marks the Web page.
</body> marks the visible page content.
</h1> is uses to define a heading.
</p> creates a paragraph.
The metadata in HTML document provides information about your document.
The metadata is contained inside a head element.
<!DOCTYPE HTML> <html> <head> <!-- define your metadata here --> <title>web document title</title> </head> </html>
title element in the code above is metadata.
Most browsers display the title element in the browser window title bar or at the top of the tab that displays the page.
head element also defines relationships to external
resources such as CSS stylesheets, define inline CSS styles, and
define and load scripts.
The content of a html document is added through the
The following code adds a line of text to body element.
<!DOCTYPE HTML> <html> <head> <!-- metadata goes here --> <title>Example</title> </head> <body> This is the <code>content</code>. </body> </html><!-- ww w . j av a 2s .co m-->
What is being rendered in the content in
HTML elements defines relationships with the other elements in an HTML document.
An element that contains another element is the parent of the second element.
<!DOCTYPE HTML> <html> <head> <!-- metadata goes here --> <title>Example</title> </head> <body> This is the <code>content</code>. </body> </html>
body element is the parent to the
code element is contained between the start
and end tags of the
code element is a child of the
An element can have multiple children, but only one parent.
html element contains the
which contains the
code elements are
descendants of the
body element is a child of the
Children are direct descendants.
Elements that share the same parent are known as siblings.
body elements are siblings.