I'm writing a Twitter application that will display the following three (3) things about a Twitter user:
GET statuses/user_timeline
GET friends/ids
GET followers/ids
My question is, is it symantically correct to put the above-mentioned three (3) things inside one (1) <article> tag and separate them using three(3) <section> tags? (See Option 1 below)
Or is it symantically correct to just use three (3) <article> tags (one for each item above)? (See option 2 below)
Option 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter App</title>
</head>
<body>
<article>
<section>
<h2>User's Timeline<h2>
<!-- Displays GET statuses/user_timeline here -->
</section>
<section>
<h2>User's Friends<h2>
<!-- Displays GET friends/ids here -->
<section>
<section>
<h2>User's Followers<h2>
<!-- Displays GET followers/ids -->
</section>
</article>
</body>
</html>
Option 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter App</title>
</head>
<body>
<article>
<header>
<h2>User's Timeline<h2>
</header>
<!-- Displays GET statuses/user_timeline here -->
<footer></footer>
</article>
<article>
<header>
<h2>User's Friends<h2>
</header>
<!-- Displays GET friends/ids here -->
<footer></footer>
</article>
<article>
<header>
<h2>User's Followers<h2>
</header>
<!-- Displays GET followers/ids -->
<footer></footer>
</article>
</body>
</html>
Both are correct, it won't be a problem at all...!!!
Reference: link
Related
When we code in html5 we usually write code in this format
<!DOCTYPE html>
<html>
<body>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
</body>
</html>
And like this
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Author: Hege Refsnes</p>
<p>hege#example.com</p>
</footer>
</body>
</html>
My question is why we do not write them separately when all the three tags has different semantic meaning? I mean this way
<!DOCTYPE html>
<html>
<head>
</head>
<header>
<nav>
<!-- Navigation Bar -->
</nav>
</header>
<body>
<p> Middle stuff of the website here. </p>
</body>
<footer>
<p>Author: Hege Refsnes</p>
<p>hege#example.com</p>
</footer>
</html>
My question is why we do not write them separately when all the three tags has different semantic meaning?
Because the semantic meaning they have isn't what you think it is.
The <head> contents data about the document while the <body> contains the parts of the data that get rendered.
A <header> and <footer> contain a header and footer for something which could be the <main> part of the document, or could be a <section> or something else.
I started learning html and I encountered a first problem. If someone can explain me why although the nav element is closed is still continues to be applied to the subsequent elements?
See the live example..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js"></script>
<title>Example Cafe - community cafe in Newguay, Cornwall, UK </title>
</head>
<body>
<section>
<h1>Introduction</h1>
</section>
<section>
<h1>Recipes</h1>
</section>
<nav>
<p><a href="recipes.html">Recipes</p>
<p><a href="men.html">Menu</p>
<p><a href="operating_times.html">Operating Times</p>
<p><a href="contact.html">Contact</p>
</nav>
<hr>
<h1>EXAMPLE CAFE</h1>
<p>Welcome to example cafe, We will be developing this site throughout
the book.</p>
</body>
</html>
Your <a> tag was not closed, so any text/code there after will be treated as sub-element of <a> tag, and hence you are getting the effect of <a> tag even after the <nav> tag.
NB: There is nothing special to <nav> tag. Don't blame that innocent. :P
See there the running example of your code..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js"></script>
<title>Example Cafe - community cafe in Newguay, Cornwall, UK </title>
</head>
<body>
<section>
<h1>Introduction</h1>
</section>
<section>
<h1>Recipes</h1>
</section>
<nav>
<p>Recipes</p>
<p>Menu</p>
<p>Operating Times</p>
<p>Contact</p>
</nav>
<hr>
<h1>EXAMPLE CAFE</h1>
<p>Welcome to example cafe, We will be developing this site throughout
the book.</p>
</body>
</html>
You are not closing anchor tag, and remove <p> tag, it create subsequesnt line
every time
<nav>
Recipes
<a href="men.html">Menu<a/>
<a href="operating_times.html">Operating Times<a/>
<a href="contact.html">Contact<a/>
</nav>
I'm doing my view based on a template, but there are some areas where I want to enter fragments.
Template : base.html
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>HELLO</title>
</head>
<body>
<div layout:fragment="content"></div>
<footer>
Year Template
</footer>
</body>
</html>
view: list.html
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="base">
<head th:replace="fragments/init :: head">
<title>Title</title>
</head>
<div layout:fragment="content">
<h1> <remove>List</remove> <small></small> </h1>
</div>
<footer th:replace="fragments/init :: footer">
Year List
</footer>
</html>
Fragments : fragment/init.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
<footer th:fragment="footer">
2004
</footer>
</body>
</html>
With the head fragment, it works correctly. But in the footer, But in the footer, the code of the template is displayed.
Output:
<html lang="en"><head>
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body screen_capture_injected="true">
<div>
<h1> <remove>List</remove> <small></small> </h1>
</div>
<footer>
Year Template
</footer>
</body>
</html>
I hope you can help me. Thanks in advance.
UPDATE
base.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Template title</title>
</head>
<body>
<header>
<h1>Template Title</h1>
</header>
<section layout:fragment="content">
<p>Text Template</p>
</section>
<footer layout:fragment="footer">
<p>Footer template</p>
</footer>
</body>
</html>
list.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="base">
<head th:replace="fragments/init :: head">
<title>Title List</title>
</head>
<body>
<section layout:fragment="content">
<p>Content List page</p>
</section>
<footer layout:fragment="footer">
<div layout:include="fragments/init :: extra" th:remove="tag">
<p>Footer List page</p>
</div>
</footer>
</body>
</html>
init.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head layout:fragment="head">
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
<div layout:fragment="extra">
<p>Extra Content Fragment </p>
</div>
</body>
</html>
Output:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body screen_capture_injected="true">
<header>
<h1>Template Title</h1>
</header>
<section>
<p>Content List page</p>
</section>
<footer>
<p>Extra Content Fragment </p>
</footer>
</body></html>
I managed to include the code fragment in the footer, but my goal is to replace it.
Solution:
<footer layout:fragment="footer" layout:include="fragments/init :: extra" th:remove="tag">
<p>Footer List Page</p>
</footer>
The footer in your layout page doens't contain an fragment element, so the footer doesn't change.
The content page was 'decorated' by the elements of Layout.html, the
result being a combination of the decorator page, plus the fragments
of the content page (<head> elements from both pages with the <title>
element from the content page taking place of the decorator's, all
elements from the decorator, but replaced by all content page
fragments where specified).
https://github.com/ultraq/thymeleaf-layout-dialect#decorators-and-fragments
I'm used to using ASP.NET and visual studio to develop websites. I'm trying to develop a plain .html website in a similar matter. What I mean is use master pages etc so there is code reuse and maybe deploy these template files to a group of .html files.
For example
head.html
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
header.html
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
footer.html
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
layout.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
#include(head.html)
</script>
</head>
<body>
<div data-role="page">
#include(header.html)
#include_body()
#include(footer.html)
</div><!-- /page -->
</body>
</html>
index.html
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
and combine all of these into a single output file....
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Does anything like this exist? I'm not familiar with ruby or anything...
Server-side includes (SSI) may meet your needs. With some basic server requirements met, you can do, for example:
<!--#include virtual="includes/my_file.html" -->
You could use a little PHP to do this using includes.
Header, footer etc could be created as new .php files where you place everything you want to be displayed in that section in.
Then, in say your index.php file you do something like
<?php
include ('header.php');
?>
<html>
<head>
</head>
<body>
</body>
<?php
include ('footer.php');
?>
Everything inside the header and footer PHP files will be included.
In my jQuery mobile (v 1.2) web site, I have several separate pages (i.e. each page has one header, content and footer). The problem is I can't link the pages. The following line is not working.
Another Page shows "Error loading page".
If I add rel="external" to the <a> element, it works. However, it turns off the automatic loading via Ajax. But I want to use the Ajax loading as well as keep the pages separate. Just wondering whether it's possible.
Code Page 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
click me
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
Code Page 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
page 2 content
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
The problem is that you are trying to load your pages from the filesystem.
Chrome settings prevents that, assuming that a security risk.
Serve your pages with a web server. You can use IIS on Windows XP Pro for that.
or
You can start chrome with --allow-file-access-from-file command line option
I believe you are supposed to give each 'data-role="page" and id like "page2 so in effect it would be:
<div data-role="page" id="page"> <!--Home Page-->
<div data-role="page" id="page2"> <!--2nd Page-->
<div data-role="page" id="page3"> <!--3rd Page-->
Im not sure if that is what you are looking for in this case though...