Probably the most important concept you can learn about HTML is its structure in the form of . containers HTML elements nest inside each other in their proper places. HTML Element Syntax But the first question is what are HTML elements and how can they be used semantically? HTML elements are individual components of an HTML document and it represents , or meaning. In a broader sense, it means that your site architecture separates presentation from content; essentially saying that HTML is used for structure and CSS is used for the style of your web design. semantics Writing semantic markup means understanding the hierarchy of your content and how both users and machines will read it. Much of it can seem like common-sense; when you write a heading, mark it with a heading tag ( ). When you write a paragraph, mark it with a paragraph tag ( ). <h1>, <h2>, etc. <p> Elements are written with a (or opening tag) and an (or closing tag), with content in between. They can also contain attributes that defines its additional properties. For example, a paragraph, which is represented by the element, would be written as: start tag <> end tag </> p Semantic markup means that HTML tags are never chosen based on the way they appear in a web browser — they’re chosen based on the importance and structure of the content. Why containers are so important? Containers are the basis for HTML documents because they define a logical structure for a document. If the purpose of HTML were to just mark up the appearance of a document, HTML would be a much simpler language, but it would also be less flexible and not as machine-readible. Knowing the container concept is key to your proper construction of WWW documents. Your ability to put content into HTML elements and put these elements inside the proper elements is key to your document's proper syntax. The , in HTML, usually intends another kind of containment. One that sometimes necessary to implement a behaviour or styling of multiple components. It serves the purpose of grouping elements both semantically and visually. As an example, that houses their grid system or contain various other components. container Bootstrap has "container classes" Here's an example of a general container: Title here heading This is very minimal HTML document. <!DOCTYPE html> < = > html lang "en" < > head < > title </ > title </ > head < > body < = > div class "container" < > h1 </ > h1 < > p </ > p < = = > img src "#" alt "" </ > div </ > body </ > html { : auto; : auto; : ; : ; : ; } /** * 1. Centers the content. * 2. See the "width vs max-width" section * 3. See the "Additional Padding" section */ .container margin-right /* 1 */ margin-left /* 1 */ max-width 960px /* 2 */ padding-right 10px /* 3 */ padding-left 10px /* 3 */ Differences between width and max-width Setting the width of a block-level element will prevent it from stretching out to the edges of its container (good for things like readable line lengths). Therefore, the element will take up the specified width. The problem occurs when the browser window is narrower than the specific width of the container. That will trigger a horizontal scrollbar, which is almost always undesirable. For example: { : ; } img width 600px Using max-width instead, in this situation, is better for narrower browser windows. This is important when making a site usable on small devices. Like so: { : ; : ; } img width 100% max-width 700px This says that the fixed width of the image, should take up the entire size of its container — if the width of the parent element is explicitly stated, — all hundred percent of it, yet the image should never exceed 700px. It means that the image can be less than 700px, if that suits its situation better (e.g smaller window size) but it should never be more. So there are two conditions here, that the width of the image can be 100% of the parent element if it wants to but it must never be more than 700px. Which HTML Element to Choose? Elements can be placed in two distinct groups: and elements. The former make up the document's structure, while the latter dress up the contents of a block. block level inline level Also, a block element occupies 100% of the available width and it is rendered with a line break before and after. Whereas, an inline element will take up only as much space as it needs. The most commonly used block-level elements are , , through , , , , , and so on. Whereas, the commonly used inline-level elements are , , , , , , , , , etc. <div> <p> <h1> <h6> <form> <ol> <ul> <li> <section> <img> <a> <span> <strong> <b> <em> <i> <input> <button> The element can also be considered as a wrapper since it has no semantic meaning and it is just a generic container. It simply holds all visual elements and content on the page. In terms of semantics, when in doubt, is the best choice. <div> <div> One might also wonder if maybe or another block element could be used as a generic wrapper, instead of element. That would be a big HTML , here's what says: <section> <div> semantic mistake the W3C spec The element . When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline. <section> is not a generic container element The element carries it's own semantics. It represents a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element. <section> Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information. I would conclude saying that if you're new to HTML take the time to learn how to use all of these different HTML elements semantically. If you aren't sure that you're using the right element, take a few minutes and do some research. As we've seen, using the right container is important. As Internet access becomes more widespread, smart devices proliferate, and the web further integrates into the fabric of modern society, the need for markup to be semantically accurate becomes evident.
