Tags, Attributes, and Elements
Although the basics of HTML is plain text, we need a bit more to make it a nice and shiny HTML document.
Tags
The basic structure of an HTML document includes tags, which surround content and apply meaning to it.
Change your document so that it looks like this:
<!DOCTYPE html>
<html>
<body>
This is my first web page
</body>
< /html>
Now save the document again, go back to the web browser and reload the page.
The appearance of the page will not have changed at all, but the purpose of HTML is to apply meaning, not presentation, and this example has now defined some fundamental elements of a web page.
The first line on the top, <!DOCTYPE html>, is a document type declaration and it lets the browser know which flavor of HTML you’re using (HTML5, in this case). It’s very important to stick this in - If you don’t, browsers will assume you don’t really know what you’re doing and act in a very peculiar way.
To get back to the point, <html> is the opening tag that kicks things off and tells the browser that everything between that and the < /html> closing tag is an HTML document. The stuff between <body>and </body> is the main content of the document that will appear in the browser window.
Closing tags
The </body> and </ html> put a close to their respective elements (more on elements in a moment).
Not all tags have closing tags like this (<html>< /html>) some tags, which do not wrap around content will close themselves. The line-break tag for example, looks like this :
- a line break doesn’t hold any content so the tag merrily sits by its lonely self. We will come across these examples later. All you need to remember is that all tags with content between them should be closed, in the format of opening tag → content → closing tag. It isn’t, strictly speaking, always a requirement, but it’s a convention we’re using in these tutorials because it’s good practice that results in cleaner, easier to understand code.
You might come across “self-closing” tags, whereby a br tag, for example, will look like “<br />” instead of simply “<br>”. This is a remnant of XHTML, a form of HTML based on another markup language called XML. HTML5 is much more chilled out than XHTML and will be happy with either format. Some developers prefer one way, some prefer the other. We tossed a coin and decided to stick with the simpler version.
Attributes
Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their values sit inside quotation marks. They look something like<tag attribute="value">Margarine</tag>. We will come across tags with attributes later.
Once again, quotation marks aren’t always essential but it is a good-practice convention HTML Dog uses for consistency and clarity. We suggest you do the same
Elements
Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in between (and includes) the<body>and</body> tags is the body element. As another example, whereas “<title>” and “</title>” are tags, “<title>Rumple Stiltskin</title>” is a title element.
If you're going to do it, at least cite the source:
http://htmldog.com/guides/html/beginner/tags/
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Congratulations @rahul31! You have received a personal award!
Click on the badge to view your own Board of Honor on SteemitBoard.
For more information about this award, click here
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Congratulations @rahul31! You have received a personal award!
Click on the badge to view your Board of Honor.
Do not miss the last post from @steemitboard:
SteemitBoard World Cup Contest - Play-off for third result
Participate in the SteemitBoard World Cup Contest!
Collect World Cup badges and win free SBD
Support the Gold Sponsors of the contest: @good-karma and @lukestokes
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Congratulations @rahul31! You received a personal award!
You can view your badges on your Steem Board and compare to others on the Steem Ranking
Vote for @Steemitboard as a witness to get one more award and increased upvotes!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit